jQuery UI中嵌套的asp TreeView手风琴应该在扩展时触发事件

我在左侧有一个导航iFrame，并且我想在asp:TreeNode（ClientExpand）上触发$("#accordion").accordion("refresh");事件，因此嵌套的asp:TreeView的高度将决定高度JQuery UI Accordion的Accordion Tab的包围DIV。jQuery UI中嵌套的asp TreeView手风琴应该在扩展时触发事件

有没有办法对扩展的asp:TreeView与客户端javascript $("#accordion").accordion("refresh");作出反应？

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="NavigationTree.aspx.cs" Inherits="NavigationTree" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head runat="server"> 
     <title></title> 
     <script type="text/javascript" src="js/displayToc.js"></script> 
     <style type="text/css"> 
      .treeNode 
      { 
       color:#666; 
       font-family:Arial,Helvetica,sans-serif; 
       font-size: 13px; 
      } 
      .rootNode 
      { 
       color:#666; 
       font-family:Arial,Helvetica,sans-serif; 
       font-size: 13px; 
      } 
      .leafNode 
      { 
       color:#666; 
       font-family:Arial,Helvetica,sans-serif; 
       font-size: 13px; 
      } 
     </style>  

     <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
     <link rel="stylesheet" href="/resources/demos/style.css"> 
     <script type="text/javascript" src="../Scripts/jquery-1.11.2.min.js"></script> 
     <script type="text/javascript" src="../Scripts/jquery-ui.js"></script> 

     <script type="text/javascript"> 

      var zuletztSelektiert = ''; 

      $(function() { 

       var treeView1 = $('#<%= TreeView1.ClientID %>'); 
       var treeNodes = treeView1.find('div[id$=Nodes]'); 
       var treeImages = treeView1.find('img').not('img[alt=\'\']'); 

       $("#searchField").keydown(function (e) { 
        if (e.keyCode == 13) { 
         $("#btnSearch").click(); 
         e.preventDefault(); 
        } 
       }); 

       $("#btnSearch").click(function (event) { 

        var meineLinkTexte = ''; 
        var parentEls = ''; 

        treeNodes.css({ 'display': 'none' }); 
        treeImages.attr('src', 'images/plus.gif') 

        $("a").each(function() { 
         //Do your work 
         var selectedElement = $(this).attr('id'); 
         $("#" + selectedElement).css({ 'background-color': '#FFFFFF' }); 
         if ($(this).text().toLowerCase().indexOf($("#searchField").val().toLowerCase()) > -1) { 

          $("#" + selectedElement).parents("[id$='Nodes']").css({ 'display': 'block' }); 
          $("#" + selectedElement).css({ 'background-color': '#DEDEDE' }); 

          meineLinkTexte += $(this).attr('id') + ''; 
         } 
        }) 

        event.preventDefault(); 
       }); 

       $("[id*=TreeView1] input[type=checkbox]").bind("click", function() { 

        var selectedStereoType = $.trim($(this).next().prop("href").substring($(this).next().prop("href").indexOf("=") + 1)); 
        //return; 

        var isChecked = $(this).is(":checked"); 

        if (isChecked) { 
         //zuletztSelektiert = zuletztSelektiert + $(this).next().text(); 
         zuletztSelektiert = zuletztSelektiert + selectedStereoType; 
        } 
        else { 
         //zuletztSelektiert = zuletztSelektiert.replace($(this).next().text(), ''); 
         zuletztSelektiert = zuletztSelektiert.replace(selectedStereoType, ''); 
        } 

        if (zuletztSelektiert != '') { 
         // Welcher Stereotyp ist selektiert? 
         //var stereotype = zuletztSelektiert.substring(zuletztSelektiert.indexOf('«') + 1, zuletztSelektiert.indexOf('»')); 
         var stereotype = selectedStereoType; 
         var letzteMeldung = ''; 

         $("[id*=TreeView1] input[type=checkbox]").each(function() { 
          //var currentStereotype = $(this).next().text().substring($(this).next().text().indexOf('«') + 1, $(this).next().text().indexOf('»')); 
          var currentStereotype = $.trim($(this).next().prop("href").substring($(this).next().prop("href").indexOf("=") + 1)); 

          if (currentStereotype != stereotype) { 
           var isChecked2 = $(this).is(":checked"); 

           if (isChecked2) { 
            $(this).removeAttr("checked"); 
            zuletztSelektiert = zuletztSelektiert.replace($.trim($(this).next().prop("href").substring($(this).next().prop("href").indexOf("=") + 1)), ''); 

            letzteMeldung='It is not possible to select elements of different stereotypes. \n\n Selected Items: ' + zuletztSelektiert; 
           } 
          } 

         }); 

         if (letzteMeldung != '') alert(letzteMeldung); 

        } 
       }); 

       $("#accordion").accordion({ 
        collapsible: true, 
        heightStyle: "fill" 
       }); 

      }) 

      function deselectAll() { 
       $("[id*=TreeView1] input[type=checkbox]").removeAttr("checked"); 
      } 
     </script> 
    </head> 
    <body onload="tocInit();"> 
     <form id="form1" runat="server"> 
     <div> 
      <div id="accordion"> 
       <h3>Navigation Tree</h3> 
       <div> 
        <asp:TextBox ID="searchField" runat="server" /> 
        <asp:Button ID="btnSearch" runat="server" Text="Search" /> 
        <asp:TreeView ID="TreeView1" 
          NodeStyle-CssClass="treeNode" 
          RootNodeStyle-CssClass="rootNode" 
          LeafNodeStyle-CssClass="leafNode" 
          runat="server"> 
        </asp:TreeView> 
       </div> 
       <h3>Views</h3> 
       <div> 
        <p> 
         <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Width="210px" /> <br /> 
         <asp:Label ID="Label1" runat="server"></asp:Label><br/> 
        </p> 
       </div> 
      </div> 
     </div> 
     </form> 
    </body> 
</html>

来源

2017-04-10 Björn Karpenstein

它看起来像我得到了我一直在寻找的行为与

$("#accordion").accordion({ 
     collapsible: true, 
     heightStyle: "content" 
    });

来源

2017-04-10 14:13:48

jQuery UI中嵌套的asp TreeView手风琴应该在扩展时触发事件

回答

相关问题