用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 相关文章推荐
在JavaScript中使用inline函数的问题
Mar 08 Javascript
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
May 15 Javascript
各情景下元素宽高的获取实现代码
Sep 13 Javascript
Node.js实现的简易网页抓取功能示例
Dec 05 Javascript
jquery中object对象循环遍历的方法
Dec 18 Javascript
动态设置form表单的action属性的值的简单方法
May 25 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
Jan 23 Javascript
深入探究AngularJs之$scope对象(作用域)
Jul 20 Javascript
详解基于node的前端项目编译时内存溢出问题
Aug 01 Javascript
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
vue父组件触发事件改变子组件的值的方法实例详解
May 07 Javascript
js实现图片实时时钟
Jan 15 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中$美元符号与Zen Coding冲突问题解决方法分享
2014/05/28 PHP
php将access数据库转换到mysql数据库的方法
2014/12/24 PHP
php根据指定位置和长度获得子字符串的方法
2015/03/17 PHP
php使用file函数、fseek函数读取大文件效率对比分析
2016/11/04 PHP
浅谈PHP错误类型及屏蔽方法
2017/05/27 PHP
srcElement表格样式
2006/09/03 Javascript
来自chinaz的ajax获取评论代码
2008/05/03 Javascript
使用jQuery简化Ajax开发 Ajax开发入门
2009/10/14 Javascript
jquery实现弹出层完美居中效果
2014/03/03 Javascript
用js编写的简单的计算器代码程序
2015/08/04 Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
2016/01/25 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
2016/06/17 Javascript
深入理解选择框脚本[推荐]
2016/12/13 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
2017/03/10 Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
2017/03/27 Javascript
Angular.js中控制器之间的传值详解
2017/04/24 Javascript
Vue组件选项props实例详解
2017/08/18 Javascript
如何理解Vue的render函数的具体用法
2017/08/30 Javascript
JS基于贪心算法解决背包问题示例
2017/11/27 Javascript
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
2018/03/15 Javascript
js合并两个数组生成合并后的key:value数组
2018/05/09 Javascript
详解vue axios用post提交的数据格式
2018/08/07 Javascript
详解微信小程序-canvas绘制文字实现自动换行
2019/04/26 Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
2019/06/24 Javascript
[15:57]教你分分钟做大人:斧王
2014/10/30 DOTA
django js实现部分页面刷新的示例代码
2018/05/28 Python
Tensorflow模型实现预测或识别单张图片
2019/07/19 Python
Win系统PyQt5安装和使用教程
2019/12/25 Python
浅谈keras 的抽象后端(from keras import backend as K)
2020/06/16 Python
HTML5实现获取地理位置信息并定位功能
2015/04/25 HTML / CSS
Wolford法国官网:奥地利奢侈内衣品牌
2020/08/11 全球购物
高中毕业生个人自我鉴定
2013/11/24 职场文书
公司出纳岗位职责
2013/12/07 职场文书
庆七一宣传标语
2014/10/08 职场文书
2014年禁毒工作总结
2014/11/24 职场文书
python 中[0]*2与0*2的区别说明
2021/05/10 Python