Fuel UX wizard example
2016-01-19 14:56
399 查看
<!DOCTYPE html> <html class="no-js fuelux"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>E-Learning</title> <link rel="stylesheet" href="https://fuelcdn.com/fuelux/2.3/css/fuelux.min.css"> <link rel="stylesheet" href="css/main.css"> </head> <body> <div class="container"> <div id="my-wizard" class="wizard"> <ul class="steps"> <li data-target="#step1" class="active"><span class="badge badge-info">1</span>Step 1<span class="chevron"></span></li> <li data-target="#step2"><span class="badge">2</span>Step 2<span class="chevron"></span></li> <li data-target="#step3"><span class="badge">3</span>Step 3<span class="chevron"></span></li> <li data-target="#step4"><span class="badge">4</span>Step 4<span class="chevron"></span></li> <li data-target="#step5"><span class="badge">5</span>Step 5<span class="chevron"></span></li> </ul> <div class="actions"> <button class="btn btn-mini btn-prev"> <i class="icon-arrow-left"></i>Prev</button> <button class="btn btn-mini btn-next" data-last="Finish">Next<i class="icon-arrow-right"></i></button> </div> </div> <div class="step-content"> <div class="step-pane active" id="step1"> step1 </div> <div class="step-pane" id="step2"> step2 </div> <div class="step-pane" id="step3"> step3 </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://fuelcdn.com/fuelux/2.3/loader.min.js"></script> <script> $(document).ready(function(){ $('#my-wizard').on('change', function(e, data) { console.log('change'); if(data.step===3 && data.direction==='next') { // return e.preventDefault(); } }); $('#my-wizard').on('changed', function(e, data) { console.log('changed'); }); $('#my-wizard').on('finished', function(e, data) { console.log('finished'); }); $('.btn-prev').on('click', function() { console.log('prev'); }); $('.btn-next').on('click', function() { console.log('next'); }); }); </script> </body> </html>
相关文章推荐
- 特殊权限SUID以及ACL
- iOS UI界面之间传值方式的整理总结(3)通知传值NSNotification
- Java String、StringBuilder 、StringBuffer用法
- 随笔ibatis的queryForMap
- iOS UI界面之间传值方式的整理总结(1)协议方法
- serialVersionUID作用
- UICollectionViewCell--查找cell上的按钮点击后,对应的是哪个cell
- IOS UIAlertView和UIAlertController学习记录
- 红警conquer.mix文件
- Android Volley完全解析(三),定制自己的Request
- LeetCode_Implement Queue using Stacks_队列操作
- 95. Unique Binary Search Trees II
- 加载图片的三种方法imageNamed、imageWithContentsOfFile、NSData
- UE4 4.9 - cast modulated shadows causes flickering on IOS dynamic characters
- C# wpf WebBrowser遮挡上层UI的解决办法
- Jenkins+Git 集成测试(build、zip、curl)
- How to Change RabbitMQ Queue Parameters in Production?
- UE3模块化阴影
- UE4 Directional Lights
- UE4 Dynamic Scene Shadows