I have the standard tabs setup using Bootstrap 3. Each tab is a form into which the user inputs information. Now there is a save button at the bottom of each form which will save the information in the current tab, but what I'm looking to do is enable the user to click a different tab at the top of the page, and be given a warning of
我使用Bootstrap 3设置标准选项卡。每个选项卡都是用户输入信息的表单。现在每个表单底部都有一个保存按钮,用于保存当前标签中的信息,但我要做的是让用户点击页面顶部的其他标签,然后给出一个警告
var areYouSure = confirm('If you sure you wish to leave this tab? Any data entered will NOT be saved. To save information, use the Save buttons.');
with an OK or Cancel button. If they click OK then they go to the tab they clicked, and if they hit cancel, they stay on the current tab. Anybody any idea how I can do this? I've been trying to get this all day, but with no luck. Should I even be using Bootstrap tabs or would it be easier to build my own tabs functionality instead of over-riding bootstrap's tabs?
使用“确定”或“取消”按钮。如果他们单击“确定”,则会转到他们单击的选项卡,如果他们点击取消,则会保留在当前选项卡上。有人知道我怎么能这样做吗?我一整天都试图这样做,但没有运气。我是否应该使用Bootstrap选项卡,还是更容易构建我自己的选项卡功能而不是覆盖bootstrap的选项卡?
2 个解决方案
#1
1
Per the Bootstrap 3 docs, you can set up something like this. In your tab button listener, show a confirm box, then add logic to handle that response:
根据Bootstrap 3文档,您可以设置类似这样的内容。在选项卡按钮侦听器中,显示确认框,然后添加逻辑以处理该响应:
$('#myTabs a').click(function (e) {
e.preventDefault()
var areYouSure = confirm('If you sure you wish to leave this tab? Any data entered will NOT be saved. To save information, use the Save buttons.');
if (areYouSure === true) {
$(this).tab('show')
} else {
// do other stuff
return false;
}
})
#2
1
You could add a class to your tabs and then use an on click function where you'd fire a modal or bootbox confirm asking the user if they want to continue to the new tab. If they select no, you prevent the new tab from loading, if they select yes, you continue.
您可以在选项卡中添加一个类,然后使用on click功能,您可以在其中触发模式或启动框确认询问用户是否要继续使用新选项卡。如果他们选择否,则阻止加载新选项卡,如果他们选择是,则继续。
#1
1
Per the Bootstrap 3 docs, you can set up something like this. In your tab button listener, show a confirm box, then add logic to handle that response:
根据Bootstrap 3文档,您可以设置类似这样的内容。在选项卡按钮侦听器中,显示确认框,然后添加逻辑以处理该响应:
$('#myTabs a').click(function (e) {
e.preventDefault()
var areYouSure = confirm('If you sure you wish to leave this tab? Any data entered will NOT be saved. To save information, use the Save buttons.');
if (areYouSure === true) {
$(this).tab('show')
} else {
// do other stuff
return false;
}
})
#2
1
You could add a class to your tabs and then use an on click function where you'd fire a modal or bootbox confirm asking the user if they want to continue to the new tab. If they select no, you prevent the new tab from loading, if they select yes, you continue.
您可以在选项卡中添加一个类,然后使用on click功能,您可以在其中触发模式或启动框确认询问用户是否要继续使用新选项卡。如果他们选择否,则阻止加载新选项卡,如果他们选择是,则继续。