ajaxToolkit：TabContainer添加標籤時確認

我希望我的ajaxToolkit：TabContainer有一個允許用戶添加另一個選項卡的Tabpanel。我只希望它在點擊「+」標籤頁時發回而沒有其他。我似乎無法阻止事件中的Javascript冒泡：ajaxToolkit：TabContainer添加標籤時確認

<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); 
    }

謝謝，亞歷克斯

來源

2013-04-17 Alex Driver

您可以使用return false;在JavaScript停止回發。所以，我認爲你需要的是這樣的：

function checkTab(sender, e) 
{ 
    if (sender.get_activeTab().get_headerText().replace("<span>", "").replace("</span>", "") != "+") 
    { 
     return false; 
    } 
    else 
    { 
     return confirm('Are you sure?'); 
    } 
}

來源

2013-04-17 13:25:15 jadarnel27

沒有好，但仍經過回發，因爲它不會讓我做：OnClientActiveTabChanged =「返回checkTab」 –

@AlexDriver我沒有在AJAX Control Toolkit控件中工作過，但是你嘗試了'OnClientActiveTabChanged =「return checkTab（this）;」'或者只是'OnClientActiveTabChanged =「return checkTab（）; 「'？ – jadarnel27

SyntaxError：語法錯誤 ... pPlacement「：false}，{」activeTabChanged「：return checkTab（this）;}，null –

添加下面的腳本到您的項目，並在最底部頁面上的添加引用：

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); 
};

現在我們添加功能取消點擊特定標籤上在客戶端。使用的樣品：

<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>

來源

2013-04-17 15:40:34

由於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); 
    }

來源

2013-04-18 10:06:14

ajaxToolkit：TabContainer添加標籤時確認

回答

相關問題