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打交道,然 而不少人都是在周而复始的写模板.样式和交 ...
随机推荐
- swift-UserDefaults控制账号和密码
import UIKit class FiveVC: UIViewController { //MARK:-------- 全局 常量 设置 let IsFirstLaunch = "IsF ...
- Activiti-explorer 在tomcat中部署报HTTP Status 404问题
如果tomcat版本没错,请检查一下文件,将Activiti中war文件夹中的内容复制到webapp下,而不是将文件夹整个放进去……
- NGINX 配置 SSL 双向认证
对于 NGINX 的 HTTPS 配置,通常情况下我们只需要实现服务端认证就行,因为浏览器内置了一些受信任的证书颁发机构(CA),服务器端只需要拿到这些机构颁发的证书并配置好,浏览器会自己校验证书的可 ...
- oracle中merge方法
先看SQL语句:merge into employee e using emps em on (e.emp_id=em.emp_id) when matched then update set e. ...
- JMeter学习-024-JMeter 命令行（非GUI）模式详解（二）-执行代理设置
闲话少述,接 上文 继续... 5.设置代理 jmeter -n -t JMeter分布式测试示例.jmx -H 20.9.215.90 -P 9999 -l report\01-result.csv ...
- 如何在Eclipse中查看JDK以及JAVA框架的源码（转载）
原文链接:http://www.cnblogs.com/outlooking/p/5243415.html 设置步骤如下: 1.点 “window”-> "Preferences&qu ...
- Application_Error VS OnException 遇到的坑
在工作中遇到一个巨坑,就是关于Application_Error和OnException, 本身我的应用程序设置了全局异常OnException处理,手动抛出异常,OnExcep ...
- Python开发【前端】:汇总
页面模板 1.EasyUI(推荐指数★) JQuery EasyUI中文网 下载 使用方法:把文件下载到本地.直接从官网上把源码拷贝过来,更改下js的路径即可 优点:功能非常多.非常齐全 偏做后台管理 ...
- Programming pearls 编程珠玑的题目
Programming pearls 编程珠玑的题目 这段时间有空都在看编程珠玑,很经典的一本书,一边看一边用 python 做上面的题目,我做的都放到 github 上了 https://githu ...
- mysql入门
mysql:关系型数据库的一种,用来存储数据: 一个仓库------一个数据库: 一个箱子------ 表: 进入mysql命令行:mysql -uroot -p(密码):查看数据库中所有表:show ...