如何触发jquery.smart向导完成按钮？
如何触发jquery.smart向导完成按钮？
提问于 2013-09-26 09:18:02
我在jquery中非常新。以下是来自智能向导的jquery
/ Default Properties and Events
$.fn.smartWizard.defaults = {
selected: 0, // Selected Step, 0 = first step
keyNavigation: true, // Enable/Disable key navigation(left and right keys are used if enabled)
enableAllSteps: false,
transitionEffect: 'fade', // Effect on navigation, none/fade/slide/slideleft
contentURL:null, // content url, Enables Ajax content loading
contentCache:true, // cache step contents, if false content is fetched always from ajax url
cycleSteps: false, // cycle step navigation
enableFinishButton: false, // make finish button enabled always
hideButtonsOnDisabled: false, // when the previous/next/finish buttons are disabled, hide them instead?
errorSteps:[], // Array Steps with errors
labelNext:'Next',
labelPrevious:'Previous',
labelFinish:'Finish',
noForwardJumping: false,
ajaxType: "POST",
onLeaveStep: null, // triggers when leaving a step
onShowStep: null, // triggers when showing a step
onFinish: null, // triggers when Finish button is clicked
includeFinishButton : true // Add the finish button
};
})(jQuery);
<script type="text/javascript">
$(document).ready(function() {
// Smart Wizard
$('#wizard').smartWizard({
onLeaveStep: leaveAStepCallback,
onFinish: onFinishCallback
});
function leaveAStepCallback(obj, context) {
debugger;
alert("Leaving step " + context.fromStep + " to go to step " + context.toStep);
return validateSteps(context.fromStep); // return false to stay on step and true to continue navigation
}
function onFinishCallback(objs, context) {
debugger;
if (validateAllSteps()) {
$('form').submit();
}
}
// Your Step validation logic
function validateSteps(stepnumber) {
debugger;
var isStepValid = true;
// validate step 1
if (stepnumber == 1) {
// Your step validation logic
// set isStepValid = false if has errors
}
// ...
}
function validateAllSteps() {
debugger;
var isStepValid = true;
// all step validation logic
return isStepValid;
}
});
</script>我需要一些函数为onFinish，在那里，我可以发送许多参数的请求。怎么做？
回答 5
Stack Overflow用户
回答已采纳
发布于 2013-09-26 09:50:05
首先，从smartWizard.js下载https://github.com/mstratman/jQuery-Smart-Wizard，然后将其添加到工作区中，并在html/jsp中提供引用。
<script type="text/javascript" src="js/jquery.smartWizard-2.1.js"></script>然后,
<script type="text/javascript">
$(document).ready(function(){
// Smart Wizard
$('#wizard').smartWizard();
//$('#range').colResizable();
function onFinishCallback(){
$('#wizard').smartWizard('showMessage','Finish Clicked');
}
});
</script>然后，在jquery.martWizard-2.1.js中搜索onFinish，只需尝试发出警告，然后无论您想要添加什么，都可以将其直接添加到.js文件中。
Stack Overflow用户
发布于 2017-02-12 08:26:30
添加自定义函数如下所示。
onFinish: function () {
alert("Finish Clicked!")
}, // triggers when Finish button is clickedStack Overflow用户
发布于 2021-08-16 21:22:40
您可以监听工具栏额外按钮上的onclick事件。
// Toolbar extra buttons
var btnFinish = $("<button></button>")
.text("Finish")
.addClass("btn btn-primary")
.on("click", function () {
alert("Finish Clicked");
});
var btnCancel = $("<button></button>")
.text("Cancel")
.addClass("btn btn-secondary")
.on("click", function () {
$("#wizard").smartWizard("reset");
});
// Initiate wizard
$("#wizard").smartWizard({
selected: 0,
theme: "default",
autoAdjustHeight: true,
transition: {
animation: "slide-horizontal",
},
toolbarSettings: {
toolbarPosition: "bottom",
toolbarExtraButtons: [btnFinish, btnCancel],
},
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19024137
复制相关文章
相似问题
腾讯云开发者
