用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 相关文章推荐
科讯商业版中用到的ajax空间与分页函数
Sep 02 Javascript
js ondocumentready onmouseover onclick onmouseout 样式
Jul 22 Javascript
jQuery循环滚动新闻列表示例代码
Jun 17 Javascript
简介JavaScript中Math.LOG10E属性的使用
Jun 14 Javascript
javascript创建对象、对象继承的实用方式详解
Mar 08 Javascript
用js将long型数据转换成date型或datetime型的实例
Jul 03 Javascript
详解angularjs获取元素以及angular.element()用法
Jul 25 Javascript
vue实现a标签点击高亮方法
Mar 17 Javascript
Vue实现自定义下拉菜单功能
Jul 16 Javascript
vue生成token并保存到本地存储中
Jul 17 Javascript
layui 解决富文本框form表单提交为空的问题
Oct 26 Javascript
JavaScript实现与web通信的方法详解
Aug 07 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
sphinx增量索引的一个问题
2011/06/14 PHP
php通过记录IP来防止表单重复提交方法分析
2014/12/16 PHP
php安装dblib扩展,连接mssql的具体步骤
2017/03/02 PHP
jquery 可排列的表实现代码
2009/11/13 Javascript
jQuery实现点击该行即可删除HTML表格行
2014/10/17 Javascript
jQuery实现折线图的方法
2015/02/28 Javascript
js实现类似于add(1)(2)(3)调用方式的方法
2015/03/04 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
2015/09/10 Javascript
jquery淡入淡出效果简单实例
2016/01/14 Javascript
node.js实现快速截图
2016/08/27 Javascript
jQuery实现的导航下拉菜单效果示例
2016/09/05 Javascript
vue多级多选菜单组件开发
2020/09/08 Javascript
Angularjs中使用layDate日期控件示例
2017/01/11 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
2017/01/23 Javascript
Vue组件化开发思考
2018/02/02 Javascript
全站最详细的Vuex教程
2018/04/13 Javascript
原生JS实现的雪花飘落动画效果
2018/05/03 Javascript
详解如何在vue-cli中使用vuex
2018/08/07 Javascript
Vue2.0生命周期的理解
2018/08/20 Javascript
js异步上传多张图片插件的使用方法
2018/10/22 Javascript
JS数组及对象遍历方法代码汇总
2020/06/16 Javascript
[31:33]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第一场
2014/05/23 DOTA
[02:26]2018DOTA2亚洲邀请赛赛前采访-Newbee篇
2018/04/03 DOTA
Android 兼容性问题:java.lang.UnsupportedOperationException解决办法
2017/03/19 Python
Ubuntu下使用python读取doc和docx文档的内容方法
2018/05/08 Python
python的concat等多种用法详解
2018/11/28 Python
python实现AES加密与解密
2019/03/28 Python
使用Flask-Cache缓存实现给Flask提速的方法详解
2019/06/11 Python
简单瞅瞅Python vars()内置函数的实现
2019/09/27 Python
tensorflow之tf.record实现存浮点数数组
2020/02/17 Python
浅谈Python __init__.py的作用
2020/10/28 Python
HTML5 video 事件应用示例
2014/09/11 HTML / CSS
营销与策划个人求职信
2013/09/22 职场文书
先进集体事迹材料
2014/02/17 职场文书
2014乡镇干部对照检查材料思想汇报
2014/09/26 职场文书
学生抄袭作业的检讨书
2014/10/02 职场文书