使用向导html源码,window_用javascript作一个通用向导说明，1、界面设计 index.html:只提供了 - phpStudy...

最新推荐文章于 2022-11-25 09:11:33 发布

百越闲人

最新推荐文章于 2022-11-25 09:11:33 发布

阅读量208

点赞数

文章标签：使用向导html源码

用javascript作一个通用向导说明

1、界面设计

index.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 = $('

$.each(targets, function(k,v){

$('

'+v+'').click(function(){result_callback(v)}).appendTo(warpper);

});

return ['第一步:请选择送礼物的对象',warpper];

}

function step2(data_key, result_callback){

var tags = {

'女朋友':['创意','可爱','浪漫','激情','实用','数码',

'自制','毛绒玩具','衣服','包包'],

'男朋友':['男士用品','温馨','实用','数码','创意','衣物'],

'父亲' :['男士用品','健康','植物','衣物'],

'妈妈' :['温馨','健康','创意','护肤品','实用'],

'孩子' :['玩具','学习用品','实用','数码']

};

var warpper = $('

$.each(tags[data_key], function(k,v){

$('

'+v+'').click(function(){result_callback(v)}).appendTo(warpper);

});

return ['第二步:请选择关键词',warpper];

}

function step3(data_key, result_callback){

var price_level = ['便宜','普通','稍贵','贵重'];

var warpper = $('

$.each(price_level, function(k,v){

$('

'+v+'').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;