介绍jWiard基于JQuery的强大向导控件

我不会发布我现在正在做的项目的代码，但我只是把作者的例子移到这里，因为变化不大，所以我们可以通过做一些修改来满足自己的需求。作者官网只有英文。如果英语好，可以看原文，免得我出错。不知道童鞋平时发育有没有用巫师发育。有人问什么是引导发展？其实很简单，就是让用户完成一个步骤，然后点击下一步，完成一个步骤之后再点击下一步，这样按照我师傅的意见，用户体验可以提升的很好。好了，别废话了。让我们从最简单的例子开始：例子1: 1.1。当然，既然是JQuery，就要参考JQuery库。在上面，你可以下载到相关的类库。JQuery类和样式的复制代码如下：- jquery ui主题- link rel='样式表' href='/path/to/jquery-ui.css' /！-必需的CSS基础- link rel='样式表' href='/path/to/JWizard . base . CSS '/！-duh-script type=' text/JavaScript ' src=' http :/path/to/jquery . js '/script！-至少小部件工厂-脚本类型=' text/JavaScript ' src=' http :/path/to/jquery-ui . js '/脚本！-还有插件本身-脚本类型=' text/JavaScript ' src=' http :/path/to/jweizard . min . js '/script 1.2，然后开始写HTML代码，也很简单。HTML代码的代码如下： form id=' wizard-form ' class=' jwizard ' field set图例开头/图例删除您确定要开始吗？按“下一步”继续？/p/field set field set legendMiddle/legend ParE您确定要这样做吗？/p pYou仍然可以返回。或者再次按“下一步”确认。/p/field set field set legend/legend pDone，单击“完成”结束/p /fieldset /form！-也可以只是带有标题属性的div-div id=' wizard-div ' class=' jWizard ' div title=' begining '您确定要开始吗？按“下一步”继续？/p /div div title='Middle '您确定要这样做吗？/p pyou仍然可以返回。或者再次按“下一步”确认。/p/div div title=' end' p完成后，单击' finish '结束/p/div/div您可以在上面的HTML代码中添加相关的div，但是不要忘记将title值分配给最外面的一个。1.3 js开始调用。JS Call代码的代码如下： $('。j wizars’)。jwizards ({menu enable: true，counter : {enable: true，进度条3360 true}，effects 3360 { enable : true } })；好了，到目前为止，以上基本步骤都实现了，效果如下：。

示例2:将事件添加到下一个。在我现在做的第一个版本中，在开始时，有上传文件、验证文件等操作。在其他情况下，我直接在页面上放一个按钮，然后触发它的javascript代码。这可以满足基本功能的需求，但也严重损害了用户的体验。因为现在的用户很懒，能少做一点，永远不会多做。因此，如果你放了一个按钮，用户不想点击，然后点击下一步，你将得不到你需要的用户，你将报告一个错误。因此，我们可以将一些操作集成到Next中，这将使它变得简单方便，页面也会变得干净大方。代码的其余部分可以基本保持不变。现在我主要讲讲js中的事件机制。代码如下：复制代码为： var $ w=$(' # events-test ')；$ w . validate({ error class : ' ui-state-error-text ' })；$ w . jweizard({ buttons : { Canceltype : ' reset '，//单击“取消”按钮时触发的操作，例如，当我在一个项目中时，我跳转到第一页并重新开始。完成类型：“提交”//当您在最后一步中单击“完成”时，开始的操作是提交。}，//点击“取消”按钮时触发的动作，比如在项目中，跳转到第一页，重新开始。cancel:函数(事件，ui){ $ w . jwizard(' FirstStep ')；}，//单击previous时触发的操作。比如在我的项目中，因为当所有的邮件都发出后，用户无法转到上一页，所以我想禁用上一页的功能。很简单，如下；previous:函数(事件，ui){//if(ui . currentstepindex==7){ return false；}可以。7指的是你的div的顺序号，从0开始，所以你可以数一下。}，next:函数(event，ui){//这里也是一样，就是控制下一页的情况和上面一样。例如，在我的项目中，有一个上传数据的人。如果没有人，就不能上传。

这种情况你可以先设定一个弯曲件值，然后，if(fileUploadComplete){ $ .get('@Url .操作('验证模式','主页'),//这里学习手动音量调节的童鞋们应该很熟悉其实也就是在行动家园下面的方法验证模式函数（数据){ //获取成功后返回的数据var newData=eval(数据);//因为用的数据所以用评价评价进行转换schemaVerification=newData .haseErrorsif(新数据.HasErrors){ var list 1=文档。getelementbyid(' list 1 ')；清单1。innerhtml=' font color=' red ' size=' 20px '恭喜，请继续/font '；} else { document。getelementbyid('错误通知').内部HTML='抱歉。您的模式错误，请检查它。var列表1=文档。getelementbyid(' list 1 ')；listing1.innerHTML=newData .结果；} }，' JSON ')；} else { //这里主要是当没有选择数据的时候进行提示提醒('请先上传需要的超过文件');返回false} break}，finish:函数（事件，ui) { alert('谢谢!');} }) /**下面的绑定是事件处理程序，它们都将在继续回调之前执行*//* * ui={ type : ' previous | next | first | last | manual '，currentStepIndex: [int]，next step index :[int]}；*///此事件处理程序专门用于表单验证绑定(' jwizardchangestep '，函数(事件，ui) { //'手动'总是由用户触发，从不触发jWizard本身if (ui.type！==' manual '){ var $ current step=$ w . find ' .jw-step : eq(' ui。currentstepindex ')，$ inputs=$ currentstep。find('输入：文本')；/**我假设您在这个回调*/if ($inputs.length 0！$输入。valid()){ $ CurrentStep。查找('标签。错误').效果('高亮');返回false} } }) //此事件处理程序用于处理向导中的自定义导航绑定(' jwizardchangestep '，函数(事件，ui) { //'手动'总是由用户触发，从不触发jWizard本身if (ui.type！=='手动'){ //这里其实是比较重要的，因为这里就是选择对应差异的实现方式的，你只需要把相应模块的爪哇岛描述语言代码集成到这里就可以了。

switch (ui.currentStepIndex) { //第一步，用户必须同意条款和条件案例0: if($(' # agreement ').is(' :未选中(:已选中)'){//利用这个效果给用户反馈$(' #同意').父项()。效果("脉动");返回false} break//在第三步中，(零索引)正在填充的用户名意味着我们将跳过信息步骤案例2: if($(“# username”).val()！='') { //通过在事件对象上设置这个值，我告诉jWizard重写下一步索引事件。下一步指数=4；//必须至少调用事件。prevent default()；为了这个工作还假；} break} } //通过使用下一步索引，我们可以在用户*即将*启动某个特定步骤开关(ui.nextStepIndex)时拦截他们{ //在这种情况下，我正在显示向导最后一步的摘要案例4: var oFormValues={ name : $(' # name ').val()，email: $('#email ').val()，username: $('#username ').val()，打开id : undefined }；$(“# summary-name”).儿童(' td ').文本(oformvalues。姓名)；$(' #摘要-电子邮件').儿童(' td ').文本(ofrmvalues。电子邮件)；if(of mvalues。用户名！='') { $('#summary-username ').显示()。儿童(' td ').文本(oformvalues。用户名)；$('#summary-openid ').隐藏()。儿童(' td ').文本("");} else { var $ OpenID=$ w . find('输入： radio : checked[name=OpenID]')；oformvalues。OpenID=($ OpenID。长度===1)？$ OpenID。val(): $(' # OpenID-other ').val()；$('#summary-username ').隐藏()。儿童(' td ').文本("");$('#summary-openid ').显示()。儿童(' td ').文本(oformvalues。OpenID)；} break } })；//如果用户单击步骤3中的信息链接，(零索引)将导致向导跳转到信息步骤$('#openid ').click(function(){ $ w . j wizard(' ChangeStep '，3)；返回false })；//如果选中了信息单选按钮，请清空“其他”文本框$ w . find('输入： radio[name=OpenID]).change(function(event){ $(' # OpenID-other ')).val(" ")；});//如果使用了“其他”OpenID文本框，则清空单选按钮$("# OpenID-other ").change(function(event){ if(this。价值！=' '){ $ w . find('输入： radio[name=open id]').removeAttr(“”选中');} });总和，我的搜狗怎么突然就没有用了。算了以上就是我的一点点经验，就不说了，吃饭时间到了，如果有需要的童鞋在做开发的时候，如果遇到问题，可以进行共同讨论，呵呵共同进步嘛。具体效果在这里。