Jquery updatepanel和accordion出错
我在页面上有一个Jquery updatepanel和accordion出错,jquery,asp.net,updatepanel,Jquery,Asp.net,Updatepanel,我在页面上有一个手风琴控件(使用jQuery)。当我将页面内容插入updatepanel时,手风琴停止工作。如果删除更新面板,它将开始工作 为什么? 如何修复此错误? 我是否必须重新实例化手风琴脚本/插件,如果是,如何重新实例化 <script src="Scripts/ddaccordion.js" type="text/javascript"></script> <script type="text/javascript"> ddaccordio
手风琴控件(使用jQuery)
。当我将页面内容插入updatepanel
时,手风琴停止工作。如果删除更新面板
,它将开始工作
为什么?如何修复此错误?
我是否必须重新实例化手风琴脚本/插件,如果是,如何重新实例化
<script src="Scripts/ddaccordion.js" type="text/javascript"></script>
<script type="text/javascript">
ddaccordion.init({
headerclass: "silverheader", //Shared CSS class name of headers group
contentclass: "submenu", //Shared CSS class name of contents group
revealtype: "mouseover", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc] [] denotes no content
onemustopen: true, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit: function(headers, expandedindices) { //custom code to run when headers have initalized
//do nothing
},
onopenclose: function(header, index, state, isuseractivated) { //custom code to run whenever a header is opened or closed
//do nothing
}
})
</script>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div class="applemenu">
<div class="silverheader"><a href="http://www.dynamicdrive.com">Dynamic Drive</a></div>
<div class="submenu">
Some random content here<br />
</div>
<div class="silverheader"><a href="http://www.dynamicdrive.com/style/" >CSS Examples</a></div>
<div class="submenu">
Some random content here<br />
</div>
<div class="silverheader"><a href="http://www.javascriptkit.com">JavaScript Kit</a></div>
<div class="submenu">
Some random content here<br />
</div>
<div class="silverheader"><a href="http://www.cssdrive.com">CSS Drive</a></div>
<div class="submenu">
Some random content here<br />
<img src="http://i27.tinypic.com/sy7295.gif" />
</div>
<div class="silverheader"><a href="http://www.codingforums.com">Coding Forums</a></div>
<div class="submenu">
Some random content here<br />
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
ddaccordion.init({
headerclass:“silverheader”,//headers组的共享CSS类名
contentclass:“子菜单”//内容组的共享CSS类名
revealtype:“mouseover”//当用户在标题上单击鼠标时显示内容?有效值:“click”、“clickgo”或“mouseover”
mouseoverdelay:200,//如果revealtype=“mouseover”,则在标头在mouseover上展开之前以毫秒为单位设置延迟
collapseprev:true,//折叠以前的内容(因此在任何时候只打开一个)?true/false
defaultexpanded:[0],//默认打开的内容索引[index1、index2等][]表示没有内容
onemustopen:true,//指定是否应始终至少打开一个标头(因此从不关闭所有标头)
animatedefault:false,//默认情况下打开的内容是否应动画显示到视图中?
persiststate:true,//浏览器会话中打开内容的持久状态?
toggleclass:[“”,“selected”],//两个CSS类,分别在头折叠和展开时应用于头[“class1”,“class2”]
togglehtml:[“”、“”、“”]、//收拢和展开标题时,分别向标题添加额外的HTML[“位置”、“html1”、“html2]”(请参阅文档)
animatespeed:“快”//动画速度:以毫秒为单位的整数(即:200),或关键字“快”、“正常”或“慢”
oninit:function(headers,expandedindices){//在头初始化时运行的自定义代码
//无所事事
},
onopenclose:函数(头、索引、状态、isuseractivated){//在打开或关闭头时运行的自定义代码
//无所事事
}
})
这里有一些随机内容
这里有一些随机内容
这里有一些随机内容
这里有一些随机内容
这里有一些随机内容
由于手风琴的全部内容/定义都在更新面板内,因此每次更新面板更新时,您都必须重新初始化它,因为您基本上获得了手风琴的“新”副本,并且与之相关的任何事件都消失了
我们也遇到了这个问题(使用不同的网络控制),我们的解决方案是将我们必须的最小值放在更新面板内,比如隐藏按钮,然后将手风琴编码为“按下”这些按钮,这样更新面板就可以在不使用软管的情况下完成它的工作。使用
页面加载
,在所有部分回发时调用它:
函数pageLoad()
{
ddaccordion.init({
headerclass:“silverheader”,//headers组的共享CSS类名
contentclass:“子菜单”//内容组的共享CSS类名
revealtype:“mouseover”//当用户在标题上单击鼠标时显示内容?有效值:“click”、“clickgo”或“mouseover”
mouseoverdelay:200,//如果revealtype=“mouseover”,则在标头在mouseover上展开之前以毫秒为单位设置延迟
collapseprev:true,//折叠以前的内容(因此在任何时候只打开一个)?true/false
defaultexpanded:[0],//默认打开的内容索引[index1、index2等][]表示没有内容
onemustopen:true,//指定是否应始终至少打开一个标头(因此从不关闭所有标头)
animatedefault:false,//默认情况下打开的内容是否应动画显示到视图中?
persiststate:true,//浏览器会话中打开内容的持久状态?
toggleclass:[“”,“selected”],//两个CSS类,分别在头折叠和展开时应用于头[“class1”,“class2”]
togglehtml:[“”、“”、“”]、//收拢和展开标题时,分别向标题添加额外的HTML[“位置”、“html1”、“html2]”(请参阅文档)
animatespeed:“快”//动画速度:以毫秒为单位的整数(即:200),或关键字“快”、“正常”或“慢”
oninit:function(headers,expandedindices){//在头初始化时运行的自定义代码
//无所事事
},
onopenclose:函数(头、索引、状态、isuseractivated){//在打开或关闭头时运行的自定义代码
//无所事事
}
})
}
如果所有内容都在“更新”面板中,那么只需将脚本放入“更新”面板中,它就会开始工作。我知道这是一篇旧文章,但它仍然没有解决
因此,这里有两个问题:
正如@rickschott所指出的,首先,您需要在每次部分回发后(不仅仅是第一次)初始化插件,因为插件位于UpdatePanel内,所以它将在UpdatePanel更新后停止工作
当您修复该问题时,您会遇到第二个问题:页面似乎一直在刷新,并且从未加载。这个问题可以被认为是DDACTRODION jQuery插件的一个缺陷。似乎它不是设计用来重置的(或者在不从头加载页面的情况下销毁和重新创建)。我做了一个变通方法,但您可能需要测试它:
- 打开
并在其中找到ddaccordion.js
init:function(config)
- 删除这四行:
document.write('\n')
document.write('.+config.contentclass+'{display:none}\n')//生成CSS以隐藏内容
文件
<script type="text/javascript">
function pageLoad()
{
ddaccordion.init({
headerclass: "silverheader", //Shared CSS class name of headers group
contentclass: "submenu", //Shared CSS class name of contents group
revealtype: "mouseover", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc] [] denotes no content
onemustopen: true, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit: function(headers, expandedindices) { //custom code to run when headers have initalized
//do nothing
},
onopenclose: function(header, index, state, isuseractivated) { //custom code to run whenever a header is opened or closed
//do nothing
}
})
}
</script>