<!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. 高性能Server---Reactor模型

    原文地址:http://www.ivaneye.com/2016/07/23/iomodel.html 无处不在的C/S架构 在这个充斥着云的时代,我们使用的软件可以说99%都是C/S架构的! 你发邮 ...

  2. Maven的依赖和传递性质

    1. 引入项目所需jar包 Maven项目直白的一大特点就是一般情况下不需要去自行下载jar包以及目标jar包的依赖包并导入,只需要在去Maven的中央仓库http://mvnrepository.c ...

  3. iOS10 适配、Xcode8配置总结

    随着iOS10的推送更新到来,勤劳的程序员又在加班加点的搬砖了,为此收集了一些iOS10 更新的技能给大伙参考,不断更新喜欢就star 前沿 一.Xcode8 插件你去哪了 以为是和之前一样 Xcod ...

  4. es6 ajax

    简单的co用例: var co=require("co") class view{ constructor(){ co(function*(){ var p1=this.ajax1 ...

  5. Linux TOP命令 按内存占用排序和按CPU占用排序

    P – 以 CPU 占用率大小的顺序排列进程列表M – 以内存占用率大小的顺序排列进程列表 http://blog.csdn.net/xiliuhu/article/details/6449377

  6. Mac上安装django

    参考:https://docs.djangoproject.com/en/1.9/topics/install/#installing-official-release 升级pip sudo pip ...

  7. DEDE有无缩略图如何调取

    同一样式分开调取 [field:array runphp='yes']@me = (strpos(@me['litpic'],'defaultpic') ? "":"&l ...

  8. 百度富文本编辑器UEDITOR

    前言 http://jingyan.baidu.com/article/a948d65108d7fa0a2dcd2e8d.html 配置<a>测试啊</a>.net mvc4项 ...

  9. jqurey datatable mRender FnRender 不起作用问题

    用这个插件的   知道他不起作用,就应该知道他是做什么的了吧,我的不起作用的原因是版本的问题 我在网上查找的用法 是 "fnRender":fuction(obj){} 可是不起作 ...

  10. c++实验，需要的人都知道是啥

    利用点.线.面的基本知识,声明Point,Line,Friangle,PolyAngle四个类,完成以下功能.Point类功能://实验88888(1) 移动一个点:(2) 显示一个点:(3) 可计算 ...