欢迎投稿

菜鸟之家

当前位置:菜鸟之家 > jquery库 > Lightbox和对话框 > Bootstrap4 多步骤向导模态窗口插件

Bootstrap4 多步骤向导模态窗口插件

Bootstrap4 多步骤向导模态窗口插件

关键词:模态窗口,js向导插件,bootstrap4向导插件,bootstrap4多步骤插件,bootstrap4模态窗口,bootstrap4分步骤插件,jquery库,duihuakuang

描述:MultiStep是一款Bootstrap4 多步骤向导模态窗口插件。该插件可以基于bootstrap4 实现通过点击按钮,贷款模态窗口,在模态窗口中点击前进货后退按钮,进行步骤引导。

简要教程

MultiStep是一款Bootstrap4 多步骤向导模态窗口插件。该插件可以基于bootstrap4 实现通过点击按钮,贷款模态窗口,在模态窗口中点击前进货后退按钮,进行步骤引导。

使用方法

在页面中引入下面的文件。

<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./css/MultiStep.min.css">
<link rel="stylesheet" type="text/css" href="./css/MultiStep-theme.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/MultiStep.min.js"></script>
                
HTML结构
<div class="multi-step"></div>
                
初始化插件
$(document).ready(function() {
    $(".multi-step").MultiStep([options]);
});
                
配置参数
  • data[]:用于创建步骤的数据,是一个json数组。
  • final:最后一步结束的提示信息,默认为:Are you sure you want to confirm?
  • finalLabel:最后一步的label,默认为Complete
  • title:模态窗口的标题,默认无。
  • modalSize:模态窗口的尺寸。可选有:sm、md、lg、xl。默认为md。
  • prevText:向后一步按钮的文案。默认为Previous
  • nextText:向前一步按钮的文案。默认为Next
  • skipText:skip按钮的文案。默认为Skip
  • finishText:结束按钮的文案。默认为Finish
  • $(..).MultiStep("destroy"):销毁模态窗口的回调函数。
  • onClose($elem):模态窗口关闭时的回调函数。
  • onDestroy():模态窗口销毁时的回调函数。

MultiStep插件的github网址为:https://github.com/Kinle/MultiStep

说明:菜鸟之家所有素材均是用户自行上传分享并拥有版权或使用权,仅供网友学习交流,未经上传用户书面授权,请勿作他用。若您的权利被侵害,请联系QQ:11809283或发送邮件至11809283@qq.com。

菜鸟之家承诺:本站所有资源,无需注册,免费下载,无病毒,无弹窗,无干扰链接!

转载请注明出处!本文地址:http://www.jeeok.com/jquery_duihuakuang/9712.html

 在线演示  免费下载
编号:201907150000009712
大小:0.08MB
上传时间:2019-07-16 07:02
素材由用户"hyz893959418"上传分享。

标签

最新推荐素材

与Bootstrap4 多步骤向导模态窗口插件相关的素材

.