用javascript作一个通用向导说明


Posted in Javascript onAugust 30, 2011

1、界面设计
index.html:只提供了一个向导显示位置的占位符

<html> 
<head> 
<title>礼物推荐向导</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8"> 
<link rel="stylesheet" type="text/css" href="style.css"> 
<script src="jquery.js" type="text/javascript"></script> 
<script src="wizard.js" type="text/javascript"></script> 
</head> 
<body> 
<div id="wizard"></div> 
</body> 
</html>

style.css:默认情况下向导里有一个h2呈现的标题,一个ul呈现的主要内容,一个div呈现的按钮条,我们简单设计了一下他们的默认外观,实际应用中大家可以自由的美化它们。
body{ 
margin:0; 
} 
/*向导容器*/ 
#wizard{ 
height:400px; 
width:600px; 
background-color:#999; 
} 
/*向导的主体内容,用列表展示*/ 
#wizard ul{ 
margin:10px; 
height:80%; 
} 
/*横向显示列表内容*/ 
#wizard li{ 
display:inline-block; 
margin:10px; 
cursor:pointer; 
} 
/*列表的标题*/ 
#wizard h2{ 
margin:10px; 
} 
/*列表的功能条,如返回按钮*/ 
#wizard .bar{ 
margin:10px; 
clear:both; 
}

2、准备每一步骤

向导可以分为每一步骤,每个步骤需要呈现内容,捕捉用户选择,提供标题等功能,我们让每一步都自己负责自己的事情,但要符合我们规定的一些契约。

每一个步骤用一个函数表示,第一个参数data_key是选择本步骤数据的关键字,一般用于上一个步骤的结果决定下一个步骤显示数据的情况,第二个参数result_callback是个回调函数,就是在本步骤获取结果时调用,它用于和向导类进行通信,向导类在得到上一步的结果后存储结果并跳向到下一步。

该函数返回一个二元组,第一个元素是本步骤的标题,第二个元素是本步骤主体部分的UI。

我们的示例是一个礼物推荐系统,共分三步,第一步选择送礼对象,第二步选择关键字,其中第一步的选择结果会影响到第二步显示,第三步选择价格区间,如下就是代码的实现,其中绘制界面和事件捕捉用了jquery来简化操作。

function step1(data_key, result_callback){ 
var targets = ['女朋友','男朋友','父亲','妈妈','孩子']; 
var warpper = $('<ul></ul>') 
$.each(targets, function(k,v){ 
$('<li>'+v+'</li>').click(function(){result_callback(v)}).appendTo(warpper); 
}); 
return ['第一步:请选择送礼物的对象',warpper]; 
} 
function step2(data_key, result_callback){ 
var tags = { 
'女朋友':['创意','可爱','浪漫','激情','实用','数码', 
'自制','毛绒玩具','衣服','包包'], 
'男朋友':['男士用品','温馨','实用','数码','创意','衣物'], 
'父亲' :['男士用品','健康','植物','衣物'], 
'妈妈' :['温馨','健康','创意','护肤品','实用'], 
'孩子' :['玩具','学习用品','实用','数码'] 
}; 
var warpper = $('<ul></ul>') 
$.each(tags[data_key], function(k,v){ 
$('<li>'+v+'</li>').click(function(){result_callback(v)}).appendTo(warpper); 
}); 
return ['第二步:请选择关键词',warpper]; 
} 
function step3(data_key, result_callback){ 
var price_level = ['便宜','普通','稍贵','贵重']; 
var warpper = $('<ul></ul>') 
$.each(price_level, function(k,v){ 
$('<li>'+v+'</li>').click(function(){result_callback(v)}).appendTo(warpper); 
}); 
return ['第三步:请选择价格区间',warpper]; 
}

3、向导类的实现

向导类要设置向导所在的DOM元素,要执行的步骤列表,向导完成后执行的回调,向导还应该提供上一步和下一步的方法,所以我们用一个类来表示向导,在构造函数里传入DOM容器,步骤列表和回调函数,用prototype给类增加三个方法。render用来呈现某一步骤的UI,并在本步骤收集结果的回调里推向下一步,如果本步骤是最后一步,则调用向导执行完成的回调函数。

另外两个next和back函数分别是执行上一个步骤和下一个步骤,这两个函数实用index的私有变量来维持整个向导的状态

function Wizard(container, steps, callback){ 
this.container = container; //向导容器 
this.steps = steps; //向导步骤 
this.callback = callback; //向导执行完毕执行的回调 
this.collect_data = []; //保存向导每一步骤的结果 
this.index = -1; //当前执行在那一步骤 
} 
//绘制某一步骤 
Wizard.prototype.render = function(step, this_result){ 
var me = this; 
//执行该步骤并得到该步骤的UI 
var to_append = step(this_result,function(result){ 
me.collect_data.push(result); //收集本步骤结果 
//向导执行完毕时调用回调函数,否则执行下一步 
if(me.collect_data.length == me.steps.length) 
me.callback(me.collect_data); 
else 
me.next(result); 
}); 
//绘制本步骤的UI 
this.container.empty(); 
this.container.append("<h2>"+to_append[0]+"</h2>"); 
this.container.append(to_append[1]); 
if(this.index > 0){ 
//后退按钮 
this.container.append($("<div class='bar'><a href='javascript:;'>后退</a></div>") 
.click(function(){me.back()} 
)); 
} 
} 
//执行下一步 
Wizard.prototype.next = function(this_result){ 
if(this.index >= this.steps.length -1) 
return; 
var step = this.steps[++this.index]; 
this.render(step,this_result); 
} 
//后退到上一步 
Wizard.prototype.back = function(){ 
if(this.index <= 0) 
return; 
var step = this.steps[--this.index]; 
//步骤回到上一步,但上一步的数据需要上上一步的结果来决定 
this.collect_data = this.collect_data.slice(0, this.index); 
this.render(step, this.collect_data[this.index - 1]); 
}

4、小结

本向导结构简单,可定制性强,结合了javascript的函数式编程特性和面向对象的特性,体现了javascript的强大和便利。

其中wizard类里界面绘制的部分和步骤函数里界面绘制的部分还是存在一些耦合,继续重构的话,可以把所有绘制界面的部分再抽象到一起,使界面改动更方便。

Javascript 相关文章推荐
prototype与jquery下Ajax实现的差别
Sep 13 Javascript
Javascript的并行运算实现代码
Nov 19 Javascript
循环 vs 递归浅谈
Feb 28 Javascript
javascript操作css属性
Dec 30 Javascript
javascript如何判断输入的url是否正确
Apr 11 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
Jun 24 Javascript
JS实现的手机端精简幻灯片效果
Sep 05 Javascript
vue中axios处理http发送请求的示例(Post和get)
Oct 13 Javascript
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
Sep 28 Javascript
Vue实现简单的跑马灯
May 25 Javascript
JS 无限级 Select效果实现代码(json格式)
Aug 30 #Javascript
javascript 原型继承介绍
Aug 30 #Javascript
dojo学习第二天 ajax异步请求之绑定列表
Aug 29 #Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
Aug 29 #Javascript
新浪微博字数统计 textarea字数统计实现代码
Aug 28 #Javascript
Javascript面向对象编程(三) 非构造函数的继承
Aug 28 #Javascript
Javascript面向对象编程(二) 构造函数的继承
Aug 28 #Javascript
You might like
PHP 增加了对 .ZIP 文件的读取功能
2006/10/09 PHP
php实现当前页面点击下载文件的实例代码
2016/11/16 PHP
使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例
2017/09/15 PHP
javascript实现的鼠标链接提示效果生成器代码
2007/06/28 Javascript
jQuery EasyUI API 中文文档 - EasyLoader 加载器
2011/09/29 Javascript
关于使用 jBox 对话框的提交不能弹出问题解决方法
2012/11/07 Javascript
基于JavaScript如何制作遮罩层对话框
2016/01/26 Javascript
JavaScript String 对象常用方法总结
2016/04/28 Javascript
vue分页组件table-pagebar使用实例解析
2020/11/15 Javascript
微信小程序点击控件修改样式实例详解
2017/07/07 Javascript
JS自定义函数实现时间戳转换成date的方法示例
2017/08/27 Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
2018/03/16 Javascript
Javascript实现动态时钟效果
2018/11/17 Javascript
JQuery Ajax执行跨域请求数据的解决方案
2018/12/10 jQuery
解决vue单页面修改样式无法覆盖问题
2019/08/05 Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
2020/07/18 Javascript
JS绘图Flot如何实现可选显示曲线图功能
2020/10/16 Javascript
python调用自定义函数的实例操作
2019/06/26 Python
简单了解Python3里的一些新特性
2019/07/13 Python
Django中使用session保持用户登陆连接的例子
2019/08/06 Python
python word转pdf代码实例
2019/08/16 Python
python中JWT用户认证的实现
2020/05/18 Python
Keras 利用sklearn的ROC-AUC建立评价函数详解
2020/06/15 Python
PyTorch实现重写/改写Dataset并载入Dataloader
2020/07/14 Python
Python通过Schema实现数据验证方式
2020/11/12 Python
微信浏览器左上角返回按钮拦截功能
2017/11/21 HTML / CSS
Nice Kicks网上商店:ShopNiceKicks.com
2018/12/25 全球购物
教师演讲稿范文
2014/01/08 职场文书
活动邀请函范文
2014/01/19 职场文书
中医学专业自荐信范文
2014/04/01 职场文书
经济类毕业生求职信
2014/06/26 职场文书
代办社保委托书范文
2014/10/06 职场文书
员工离职证明范本
2015/06/12 职场文书
《桂花雨》教学反思
2016/02/19 职场文书
导游词之黄果树瀑布
2019/09/20 职场文书
MySQL 存储过程的优缺点分析
2021/05/20 MySQL