<!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. Chrome F12学习

    Chrome实用调试技巧 Chrome调试工具常用功能整理 Google Chrome开发者工具使用(图文教程) 如何更专业的使用Chrome开发者工具

  2. partnerv2.1

    2.1.实时获取产品价格(action=queryprice) 请求 { "useDate": "2016-04-05T19:56", //开始用车时间(当地时 ...

  3. Codeforces 209 C. Trails and Glades

    Vasya went for a walk in the park. The park has n glades, numbered from 1 to n. There are m trails b ...

  4. magento搬家

    将原来网站文件中的var文件中的cache和session文件删除,将media中的缓存文件删除.然后将所有文件制作成一个压缩包,以减少文件体积,方便转移. 将压缩包转移到新的服务器域名指向的文件夹, ...

  5. IT行业常谈的优雅

    起因 前几天在群里和以前一起在成都培训的同学谈论到了求职, 有一位朋友说他在某家外包公司试用失败了, 然后我说了句:不要去外包公司.即使工资高一点. 其实说的时候也没考虑到他本人的处境, 毕竟还房贷资 ...

  6. C#面试（2016年4月）

    1.WebForm和MVC的区别 MVC: 1)通过model.view.controller将处理后台逻辑代码与前台展示逻辑代码进行了很好的分离: 2)通过修改路由规则,可以控制生成自定义的url, ...

  7. LeetCode First Unique Character in a String

    原题链接在这里:https://leetcode.com/problems/first-unique-character-in-a-string/ 题目: Given a string, find t ...

  8. iOS进行Basic认证与NTLM认证

    一.iOS进行Basic认证 只需要在NSMutableURLRequest的Header中添加认证所需的Username和password. NSMutableURLRequest *webReq ...

  9. 第九章伪代码编程过程 The PseudoCode Programming Process

    目录: 1.创建类和子程序的步骤概述 2.伪代码 3.通过伪代码编程过程创建子程序 4.伪代码编程过程的替代方案 一.创建类和子程序的步骤概述 (1)创建一个类的步骤 1.创建类的总体设计 2.创建类 ...

  10. Python调用C++

    /***gcc -o libpycall.so -shared -fPIC pycall.c*/ #include <stdio.h> #include <stdlib.h> ...