开发前端软件素材源码教程下载网站

全部
网站模板
网页特效
网站源码
素材资源
建站学院
软件工具
mysql mysql 微信 微信 小程序 dedecms 苹果 修真图
当前位置：首页 > 网页特效 > 其他 >  灵活 Bootstrap插件创建向导样式 界面 智能向导

灵活 Bootstrap插件创建向导样式 界面 智能向导

  • 源码大小：283.29KB
  • 所需积分：1积分
  • 源码编号：19JP-3373
  • 浏览次数：614次
  • 最后更新：2023年06月06日
  • 所属栏目：其他
我要下载
加入收藏
本站默认解压密码：19jp.com 或 19jp_com

最新资源

[软件工具] 360压缩
[软件工具] 雷神网游加速器 免费体验
[软件工具] 360极速浏览器X 64位
[免扣元素] 541款水果无底图PNG素材高像素高清水果图片免扣素材水果坚果
[软件工具] 正则表达式生成工具 v2.1 绿色免费版
[软件工具] 取色软件Pipette v21.5.5 中文绿色版 取色器
[后台模板] 基于bootstrap后台管理模板
[后台模板] 紫色渐变OA系统后台模板
[公司企业] 数字科技企业机构HTML5模板
[公司企业] 房产物业公司Bootstrap模板

简介

智能向导是一个jQuery向导插件，可以将长内容拆分为一个循序渐进的交互式向导界面。非常适合表单向导和基于步骤的导游。

更多功能：

  • AJAX已启用。
  • 无障碍。
  • 黑暗模式
  • 支持的事件。
  • 采用Bootstrap设计。
  • 5个内置主题。
  • 支持URL哈希。
  • 创建一个显示当前步骤的步骤栏。
  • 键盘导航。
  • 与Bootstrap程序5、Bootstrap程序4和Bootstrap程序3兼容。

参见：

  • 10个最佳表单向导插件，吸引用户并增加转化率

如何使用它:

1.在网页中加载Bootstrap的样式表（可选，自v5.0.0起）。

  1. <link rel="stylesheet" href="bootstrap.min.css" />

2.加载核心样式表智能向导.css以及您在网页中选择的主题CSS。

  1. <!-- Core Stylesheet -->
  2. <link href="./dist/css/smart_wizard.min.css" rel="stylesheet" />
  3. <!-- Optional SmartWizard themes -->
  4. <link href="./dist/css/smart_wizard_arrows.min.css" rel="stylesheet">
  5. <link href="./dist/css/smart_wizard_dots.min.css" rel="stylesheet">
  6. <link href="./dist/css/smart_wizard_round.min.css" rel="stylesheet">
  7. <link href="./dist/css/smart_wizard_square.min.css" rel="stylesheet">
  8.  
  9. <!-- All In One -->
  10. <link href="./dist/css/smart_wizard_all.min.css" rel="stylesheet" />

3.智能向导的基本HTML结构。

  1. <div id="smartwizard">
  2.   <ul class="nav">
  3.    <li>
  4.      <a class="nav-link" href="#step-1">
  5.       Step 1
  6.      </a>
  7.    </li>
  8.    <li>
  9.      <a class="nav-link" href="#step-2">
  10.       Step 2
  11.      </a>
  12.    </li>
  13.    <li>
  14.      <a class="nav-link" href="#step-3">
  15.       Step 3
  16.      </a>
  17.    </li>
  18.    ... more nav items here ...
  19.   </ul>
  20.  
  21.   <div class="tab-content">
  22.    <div id="step-1" class="tab-pane" role="tabpanel">
  23.       Step 1
  24.    </div>
  25.    <div id="step-2" class="tab-pane" role="tabpanel">
  26.       Step 2
  27.    </div>
  28.    <div id="step-3" class="tab-pane" role="tabpanel">
  29.       Step 3
  30.    </div>
  31.    ... more steps here ...
  32.   </div>
  33. </div>

4.在网页末尾加载jQuery库和jQuery智能向导插件的脚本。

  1. <script src="/path/to/cdn/jquery.min.js"></script>
  2. <script src="./dist/js/jquery.smartWizard.min.js"></script>

5.使用默认选项初始化智能向导。就是这样。

  1. $('#smartwizard').smartWizard();

6.这个例子展示了如何通过AJAX从外部数据源加载步骤：

  1. <ul class="nav">
  2.   <li class="nav-item">
  3.     <a class="nav-link" href="#step-1" data-repo="jquery-smarttab">
  4.       <strong>SmartTab</strong><br />repository details from GitHub
  5.     </a>
  6.   </li>
  7.   <li class="nav-item">
  8.     <a class="nav-link" href="#step-2" data-repo="smartwizard">
  9.       <strong>SmartWizard</strong><br />repository details from GitHub
  10.     </a>
  11.   </li>
  12.   <li class="nav-item">
  13.     <a class="nav-link" href="#step-3" data-repo="jquery-smartcart">
  14.       <strong>SmartCart</strong><br />repository details from GitHub
  15.     </a>
  16.   </li>
  17. </ul>
  1. $("#smartwizard").on("stepContent", function(e, anchorObject, stepIndex, stepDirection) {
  2.  
  3.   var repo    = anchorObject.data('repo');
  4.   var ajaxURL = "https://api.npms.io/v2/package/" + repo;
  5.   // Return a promise object
  6.   return new Promise((resolve, reject) => {
  7.  
  8.     // Ajax call to fetch your content
  9.     $.ajax({
  10.         method  : "GET",
  11.         url     : ajaxURL,
  12.         beforeSend: function( xhr ) {
  13.             // Show the loader
  14.             $('#smartwizard').smartWizard("loader", "show");
  15.         }
  16.     }).done(function( res ) {
  17.         // console.log(res);
  18.  
  19.         var html = '<h2>Ajax data about ' + repo + ' loaded from GitHub</h2>';
  20.         html += '<br>URL: <strong>' + ajaxURL + '</strong>';
  21.         html += '<br>Name: <strong>' + res.collected.metadata.name + '</strong>';
  22.         html += '<br>Description: ' + res.collected.metadata.description;
  23.         html += '<br>Homepage: <a href="' + res.collected.github.homepage + '" >'+ res.collected.github.homepage +'</a>';
  24.         html += '<br>Keywords: ' + res.collected.metadata.keywords.join(', ');
  25.  
  26.         // html += '<br>Clone URL: ' + res.clone_url;
  27.         html += '<br>Stars: ' + res.collected.github.starsCount;
  28.         html += '<br>Forks: ' + res.collected.github.forksCount;
  29.         html += '<br>Watchers: ' + res.collected.github.subscribersCount;
  30.         html += '<br>Open Issues: ' + res.collected.github.issues.openCount + '/' + res.collected.github.issues.count;
  31.  
  32.         html += '<br><br>Popularity: ' + parseInt(res.score.detail.popularity * 100);
  33.         html += '<br>Quality: ' + parseInt(res.score.detail.quality * 100);
  34.         html += '<br>Maintenance: ' + parseInt(res.score.detail.maintenance * 100);
  35.  
  36.         // Resolve the Promise with the tab content
  37.         resolve(html);
  38.  
  39.         // Hide the loader
  40.         $('#smartwizard').smartWizard("loader", "hide");
  41.     }).fail(function(err) {
  42.  
  43.         // Reject the Promise with error message to show as tab content
  44.         reject( "An error loading the resource" );
  45.  
  46.         // Hide the loader
  47.         $('#smartwizard').smartWizard("loader", "hide");
  48.     });
  49.  
  50.   });
  51. });

7.所有可用于轻松自定义向导的默认选项。

  1. $('#smartwizard').smartWizard({
  2.  
  3.   // Initial selected step, 0 = first step 
  4.   selected: 0,  
  5.  
  6.   // 'arrows', 'square', 'round', 'dots'
  7.   theme: 'basic',
  8.  
  9.   // Nav menu justification. true/false
  10.   justified: true,
  11.  
  12.   // Automatically adjust content height
  13.   autoAdjustHeight:true, 
  14.  
  15.   // Show url hash based on step 
  16.   enableURLhash: true, 
  17.  
  18.   // Enable the back button support
  19.   backButtonSupport: true, 
  20.  
  21.   // Animation options
  22.   transition: {
  23.     // Animation effect on navigation, none|fade|slideHorizontal|slideVertical|slideSwing|css(Animation CSS class also need to specify)
  24.     animation: 'none', 
  25.     // Animation speed. Not used if animation is 'css'
  26.     speed: '400', 
  27.     // Animation easing. Not supported without a jQuery easing plugin. Not used if animation is 'css'
  28.     easing: '', 
  29.     // Only used if animation is 'css'. Animation CSS prefix
  30.     prefixCss: '', 
  31.     // Only used if animation is 'css'. Step show Animation CSS on forward direction
  32.     fwdShowCss: '', 
  33.     // Only used if animation is 'css'. Step hide Animation CSS on forward direction
  34.     fwdHideCss: '', 
  35.     // Only used if animation is 'css'. Step show Animation CSS on backward direction
  36.     bckShowCss: '', 
  37.     // Only used if animation is 'css'. Step hide Animation CSS on backward direction
  38.     bckHideCss: '', 
  39.   },
  40.  
  41.   // Step bar options
  42.   toolbar: {
  43.     // none|top|bottom|both
  44.     position: 'bottom', 
  45.     // show/hide a Next button
  46.     showNextButton: true, 
  47.     // show/hide a Previous button
  48.     showPreviousButton: true, 
  49.     // Extra html to show on toolbar
  50.     extraHtml: '' 
  51.   },
  52.  
  53.   // Anchor options
  54.   anchor: {
  55.     // Enable/Disable anchor navigation 
  56.     enableNavigation: true, 
  57.     // Activates all anchors clickable always
  58.     enableNavigationAlways: false, 
  59.     // Add done state on visited steps
  60.     enableDoneState: true, 
  61.     // When a step selected by url hash, all previous steps are marked done
  62.     markPreviousStepsAsDone: true, 
  63.     // While navigate back, done state will be cleared
  64.     unDoneOnBackNavigation: false, 
  65.     // Enable/Disable the done state navigation
  66.     enableDoneStateNavigation: true 
  67.   },
  68.  
  69.   // Keyboard options
  70.   keyboard: {
  71.     // Enable/Disable keyboard navigation(left and right keys are used if enabled)
  72.     keyNavigation: true, 
  73.     // Left key code
  74.     keyLeft: [37], 
  75.     // Right key code
  76.     keyRight: [39] 
  77.   },
  78.  
  79.   // Language variables for button
  80.   lang: { 
  81.     next: 'Next',
  82.     previous: 'Previous'
  83.   },
  84.  
  85.   // CSS Class settings
  86.   style: { 
  87.     mainCss: 'sw',
  88.     navCss: 'nav',
  89.     navLinkCss: 'nav-link',
  90.     contentCss: 'tab-content',
  91.     contentPanelCss: 'tab-pane',
  92.     themePrefixCss: 'sw-theme-',
  93.     anchorDefaultCss: 'default',
  94.     anchorDoneCss: 'done',
  95.     anchorActiveCss: 'active',
  96.     anchorDisabledCss: 'disabled',
  97.     anchorHiddenCss: 'hidden',
  98.     anchorErrorCss: 'error',
  99.     anchorWarningCss: 'warning',
  100.     justifiedCss: 'sw-justified',
  101.     btnCss: 'sw-btn',
  102.     btnNextCss: 'sw-btn-next',
  103.     btnPrevCss: 'sw-btn-prev',
  104.     loaderCss: 'sw-loading',
  105.     progressCss: 'progress',
  106.     progressBarCss: 'progress-bar',
  107.     toolbarCss: 'toolbar',
  108.     toolbarPrefixCss: 'toolbar-',
  109.   },
  110.  
  111.   // Array of disabled Steps
  112.   disabledSteps: [],    
  113.  
  114.   // Highlight step with errors
  115.   errorSteps: [], 
  116.  
  117.   // Array Steps warning 
  118.   warningSteps: [], 
  119.  
  120.   // Hidden steps
  121.   hiddenSteps: [],
  122.  
  123.   // Callback function for content loading
  124.   getContent: null, 
  125.   
  126. });

8.可用的事件处理程序。

  1. // When the plugin is initialized
  2. $("#smartwizard").on("initialized", function(e) {
  3.   // do something
  4. });
  5.  
  6. // When the plugin is loaded
  7. $("#smartwizard").on("loaded", function(e) {
  8.   // do something
  9. });
  10.  
  11. // Triggered just before leaving from a step
  12. $("#smartwizard").on("leaveStep", function(e, anchorObject, stepIndex, nextStepNumber, stepDirection) {
  13.   // do something
  14. });
  15.  
  16. // When a step is shown
  17. $("#smartwizard").on("showStep", function(e, anchorObject, stepIndex, stepDirection, stepPosition) {
  18.   // do something
  19. });

9.创建自己的向导控件的可用API方法。

  1. // goto a specific step
  2. $('#smartwizard').smartWizard('goToStep', stepIndex, force);
  3.  
  4. // update options
  5. $('#smartwizard').smartWizard('setOptions', stepIndex);
  6.  
  7. // goto the next step
  8. $('#smartwizard').smartWizard('next');
  9.  
  10. // goto the prev step
  11. $('#smartwizard').smartWizard('prev');
  12.  
  13. // reset the wizard
  14. $('#smartwizard').smartWizard('reset');
  15.  
  16. // change the state of step(s)
  17. $('#smartwizard').smartWizard("setState", [1,3], "disable");
  18. $('#smartwizard').smartWizard("setState", [2], "hide");
  19.  
  20. // unset the state of step(s)
  21. $('#smartwizard').smartWizard("unsetState", [1,3], "disable");
  22.  
  23. // get the current step index
  24. var stepIndex = $('#smartwizard').smartWizard("getStepIndex");
  25.  
  26. // show/hide content loader
  27. $('#smartwizard').smartWizard("loader", "show");
  28. $('#smartwizard').smartWizard("loader", "hide");
  29.  
  30. // get options info
  31. $('#smartwizard').smartWizard("getOptions");
  32.  
  33. // get step info
  34. $('#smartwizard').smartWizard("getStepInfo");
  35.  
  36. // adjust the content height of the current step
  37. $('#smartwizard').smartWizard("fixHeight");

更新日志：

版本6.0.6（2022-10-03）

  • 修复：步骤1的历史记录不起作用

版本6.0.5（2022-08-08）

  • 已修复：unDoneOnBackNavigation不工作

版本6.0.4（2022-07-31）

  • 更改：代码优化

版本6.0.3（2022-07-31）

  • 已修复：快速导航时无法正确维护导航

版本6.0.1（2022-06-27）

  • 添加：支持jQuery Slim版本
  • 添加了：公共函数fixHeight。
  • 添加：公共函数setState。
  • 添加：公共函数unsetState。
  • 添加：公共函数getStepInfo，用于获取步骤索引和总步骤。
  • 添加了：带有force参数的goToStep函数。
  • 添加：内置进度条
  • 添加：新主题，方形和圆形
  • 添加：点和正方形这些可以通过添加导航进度CSS类在导航上有进度条。
  • 添加：颜色可以使用CSS变量动态更改。
  • 添加：Bootstrap 5支持
  • 增加：所有主题的Num（徽章）类支持
  • 添加：RTL（从右到左语言）支持
  • 添加：初始化事件
  • 添加：将CSS类名移动到选项
  • 添加：可以扩展过渡动画
  • 添加：CSS动画支持过渡动画。支持Animate.css
  • 更改：JavaScript和CSS代码被重写
  • 更改：强制所有CSS主题
  • 更改：使大多数选项可以通过setOptions功能更改
  • 更改：用最少且有意义的名称重写选项名称和属性
  • 更改：改进了过渡动画
  • 已修复：重置无法清除错误状态的现有步骤
  • 修复：goToStep方法无法识别正确的步骤
  • 已修复：URL导航以检查是否访问了步骤。
  • Fixed:已修复并添加了fixHeight公共函数以刷新内容高度。
  • 已修复：CSS文件为空
  • 已修复：没有转换时showStep事件中的stepNumber不正确
  • 已修复：showStep在初始化时显示Null而不是索引0
  • 已修复：showStep的stepIndex包含以前的索引
  • 已修复：在Bootrap 4模态中使用时不显示内容
  • 已修复：其他修复
  • 已删除：this.options.toolbar.buttonPosition已删除
  • 已删除：循环导航已删除
  • 已移除：黑暗模式已移除。添加了CSS变量支持来更改任何颜色。请参见深色示例。

v5.1.1 (2020-07-11)

  • 添加：辅助功能
  • 添加：所有主题都支持黑暗模式
  • 添加：新主题（进度）
  • 添加：leaveStep事件有新参数=>nextStepIndex
  • 添加：UMD（通用模块定义）支持
  • 已修复：leaveStep事件中的步长方向不正确

v5.0.0版本（2020-05-24）

  • 完全重写JavaScript和CSS
  • CSS到SCSS
  • 已更新所有生成包
  • 通过Promise提供外部Ajax内容支持
  • 添加了新的导航动画
  • 添加了新主题
  • 新的公共功能
  • 新内容加载事件
  • 具有Bootstrap兼容性的独立CSS

版本4.4.1（2020-02-16）

  • 添加了goToStep和hiddenSteps方法
  • 生成已更新到最新可用的系统包。

第4.3.1版（2018年3月12日）

  • Bootstrap 4支持、错误修复和改进

版本4.2.2（2017-03-27）

  • 添加了小修复和多向导示例

v4.2.1（2017年3月27日）

  • 圆点和圆圈主题更新为新设计，并做出响应

第4.1.7版（2017年2月21日）

  • 圆点和圆圈主题更新为新设计，并做出响应

第4.1.5版（2017-02-01）

  • JS和CSS更新

第4.1.2版（2017-01-09）

  • JS和CSS更新

第4.1.1版（2016-12-08）

  • 许多改进和添加

2016-11-16

  • 更新至版本v4.0.5

预览截图

相关热词： 向导创建插件Bootstrap灵活样式界面智能
上一篇：用户友好 谷歌字体选择器在jQuery 谷歌字体选择器.js
下一篇：jQuery中 简单动态上下文菜单

网站首页 | 关于我们 | 免责声明 | 网站建设 | 在线工具 | 网站地图

版权声明：本站发布的资源部分自互联网，所有资源版权归原作者所有。如果有侵犯到您的权益，请联系本站删除，谢谢合作！

Copyright 2018-2025 ©19jp.com All Rights Reserved. 陕ICP备16002142号-1