无为清净楼资源网 Design By www.qnjia.com
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="/UploadFiles/2021-04-02/jquery.js"><script src="wizard.js"></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类里界面绘制的部分和步骤函数里界面绘制的部分还是存在一些耦合，继续重构的话，可以把所有绘制界面的部分再抽象到一起，使界面改动更方便。
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="/UploadFiles/2021-04-02/jquery.js"><script src="wizard.js"></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类里界面绘制的部分和步骤函数里界面绘制的部分还是存在一些耦合，继续重构的话，可以把所有绘制界面的部分再抽象到一起，使界面改动更方便。
标签：
通用向导
无为清净楼资源网 Design By www.qnjia.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com
暂无评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。
更新日志
2024年09月29日
2024年09月29日
- 纪钧瀚《钢琴阅读时光 雨中书店聆听轻音乐》[FLAC/分轨][399.62MB]
- 证声音乐图书馆《走向自然 疗心爵士乐》[320K/MP3][87.4MB]
- 证声音乐图书馆《走向自然 疗心爵士乐》[FLAC/分轨][184.94MB]
- 陈慧娴.2018-Priscilla-Ism演唱会3CD（2024环球红馆40复刻系列）【环球】【WAV+CUE】
- 郑秀文.1999-我应该得到（国）【华纳】【WAV+CUE】
- 陈家慧.2011-钢琴酒吧2CD【龙吟唱片】【WAV+CUE】
- 证声音乐图书馆《雨季 蓝调吉他 Rainy Blues》[320K/MP3][45.01MB]
- 证声音乐图书馆《雨季 蓝调吉他 Rainy Blues》[FLAC/分轨][109.13MB]
- 赞多《序章》[320K/MP3][45.54MB]
- 许巍.2004-每一刻都是崭新的【步升大风】【WAV+CUE】
- 群星.2024-四方馆影视原声带【韶愔音乐】【FLAC分轨】
- 陈雷.1997-安锁咧【金圆唱片】【WAV+CUE】
- 关淑怡.2013-MY.FAVORITE.SK.3CD【环球】【WAV+CUE】
- Sweety.2006-花言乔语【丰华】【WAV+CUE】
- 李恕权.2003-回·20年全精选2CD【SONY】【WAV+CUE】