首页 > 其他分享 >基于Bootstrap的jQuery用户向导插件

基于Bootstrap的jQuery用户向导插件

时间:2024-12-06 12:32:38浏览次数:5  
标签:jQuery 插件 return Bootstrap element disable tab false li

这是一款非常实用的基于Twitter Bootstrap的jquery用户向导插件。该Bootstrap用户向导插件允许你使用按钮来在各个不同的操作步骤之间来回切换,还可以单独对某个步骤进行特殊的事件处理。

在线演示  下载

 

插件依赖

  • Requires jQuery v1.3.2 or later
  • Bootstrap 3.x

 示例代码

//basic wizard $(document).ready(function() {     $('#rootwizard').bootstrapWizard(); });               
//wizard with options and events $(document).ready(function() {     $('#rootwizard').bootstrapWizard({         tabClass: 'nav nav-pills',         onNext: function(tab, navigation, index) {             alert('next');         }   }); });               
//calling a method $('#rootwizard').bootstrapWizard('show',3);               

 配置参数

选项 默认值 描述
tabClass 'nav nav-pills' ul navigation class
nextSelector '.wizard li.next' next element selector
previousSelector '.wizard li.previous' previous element selector
firstSelector '.wizard li.first' first element selector
lastSelector '.wizard li.last' last element selector
backSelector '.wizard li.back' back element selector
finishSelector '.wizard li.finish' finish element selector

 事件

名称 描述
onInit 用户向导插件初始化时触发
onShow 用户向导插件数据显示时触发
onNext next 按钮被点击时触发(return false to disable moving to the next step)
onPrevious previous 按钮被点击时触发(return false to disable moving to the previous step)
onFirst first 按钮被点击时触发(return false to disable moving to the first step)
onLast last 按钮被点击时触发(return false to disable moving to the last step)
onBack back 按钮被点击时触发(return false to disable moving backwards in navigation history)
onFinish finish 按钮被点击时触发(return value is irrelevant)
onTabChange 在Tab改变时触发(return false to disable moving to that tab and showing its contents)
onTabClick 在Tab被点击时触发(return false to disable moving to that tab and showing its contents)
onTabShow 在Tab内容显示时触发(return false to disable showing that tab content)

 方法

名称 参数 描述
next   移动到下一个tab
previous   移动到前一个tab
first   跳转到第一个tab
last   跳转到最后一个tab
finish   结束用户向导并调用onFinish回调函数
show 基于0的index或目标id 跳转到指定的tab
currentIndex   Returns the zero based index number for the current tab
navigationLength   返回tabs的数量
enable zero based index 允许用户点击某个tab(removes .disabled if the item has that class)
disable zero based index 禁止用户点击某个tab(adds .disabled to the li element)
display zero based index 如果前一个li元素是隐藏的则显示它
hide zero based index 隐藏li元素(will not remove it from the DOM)
remove zero based index, optinal bool remove tab-pane element or not false by default Removes the li element from the DOM if second argument is true will also remove the tab-pane element

标签:jQuery,插件,return,Bootstrap,element,disable,tab,false,li
From: https://www.cnblogs.com/lawutuobang/p/18590512

相关文章

  • idea的maven插件的artifactId显示红色波浪线
    在IntelliJIDEA中,如果Maven项目中的某个 artifactId 出现红色波浪线,通常意味着项目配置中有一些问题,比如依赖解析失败、版本冲突等。要找出具体的原因,可以按照以下步骤进行排查:1.查看 pom.xml 中的详细错误信息悬停查看:将鼠标悬停在红色波浪线的 artifactId 上,IDEA......
  • jQuery和CSS3打造GOOGLE样式的用户登录界面
    这是一款使用Jquery和css3打造的GOOGLE样式的用户登录界面特效。该登录界面特效中,右上角的小问号和错误提示小图标使用SVG来制作,用户名和密码输入框采用浮动标签特效,可点击的按钮上使用了很酷的点击波特效。整个登录界面简洁大方,互动性很强。在线演示 下载 该用户登录界面......
  • jQuery炫酷插入和移动元素动画特效插件
    MagicMove是一款效果非常棒的JQUERY炫酷插入和移动元素动画特效插件。元素的动画和过渡效果在如今的页面设计中对用户的体验至关重要。这款插件可以以非常平滑的方式在指定元素之前插入其它元素,并且当最右边的元素超出容器时会自动下移插入到下一行的第一个位置,整体效果非常不错......
  • python - 安装pip插件
    功能:安装各种插件,功能与maven类似windows环境下,安装包中自带这个插件,检查路径./Scripts,如果包含pip.exe文件,则无须安装安装官网:https://pip.pypa.io/en/stable/installation/Downloadthescript,fromhttps://bootstrap.pypa.io/get-pip.py.Openaterminal/command......
  • 纯js可定制的跨浏览器日期时间选择器插件
    Rome是一款纯js可定制的跨浏览器日期时间选择器插件。该日期时间选择器不依赖于jquery,但它依赖于moments.js。可以通过CSS文件来自定义该日期时间选择器的外观样式。在线预览 下载  安装可以通过Bower或nmp来安装该日期时间选择器插件。npminstall--saveromebower......
  • jQuery简单带记事功能的日历插件
    e-calendar是一款jquery简单带记事功能的日历插件。通过该jQuery日历插件你可以记录或设置某天某个时刻发生的事情,具有工作备忘录的功能。通过简单的参数设置你就可以定制该日历插件的外观。 在线演示 下载  使用方法要使用该jQuery日历插件首先引入jQuery和jquery.e-......
  • 一个有趣的插件,让写代码变成打怪升级的游戏
    前言本来是要安装个statistic插件来统计代码行数的无意中发现了Code::Stats这个插件看了下介绍挺有意思的效果这是我用这个插件写了两天代码后的成果,现在升到2级了这是总览可以详细看到每种语言的经验值每天各个时段的活跃程度后面还有一些其他详细的统计关......
  • 我用了这款插件,工作效率大大提高啦~
    备忘快贴uTools是一款呼之即来,即用即走的工具集软件。备忘快贴是一款全新设计的备忘录utools插件,区别于手机自带的备忘录功能。传统的备忘录只是在需要时记录信息,而备忘快贴则不仅可以记录内容,还能轻松复制和粘贴,便于在多个场合使用。这款软件特别适合需要频繁编辑文案、消息......
  • 模方如何安装SketchUp 插件?
    (1)SketchUp扩展程序安装在SketchUp软件完成安装后,启动SketchUp,启动后选择默认的模板即可。进入主界面后,在主菜单栏选择“窗口”---“扩展程序管理器”,打开管理面板。点击“安装扩展程序”,选择在大势官网下载的“mf_skumodel.rbz”插件,点击打开。插件安装完成后,在......
  • 使用一段简单的油猴脚本来改善沉浸式翻译插件的阅读体验
    Why因为感觉沉浸式翻译这个浏览器插件,翻译后的默认样式不太容易区分,尤其是遇到那种内容多且排版不是那么好的网页,所以就写了一段简单的脚本来稍微改善下观感。效果如下图:完整代码完整代码如下://==UserScript==//@name修改沉浸式翻译插件翻译后的内容样式......