<!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. php中json_decode返回数组或对象

    http://www.3lian.com/edu/2014/02-11/128395.html 1.json_decode() json_decode (PHP 5 >= 5.2.0, PECL ...

  2. 【java基础学习】网络编程

    网络编程 InetAddress tcp udp

  3. fullpage 插件学习心得

    fullpage.js 是一个基于jquery 的插件,它能够轻松的制作出高大上的全屏网站,主要功能有; 1．支持鼠标滚动 2．支持前进后退和键盘控制 3．多个回调函数 4．支持 CSS3 动画 5． ...

  4. C# 日期格式转【转】

    使用:DateTime.ToString的方法(String, IFormatProvider)转换格式 using System; using System.Globalization; Strin ...

  5. OC的类别(分类)和拓展

    一.分类: 1.适用范围      当你已经封装好了一个类(也可能是系统类.第三方库),不想在改动这个类了,可是随着程序功能的增加需要在类中增加一个方法,这时我们不必修改主类,只需要给你原来的类增加一 ...

  6. utils.js

    /** * //2.0检测方式(目测,测量,专用仪器测试等) function GetCheckType() { $.ajax({ url: '@Url.Action("GetCheckTy ...

  7. shell 除法 小数点

    比如: num1=2 num2=3 num3=`echo "scale=2; $num1/$num2" | bc` 使用bc工具,sclae控制小数点后保留几位 还有一种方法 aw ...

  8. C# 去掉List重复元素的方法

    因为用到list,要去除重复数据,尝试了几种方法.记录于此... 测试数据: List<string> li1 = new List<string> { "8&quo ...

  9. CSS深入理解之overflow

    CSS深入理解之overflow 前言 这是跟着张鑫旭重学CSS的overflow篇 基本属性 overflow有以下五个基本属性: 1.visible : 默认值,具体表现为,应用此属性后,子元素超 ...

  10. Leetcode: Poor Pigs

    There are 1000 buckets, one and only one of them contains poison, the rest are filled with water. Th ...