<!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>

Fuel UX wizard example的更多相关文章

  1. 30 个惊艳的 Bootstrap 扩展插件

    Bootstrap 是快速开发Web应用程序的前端工具包.它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等. Boo ...

  2. GitHub托管BootStrap资源汇总（持续更新中…）

    Twitter BootStrap已经火过大江南北,对于无法依赖美工的程序员来说,这一成熟前卫的前端框架简直就一神器,轻轻松松地实现出专业的UI效果.GitHub上相关的的开源项目更是层出不穷,在此整 ...

  3. 30个惊人的插件来扩展 Twitter Bootstrap

    Bootstrap Maxlength It is a lightweight plugin that allows detecting the HTML maxlength property of ...

  4. Frontend Development

    原文链接: https://github.com/dypsilon/frontend-dev-bookmarks Frontend Development Looking for something ...

  5. GitHub托管BootStrap资源汇总

    MESSENGER替换alert()消息和其他用户交互通知. JQUERY.TOCIFY.JS可以用Bootstrap或jQueryUI主题的Jquery表格组件. BOOTSTRAP-PROMPTS ...

  6. javascript 框架、根基技巧、布局、CSS、控件 JavaScript 类库

    预筹备之 JavaScript 今朝支流的 JavaScript 框架排名中,jQuery 和 Ext 可算是佼佼者,得到了用户的普遍好评.海内的一些框架许多也是模仿 jQuery 对 JavaScr ...

  7. 推荐13款优秀的Twitter Bootstrap JavaScript插件

    Bootstrap是基于HTML,CSS和JavaScript的简洁灵活的流行前端框架及交互组件集,由微博先驱Twitter在2011年8月开源的整套前端解决解决方案,拥有非常完备和详尽的开发文档,有 ...

  8. Bootstrap(转)

    Bootstrap 随着互联网的不断成熟以及我们越来越多的用各种移动端的设备访问互联网,Web设计师和Web开发者的工作也变得越来越复杂. 十年前,一切都还简单得多.那个时候,大部分用户都是坐在桌子前 ...

  9. BootStrap 最佳资源合集(转)

    witter BootStrap是一款优秀的前端的框架,称得上是前端的一个框架利器.Web前端开发者每天都在与HTML.CSS.JavaScript打交道,然 而不少人都是在周而复始的写模板.样式和交 ...

随机推荐

  1. find_elements后点击不了抓取的元素

    1.莫名其妙抓不到元素,要去看句柄,是不是没有切换 h=driver.current_window_handle nh=driver.window_handles for i in nh: if i! ...

  2. [转]10个有关RESTful API良好设计的最佳实践

    Web API已经在最近几年变成重要的话题,一个干净的API设计对于后端系统是非常重要的. 通常我们为Web API使用RESTful设计,REST概念分离了API结构和逻辑资源,通过Http方法GE ...

  3. [dpdk] 熟悉SDK与初步使用 （二）(skeleton源码分析)

    接续前节:[dpdk] 熟悉SDK与初步使用 (一)(qemu搭建实验环境) 程序逻辑: 运行参数: 关键API: 入口函数: int rte_eal_init(int argc, char **ar ...

  4. Android--ListView与数据绑定(Xamarin)

    ListView 控件是一个条目容器, 用于显示集合对象(如数组, List<T>, ObservableCollection<T>等)的每一个条目, 并提供滚动功能. 列表视 ...

  5. iOS9 适配(杂七杂八)

    1.iOS9 以后,table cell 在旋转的时候会自动调整视图内容的布局,设置以下的属性,课禁止该行为. if (runTimeOSVersion >= 9.0f) { _listTabl ...

  6. Emmet使用

    emmet官方文档 [翻译]Emmet (ZenCoding) 缩写语法 <!-- ul>li.item$*5 --> <ul> <li class="i ...

  7. 使用crypto模块实现md5加密功能（解决中文加密前后端不一致的问题）

    正常情况下使用md5加密 var crypto = require('crypto'); var md5Sign = function (data) { var md5 = crypto.create ...

  8. SQL学习整理_2

    字符串处理,字符串函数不会改变存储在表中的数据内容,他们只是把函数结果当成查询结果返回. 1. SELECT right(name,2) FROM my_list   --从my_list列表中取出n ...

  9. 【待整理】MongoDB 数据集

    MongoDB复制集原理 https://yq.aliyun.com/articles/64?spm=5176.100239.blogcont14692.15.XzCCrj MongoDB管理:如何优 ...

  10. Eexcel批量设定单元格条件格式

    最近在整理excel项目记录,觉得有些技巧还是值得拥有,记录备份下,以防将来使用: [工具/原料] excel(office或wps) [方法/步骤] 1.建立一个追踪表如下: 2.选择状态列,建立数 ...