我在我的项目中使用:
http://www.jquery-steps.com/Examples#async.这是一个很好的Jquery插件,用于添加向导.
我的问题是关于动态步骤.下一步的内容应取决于上一步的答案.如何通过AJAX调用向我的后端发送其他数据.我的后端将根据该值为下一步服务.
解决方法
目前有两种方法可以实现它.一个用更多,另一个用更少的努力.但是更少的努力意味着更少的控制 – 换句话说,jQuery Steps处理显示和隐藏加载消息和异步调用本身当然.无论如何,第一个解决方案(减少工作量)要求您在初始化时添加默认的异步步骤,就像您习惯的那样.
<div id="wizard"> <h1>Choose</h1> <div> <select id="choose"> <option value="0" selected="selected">default</option> <option value="1">extraordinary</option> </select> </div> <h1>Result 1</h1> <div data-mode="async" data-url="/rest/service/0"></div> </div>
然后将一小部分代码添加到onStepChanging事件中,如melc提到的那样.此代码应分析上一步的数据,并在必要时删除默认的异步步骤,并在同一位置添加新的但具有不同的URL.
<script> $(function() { var wizard = $("#wizard").steps({ onStepChanging: function(event,currentIndex,newIndex) { if (currentIndex === 0) { if ($("#choose > option:selected").val() === "1") { wizard.steps("remove",1); // In this case you could also use add instead of insert wizard.steps("insert",1,{ title: "Result 2",contentMode: "async",contentUrl: "/rest/service/1" }); } } return true; } }); }); </script>
另一种解决方案已由melc描述.