Fuel UX wizard example
<!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的更多相关文章
- 30 个惊艳的 Bootstrap 扩展插件
Bootstrap 是快速开发Web应用程序的前端工具包.它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等. Boo ...
- GitHub托管BootStrap资源汇总（持续更新中…）
Twitter BootStrap已经火过大江南北,对于无法依赖美工的程序员来说,这一成熟前卫的前端框架简直就一神器,轻轻松松地实现出专业的UI效果.GitHub上相关的的开源项目更是层出不穷,在此整 ...
- 30个惊人的插件来扩展 Twitter Bootstrap
Bootstrap Maxlength It is a lightweight plugin that allows detecting the HTML maxlength property of ...
- Frontend Development
原文链接: https://github.com/dypsilon/frontend-dev-bookmarks Frontend Development Looking for something ...
- GitHub托管BootStrap资源汇总
MESSENGER替换alert()消息和其他用户交互通知. JQUERY.TOCIFY.JS可以用Bootstrap或jQueryUI主题的Jquery表格组件. BOOTSTRAP-PROMPTS ...
- javascript 框架、根基技巧、布局、CSS、控件 JavaScript 类库
预筹备之 JavaScript 今朝支流的 JavaScript 框架排名中,jQuery 和 Ext 可算是佼佼者,得到了用户的普遍好评.海内的一些框架许多也是模仿 jQuery 对 JavaScr ...
- 推荐13款优秀的Twitter Bootstrap JavaScript插件
Bootstrap是基于HTML,CSS和JavaScript的简洁灵活的流行前端框架及交互组件集,由微博先驱Twitter在2011年8月开源的整套前端解决解决方案,拥有非常完备和详尽的开发文档,有 ...
- Bootstrap(转)
Bootstrap 随着互联网的不断成熟以及我们越来越多的用各种移动端的设备访问互联网,Web设计师和Web开发者的工作也变得越来越复杂. 十年前,一切都还简单得多.那个时候,大部分用户都是坐在桌子前 ...
- BootStrap 最佳资源合集(转)
witter BootStrap是一款优秀的前端的框架,称得上是前端的一个框架利器.Web前端开发者每天都在与HTML.CSS.JavaScript打交道,然 而不少人都是在周而复始的写模板.样式和交 ...
随机推荐
- Html中Table的简单使用
虽然Table布局已经过时,偶尔还是会用到,简要实用代码,如下: <table border="1" cellpadding="0" cellspacin ...
- WINDOWS SERVER 2008 RD服务器搭建
RD服务器详细名称为:RemoteDesktop Server 远程桌面服务器.但微软觉得这名字很怪诞,所以中文名用:终端服务器来代替这个叫法:TerminalServiceServer 在介绍搭建之 ...
- P1220 关路灯
#include <bits/stdc++.h> using namespace std; int d[100], w[100], s, n; int dp[100][100][3]; i ...
- WPF重写Image实现动态图片--未测试
WPF很强大,但是当WPF的image控件遇到gif时就只读了图片的第一帧,很好很强大! WPF不屑于gif的简单动画! 幸好WPF里有MediaElement这个东西,它是对MediaPlyer的一 ...
- 兼容iOS 10 资料整理笔记
原文链接:http://www.jianshu.com/p/0cc7aad638d9 1.Notification(通知) 自从Notification被引入之后,苹果就不断的更新优化,但这些更新优化 ...
- Yii2 关闭和打开csrf 验证 防止表单多次重复提交
原文地址:http://blog.csdn.net/terry_water/article/details/52221007 1.在Yii2配置中配置所有:所有的controller都将关闭csrf验 ...
- UNIX中的文件类型
Unix的文件类型信息包含在stat结构的st_mode成员中可以用宏确定文件类型: 普通文件(S_ISREG()):包含某种形式数据的常用文件类型 目录文件(S_ISDIR()):这种文件包含其他文 ...
- 初识The Battle of Polytopia
1.首先了解了一下<文明5-美丽新文明>视频介绍网址:http://list.youku.com/albumlist/show?id=19481409&ascending=1&am ...
- iOS duplicate symbol 变量 in 类名 报错
该错误信息是我在一个.h文件里申明了公共变量,然后在其他类里重复使用. Build Settings ->No Common Blocks默认为YES,编译器就报错了,需要修改Build Set ...
- TPS04-J. 使用线程池时确保ThreadLocal变量每次都初始化
线程池可以提供这种保障,一旦你的代码开始执行了,被分配来执行这个task的线程在执行完你的task之前不会做别的事情. 所以不用担心执行到一半被别的task改了 thread local 的变量. 由 ...