wizzy是一款jquery响应式向导插件。该jquery向导插件提供漂亮的ui效果,可以按步骤引导用户进行操作。界面十分漂亮,并且使用非常简单。
使用方法
在页面中引入jquery和jquery.wizzy.js和jquery.wizzy.css文件。
<link href="dist/css/jquery.wizzy.css" rel="stylesheet"> <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script> <script src="js/jquery.wizzy.js"></script>
HTML结构
例如你需要为一张图片制作星星闪耀效果,它的HTML结构如下:
<div class="wz-wrapper wizzy"> <div class="wz-inner"> <div class="wz-header"> <nav> <a href="#">步骤一</a> <a href="#">步骤二</a> <a href="#">步骤三</a> <a href="#">步骤四</a> </nav> </div> <div class="wz-body"> <div class="wz-step"> <p>内容1</p> </div> <div class="wz-step"> <p>内容2</p> </div> <div class="wz-step"> <p>内容3</p> </div> <div class="wz-step"> <p>内容3</p> </div> </div> <div class="wz-navigator"></div> </div> </div>
初始化插件
在页面DOM元素加载完毕之后,通过wizzy()
方法来初始化该jquery向导插件。
$('.wizard').wizzy();
jquery向导插件的github地址为:https://github.com/NenadKaevik/wizzy
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!