[英]ajaxToolkit:TabContainer confirm when adding tab
I want my ajaxToolkit:TabContainer to have a tabpanel that allows the user to add another tab. 我希望ajaxToolkit:TabContainer具有一个Tabpanel,允许用户添加另一个标签。 I only want it to postback when they have clicked the "+" tabpanel and no other. 我只希望当他们单击“ +”选项卡面板并且没有其他选项时回发。 I can't seem to stop the event bubbling in the Javascript: 我似乎无法停止JavaScript中的事件冒泡:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript">
function checkTab(sender, e) {
if (sender.get_activeTab().get_headerText().replace("<span>", "").replace("</span>", "") != "+") {
cancelBubble(e);
}
else {
if (!confirm('Are you sure?')) {
cancelBubble(e);
}
}
}
function cancelBubble(e) {
if (e) {
e.stopPropagation();
}
else {
window.event.cancelBubble = true;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager" runat="server">
</asp:ScriptManager>
<ajaxToolkit:TabContainer ID="MyTabContainer" runat="server" OnActiveTabChanged="MyTabContainer_OnActiveTabChanged"
AutoPostBack="true" OnClientActiveTabChanged="checkTab">
<ajaxToolkit:TabPanel ID="TabPanel1" runat="server" HeaderText="My First Tab" Enabled="true">
<ContentTemplate>
My first tab
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel ID="AddTabPanel" runat="server" HeaderText="+" Enabled="true">
<ContentTemplate>
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
</div>
</form>
</body>
</html>
protected void MyTabContainer_OnActiveTabChanged(object sender, EventArgs e)
{
TabPanel tp = new TabPanel();
tp.HeaderText = "New Tab";
MyTabContainer.Tabs.Add(tp);
}
Thanks, Alex 谢谢,亚历克斯
You can use return false;
您可以使用return false;
in JavaScript to stop a PostBack. 在JavaScript中停止回发。 So I think all you need is this: 所以我认为您需要的是:
function checkTab(sender, e)
{
if (sender.get_activeTab().get_headerText().replace("<span>", "").replace("</span>", "") != "+")
{
return false;
}
else
{
return confirm('Are you sure?');
}
}
Add script below to your project and add reference on at at very bottom of page: 在您的项目中添加以下脚本,并在页面底部添加引用:
Sys.Extended.UI.TabPanel.prototype.raiseClick = function (eventArgs) {
var eh = this.get_events().getHandler("click");
if (eh) {
eh(this, eventArgs);
}
};
Sys.Extended.UI.TabPanel.prototype._header_onclick = function (e) {
e.preventDefault();
var eventArgs = new Sys.CancelEventArgs();
this.raiseClick(eventArgs);
if (eventArgs.get_cancel() === true)
return;
this.get_owner().set_activeTab(this);
this._setFocus(this);
};
Now we add capability to cancel click on particular tab on client. 现在,我们增加了取消单击客户端上特定选项卡的功能。 The sample of usage: 用法示例:
<script type="text/javascript">
function AddTabOnClientClick(sender, args) {
args.set_cancel(!confirm("Are you sure?"));
}
</script>
<form id="form1" runat="server">
<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</ajaxToolkit:ToolkitScriptManager>
<div>
<asp:UpdatePanel runat="server">
<ContentTemplate>
<ajaxToolkit:TabContainer ID="MyTabContainer" runat="server" AutoPostBack="true"
ActiveTabIndex="0">
<ajaxToolkit:TabPanel ID="TabPanel1" runat="server" HeaderText="My First Tab" Enabled="true">
<ContentTemplate>
My first tab
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel ID="AddTabPanel" runat="server" HeaderText="+" OnClientClick="AddTabOnClientClick">
<ContentTemplate>
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
<script src="Scripts/MyAjaxToolkitExtensions.js" type="text/javascript"></script>
Thanks to jadarnel27, this is the final solution I went for: 感谢jadarnel27,这是我追求的最终解决方案:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript">
<script type="text/javascript">
function addTab() {
if (confirm('Are you sure?')) {
document.getElementById('<%=AddTabButton.ClientID %>').click();
}
}
</script>
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager" runat="server">
</asp:ScriptManager>
<asp:Button ID = "AddTabButton" runat="server" OnClick="AddTabButton_OnClick" CssClass="DisplayNone" />
<ajaxToolkit:TabContainer ID="MyTabContainer" runat="server">
<ajaxToolkit:TabPanel ID="TabPanel1" runat="server" HeaderText="My First Tab" Enabled="true">
<ContentTemplate>
My first tab
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel ID="AddTabPanel" runat="server" HeaderText="+" Enabled="true" OnClientClick="addTab">
<ContentTemplate>
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
</div>
</form>
</body>
</html>
protected void AddTabButton_OnClick(object sender, EventArgs e)
{
TabPanel tp = new TabPanel();
tp.HeaderText = "New Tab";
MyTabContainer.Tabs.Add(tp);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.