zoukankan      html  css  js  c++  java
  • 基于jQuery的六大表单向导插件

    jQuery表单向导是一个jQuery插件,与某种表格流协助表单创建(不用刷新页面)。举个例子,如果你有一个巨大的表格来输入用户数据,你可以使用表单向导来将其分成一系列相关步骤。这一优点使用户不会被超长表单吓到,并且当用户输入信息时为其提供一些进度指示。

      在这篇文章中,我们列出了开发者最喜欢的六大jQuery表单向导,考量了它们的不同功能以及如何创立你自己的向导。这不会是一个冗长的列表,如果你正在寻找一个jQuery表单向导,这一定会为你指明正确的方向。

      此列表在2017年8月30日更新,从列表中删除了损坏和弃用的插件,并加入了新的插件来提供开发者要求的功能。

      1. jQuery Steps

      jQuery Steps是一个智能UI元素,使开发者可以很方便地创建向导界面。这个插件将内容分成区块来形成更有结构和顺序 的页面外观。它有多种功能,例如、状态保持(这会保存你每一步的输入)以及每个区块的过渡效果。它可以通过NuGet或者bower安装,拥有内容和功能丰富的API。

    基于jQuery,这六大表单向导插件首推!

      2. jQuery Smart Wizard

      Smart Wizard是一个灵活且高度客户化的jQuery步骤向导插件,有Bootstrap支持。它很容易执行,并且可以为你的表单、检出屏幕、注册步骤创建一个整洁而时髦的界面。它的功能包括主题支持(包括了多个主题)、URL导航、步骤选择和动态隐藏或关闭步骤。它可以通过npm、bower和composer安装,拥有内容和功能丰富的API。

      3. formToWizard

      这个小型插件可以用jQuery将任何网络表格转换成多步骤的向导,每个表格<fieldset>可以转换成具有前进和后退按键的单独步骤。虽然它没有像前两个插件那么多的功能,但它和jQuer确认插件整合,来提供确认功能。它是一个单独的文件(所以你可以从GitHub上将其提取下来),如果JavaScript不可用,它会慢慢的退化。

    基于jQuery,这六大表单向导插件首推!

      4. jQuery Stepy

      jQuery Stepy是一个生成可客户化表格的向导。它假定表格有特定的结构,其中有特定的类。然后你只需要初始化插件,然后就拥有了表单向导。

    基于jQuery,这六大表单向导插件首推!

      此插件没有任何预先设定的风格。但是,它提供了丰富的选择,例如可以在步骤之间导航,提供前进、后退和完成按钮与过渡效果,与任何你选用的确认插件整合。它提供了合理的API,例如允许你触发步骤间的召回,或者当前步骤的确认后的召回。

      5. Twitter Bootstrap Wizard

      这个Twitter Bootstrap插件利用形式可转换结构建造向导。它允许用户利用按钮来建造一个向导功能,来遍访不同的向导步骤和实践,并分别接入每一步。此插件关键的优势在于它和Bootstrap紧密整合。它有一些基本功能,例如确认、进度条和创建或移除步骤的能力。另外,为了简单地从GitHub中复制插件,它还可以通过Bower(虽然并不推荐)来安装。它有不错的内容且提供了基础的API。

    基于jQuery,这六大表单向导插件首推!

      6. jQuery.wizard

      最后要介绍的是jQuery.wizard。这是一个不同的表单向导,支持分支——在评论中被要求的功能之一。

      基本结构包括步骤和分支,后者是选择性的。一个简单的线性表格可能只要求一个包含所有步骤的分支,但复杂的表格可能要求用到多个分支,甚至是极为复杂的分支。开发者需要处理表单中步骤和分支的数量。向导采用了不同的有限步骤决定怎样自身导航。

    基于jQuery,这六大表单向导插件首推!

      这一插件的内容前所未有的丰富,提供了扩展API。它可以通过npm或者Bower来安装,与Internet Explorer 6之后的所有版本兼容。它可以和多种其他插件整合,包括最受欢迎的jQuery Validation。你可以通过复制回复并在浏览器中查看examples/index.html来查看不同的例子。

      彩蛋

      开源软件的世界很精彩,在为新项目选用插件时可以坐享极丰富的选择。但是,这并不意味着我们应该躲避为有真正作用的软件付费。以下是两种需要付费的表单向导插件。我推荐你们去看一看它们,说不定会对你有用:

      Form Wizard – Multi Step Form Validation(下载链接:https://codecanyon.net/item/form-wizard-multi-step-form-validation/19613591)

      Timon – Step Form Wizard + jQuery Step Form Builder(下载链接:https://codecanyon.net/item/timon-step-form-wizard/15830006)

      最后,如果你是那种喜欢弄懂所有事情的原理,不喜欢使用插件,那么你可能会想要看一看以下这些教程,告诉你如何通过探索来创建一个表单向导。

      Turn any webform into a powerful wizard with jQuery(地址:http://www.jankoatwarpspeed.com/turn-any-webform-into-a-powerful-wizard-with-jquery-formtowizard-plugin/)

      Multistep Form With Progress Bar Using jQuery And CSS(地址:http://talkerscode.com/webtricks/multistep-form-with-progress-bar-using-jquery-and-css.php)

      结论

      你已经拥有6个jQuery表单向导插件的详尽概览,每一个插件都有不同的功能和特点。根据项目要求来选用它们,希望你可以从这篇文章中找到对你有所帮助的内容。如果有什么遗漏请告知我们,或者通过下方评论告诉我们你最喜欢的插件是哪一个。

    转自:http://tech.it168.com/a2017/0925/3172/000003172345.shtml

  • 相关阅读:
    Sun:收购MySQL是现代软件史上最重要收购[ZT]
    SCI2012年收录的中文期刊
    Elsevier期刊投稿状态
    医学图像SCI
    贝叶斯法则,先验概率,后验概率,最大后验概率
    医学图像处理与分析方面的大牛
    2013 EI检索的国内期刊
    ICIP EMBC IUS 2013
    香港中文大学第六十九届颁授学位典礼 校长赠言 我默祷你们都能不负此生
    自动生成参考文献编号
  • 原文地址:https://www.cnblogs.com/turnip/p/13035816.html
Copyright © 2011-2022 走看看