<!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. Clang比 gcc/g++更人性化代码出错提示的C/C++编译器

    编译器方面的几个命令 gcc/g++ 一. 常用编译命令选项 常用用法 gcc -Wall test.c -o test gcc编译过程 .c ->(-E)-> .i[中间文件] -> ...

  2. 用户点击确认登录，自动跳转下面地址得到code

    PHP获取微信openid 简单教程 WEB   2014年10月29日  10868浏览  6评论 获取code https://open.weixin.qq.com/connect/oauth2/ ...

  3. [archlinux][hardware] ThankPad T450自带SSD做bcache之后的使用寿命分析

    这个分析的起因,是由于我之前干了这两个事: [troubleshoot][archlinux][bcache] 修改linux文件系统 / 分区方案 / 做混合硬盘 / 系统转生大!手!术!(调整底层 ...

  4. PyInstaller打包步骤简记

    pyinstaller 下载地址:http://www.pyinstaller.org/ 下载后用cmd进入解压文件夹 python setup.py install 安装. 最近用pyinstall ...

  5. 转 Netflix OSS、Spring Cloud还是Kubernetes? 都要吧！

    Netflix OSS.Spring Cloud还是Kubernetes? 都要吧! http://www.infoq.com/cn/articles/netflix-oss-spring-cloud ...

  6. IOS的MVC和MVVM模式简明介绍

    iOS中的MVC(Model-View-Controller)将软件系统分为Model.View.Controller三部分,结构图如下: Model: 你的应用本质上是什么(但不是它的展示方式) C ...

  7. oracle数据库之数组的操作样例

    1.创建bean对象 --创建bean对象 CREATE OR REPLACE TYPE "FM_FLOWCPHDTSWJJIMPBEAN" as object ( wf_no ) ...

  8. Go语言的GOPATH与工作目录详解

    这篇文章主要介绍了Go语言的GOPATH与工作目录详解,本文详细讲解了GOPATH设置.应用目录结构.编译应用等内容,需要的朋友可以参考下 GOPATH设置 go 命令依赖一个重要的环境变量:$GOP ...

  9. Qt容器类——1. QList类、QLinkedList类和QVector类

    在开发一个较高性能需求的应用程序时,程序员会比较关注这些容器类的运行效率,表2.1列出了QList.QLinkedList和QVector容器的时间复杂度比较. 1．QList类 QList<T ...

  10. LeetCode Sum of Left Leaves

    原题链接在这里:https://leetcode.com/problems/sum-of-left-leaves/ 题目: Find the sum of all left leaves in a g ...