Jquery ui JQuery UI Accordion中的嵌套asp树视图应在展开时触发事件
我在左侧有一个导航iFrame，我想启动Jquery ui JQuery UI Accordion中的嵌套asp树视图应在展开时触发事件,jquery-ui,treeview,client-side,jquery-ui-accordion,expand,Jquery Ui,Treeview,Client Side,Jquery Ui Accordion,Expand,我在左侧有一个导航iFrame，我想启动$（“#accordion”）.accordion（“刷新”）事件，以便嵌套的asp:TreeView的高度将确定JQuery UI Accordion的Accordion选项卡中包围的DIV的高度 是否有一种方法可以对扩展的asp:TreeView做出反应，使用客户端javascript$（“#accordion”）。accordion（“刷新”） <%@ Page Language="C#" AutoEventWireup="true" Code
$（“#accordion”）.accordion（“刷新”）asp:TreeNodeasp:TreeViewasp:TreeView$（“#accordion”）。accordion（“刷新”）
<%@ 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>
特雷诺德先生
{
颜色：#666；
字体系列：Arial、Helvetica、无衬线字体；
字体大小：13px；
}
.rootNode
{
颜色：#666；
字体系列：Arial、Helvetica、无衬线字体；
字体大小：13px；
}
.叶节点
{
颜色：#666；
字体系列：Arial、Helvetica、无衬线字体；
字体大小：13px；
}
var ZuletzSelektiert=''；
$（函数（）{
var treeView1=$（“#”）；
var treeNodes=treeView1.find（'div[id$=Nodes]'）；
var treeImages=treeView1.find（'img'）。not（'img[alt=\'\'\']'）；
$（“#搜索字段”）.keydown（函数（e）{
如果（e.keyCode==13）{
$（“搜索”）。单击（）；
e、 预防默认值（）；
}
});
$（“#BTN搜索”）。单击（函数（事件）{
var meineLinkTexte=''；
var parentEls=''；
css（{'display'：'none'}）；
treeImages.attr（'src'，'images/plus.gif'）
$（“a”）。每个（功能）{
//做你的工作
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]输入[type=checkbox]”）。绑定（“单击”，函数（）{
var selectedStereoType=$.trim（$（this.next（）.prop（“href”）.substring（$（this.next（）.prop（“href”）.indexOf（“=”+1））；
//返回；
var isChecked=$（this）.is（“：checked”）；
如果（已检查）{
//zuletztSelektiert=zuletztSelektiert+$（this.next（）.text（）；
ZuletzSelektiert=ZuletzSelektiert+selectedStereoType；
}
否则{
//zuletztSelektiert=zuletztSelektiert.replace（$（this）.next（）.text（），''）；
zuletztSelektiert=zuletztSelektiert.replace（selectedStereoType“”）；
}
如果（zuletztSelektiert！=''）{
//Welcher的刻板印象是selektiert吗？
//var stereotype=zuletztSelektiert.substring（zuletztSelektiert.indexOf（“~”）+1，zuletztSelektiert.indexOf（“»”）；
var-stereotype=selectedStereoType；
变量letzteMeldung=“”；
$（“[id*=TreeView1]输入[type=checkbox]”）。每个（函数（）{
//var currentstypetype=$（this.next（）.text（）.substring（$（this.next（）.text（）.indexOf（“«”）+1，$（this.next（）.text（）.indexOf（“»”）；
var currentstorype=$.trim（$（this.next（）.prop（“href”）.substring（$（this.next（）.prop（“href”）.indexOf（“=”+1））；
if（currentStereotype！=原型）{
var isChecked2=$（this）.is（“：checked”）；
如果（isChecked2）{
$（此）.removeAttr（“选中”）；
zuletztSelektiert=zuletztSelektiert.replace（$.trim（$（this.next（）.prop（“href”）.substring（$（this.next（）.prop（“href”）.indexOf（“=”+1）），”）；
letzteMeldung='无法选择不同类型的元素。\n\n所选项目：'+ZuletzSelektiert；
}
}
});
如果（letzteMeldung！=''）警报（letzteMeldung）；
}
});
$（“手风琴”）。手风琴({
可折叠的：是的，
高度样式：“填充”
});
})
函数取消全部（）{
$（“[id*=TreeView1]输入[type=checkbox]”）；
}
导航树
意见
看起来我得到了我想要的行为
$("#accordion").accordion({
collapsible: true,
heightStyle: "content"
});