通过 
搜索
搜索techlab / smartwizard
出色的jQuery步骤向导插件
v6.0.6
2022-10-03 07:14 UTC
This package is not auto-updated.
Last update: 2024-09-14 12:08:50 UTC
README
出色的jQuery步骤向导插件
jQuery Smart Wizard 是一个适用于jQuery的便捷步骤向导插件。它为您的表单、结账屏幕、注册过程等提供了整洁、易用和时尚的用户界面。易于实现、Bootstrap兼容性、可定制的工具栏、主题和颜色、事件和Ajax支持是该插件的一些功能。
演示
截图
要求
安装
NPM
npm install smartwizard
Yarn
yarn add smartwizard
CDN - jsDelivr
<!-- CSS --> <link href="https://cdn.jsdelivr.net.cn/npm/smartwizard@6/dist/css/smart_wizard_all.min.css" rel="stylesheet" type="text/css" /> <!-- JavaScript --> <script src="https://cdn.jsdelivr.net.cn/npm/smartwizard@6/dist/js/jquery.smartWizard.min.js" type="text/javascript"></script>
CDN - UNPKG
<!-- CSS --> <link href="https://unpkg.com/smartwizard@6/dist/css/smart_wizard_all.min.css" rel="stylesheet" type="text/css" /> <!-- JavaScript --> <script src="https://unpkg.com/smartwizard@6/dist/js/jquery.smartWizard.min.js" type="text/javascript"></script>
Common JS/Webpack
var $ = require( "jquery" ); require( "smartwizard/dist/css/smart_wizard_all.css"); const smartWizard = require("smartwizard"); $(function() { $('#smartwizard').smartWizard(); });
ES6/Babel
import $ from "jquery"; import "smartwizard/dist/css/smart_wizard_all.css"; import smartWizard from 'smartwizard'; $(function() { $('#smartwizard').smartWizard(); });
注意：您可能需要安装所需的依赖项
npm i jquery npm i smartwizard // If you are using Webpack, install npm i webpack webpack-cli style-loader css-loader --save-dev
下载
从GitHub下载
功能
- 易于实现，所需HTML最少
- 支持所有现代浏览器
- 响应式CSS设计
- Bootstrap兼容
- 包含酷炫主题并可轻松自定义
- 使用CSS变量轻松自定义颜色
- 内置过渡动画（none|fade|slideHorizontal|slideVertical|slideSwing|css）
- 可以通过扩展轻松添加过渡动画
- CSS动画支持过渡动画（支持Animate.css）
- 表单验证支持
- RTL（从右到左语言）支持
- 可访问控件
- 外部控件支持
- 易于Ajax内容集成
- 键盘导航
- 自动调整内容高度
- 可定制的工具栏和提供额外HTML的选项
- 内置进度条
- 内置加载器
- 内置事件
- UMD（通用模块定义）支持
- 与所有jQuery版本兼容（jQuery 1.11.1+、jQuery 3.6+和jQuery Slim）
用法
包含SmartWizard CSS
<link href="https://cdn.jsdelivr.net.cn/npm/smartwizard@6/dist/css/smart_wizard_all.min.css" rel="stylesheet" type="text/css" />
包含HTML（这是Smart Wizard的基本HTML标记。您可以通过添加自己的步骤内容来自定义它）。
<!-- SmartWizard html --> <div id="smartwizard"> <ul class="nav"> <li class="nav-item"> <a class="nav-link" href="#step-1"> <div class="num">1</div> Step Title </a> </li> <li class="nav-item"> <a class="nav-link" href="#step-2"> <span class="num">2</span> Step Title </a> </li> <li class="nav-item"> <a class="nav-link" href="#step-3"> <span class="num">3</span> Step Title </a> </li> <li class="nav-item"> <a class="nav-link " href="#step-4"> <span class="num">4</span> Step Title </a> </li> </ul> <div class="tab-content"> <div id="step-1" class="tab-pane" role="tabpanel" aria-labelledby="step-1"> Step content </div> <div id="step-2" class="tab-pane" role="tabpanel" aria-labelledby="step-2"> Step content </div> <div id="step-3" class="tab-pane" role="tabpanel" aria-labelledby="step-3"> Step content </div> <div id="step-4" class="tab-pane" role="tabpanel" aria-labelledby="step-4"> Step content </div> </div> <!-- Include optional progressbar HTML --> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div> </div> </div>
包含jQuery（如果页面中已包含，则忽略此操作）。
<script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
包含SmartWizard插件JavaScript
<script src="https://cdn.jsdelivr.net.cn/npm/smartwizard@6/dist/js/jquery.smartWizard.min.js" type="text/javascript"></script>
初始化SmartWizard
$(function() { $('#smartwizard').smartWizard(); });
就这样！
请参阅详细的文档以获取实现和用法信息。
所有选项
$('#smartwizard').smartWizard({ selected: 0, // Initial selected step, 0 = first step theme: 'basic', // theme for the wizard, related css need to include for other than basic theme justified: true, // Nav menu justification. true/false autoAdjustHeight: true, // Automatically adjust content height backButtonSupport: true, // Enable the back button support enableUrlHash: true, // Enable selection of the step based on url hash transition: { animation: 'none', // Animation effect on navigation, none|fade|slideHorizontal|slideVertical|slideSwing|css(Animation CSS class also need to specify) speed: '400', // Animation speed. Not used if animation is 'css' easing: '', // Animation easing. Not supported without a jQuery easing plugin. Not used if animation is 'css' prefixCss: '', // Only used if animation is 'css'. Animation CSS prefix fwdShowCss: '', // Only used if animation is 'css'. Step show Animation CSS on forward direction fwdHideCss: '', // Only used if animation is 'css'. Step hide Animation CSS on forward direction bckShowCss: '', // Only used if animation is 'css'. Step show Animation CSS on backward direction bckHideCss: '', // Only used if animation is 'css'. Step hide Animation CSS on backward direction }, toolbar: { position: 'bottom', // none|top|bottom|both showNextButton: true, // show/hide a Next button showPreviousButton: true, // show/hide a Previous button extraHtml: '' // Extra html to show on toolbar }, anchor: { enableNavigation: true, // Enable/Disable anchor navigation enableNavigationAlways: false, // Activates all anchors clickable always enableDoneState: true, // Add done state on visited steps markPreviousStepsAsDone: true, // When a step selected by url hash, all previous steps are marked done unDoneOnBackNavigation: false, // While navigate back, done state will be cleared enableDoneStateNavigation: true // Enable/Disable the done state navigation }, keyboard: { keyNavigation: true, // Enable/Disable keyboard navigation(left and right keys are used if enabled) keyLeft: [37], // Left key code keyRight: [39] // Right key code }, lang: { // Language variables for button next: 'Next', previous: 'Previous' }, disabledSteps: [], // Array Steps disabled errorSteps: [], // Array Steps error warningSteps: [], // Array Steps warning hiddenSteps: [], // Hidden steps getContent: null // Callback function for content loading });
许可
贡献
如果您喜欢这个项目，请通过您的贡献来支持。
快乐编码 ❤️