在 ASP.NET 回发后保持当前的 jQuery 手风琴窗格打开？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2148933/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Keep the current jQuery accordion pane open after ASP.NET postback?
提问by Xaisoft
I have a jquery accordion on an asp.net aspx weppage. Inside the panes, I have asp.net buttons. When I click on the button, the pane I was in, closes and reloads the page, defaulting to the first pane. I don't mind the reload, but is there a way to keep the current pane open after the reload. Right now, I am just calling accordion() on a div with the id of accordion.
我在 asp.net aspx 网页上有一个 jquery 手风琴。在窗格内，我有 asp.net 按钮。当我点击按钮时，我所在的窗格关闭并重新加载页面，默认为第一个窗格。我不介意重新加载，但是有没有办法在重新加载后保持当前窗格打开。现在，我只是在带有手风琴标识的 div 上调用手风琴（）。
回答by MaxCarey
You could use a hidden input field to persist the active accordion index during postbacks, and then populate it using javascript during the change event of the accordion.
您可以使用隐藏的输入字段在回发期间保留活动的手风琴索引，然后在手风琴的更改事件期间使用 javascript 填充它。
<asp:HiddenField ID="hidAccordionIndex" runat="server" Value="0" />
<script language="javascript" type="text/javascript">
$(function(){
var activeIndex = parseInt($('#<%=hidAccordionIndex.ClientID %>').val());
$("#accordion").accordion({
autoHeight:false,
event:"mousedown",
active:activeIndex,
change:function(event, ui)
{
var index = $(this).children('h3').index(ui.newHeader);
$('#<%=hidAccordionIndex.ClientID %>').val(index);
}
});
});
</script>
You could probably come up with a more efficient way of capturing the active index during the change event, but this seems to work.
您可能会想出一种更有效的方法来在更改事件期间捕获活动索引，但这似乎有效。
When the page has loaded it retrieves the active index from the hidden field and stores it in a variable. It then initialises the accordion using the retrieved index and a custom function to fire on the change event which writes a new index to the hidden field whenever a new pane is activated.
当页面加载后，它从隐藏字段中检索活动索引并将其存储在一个变量中。然后它使用检索到的索引和自定义函数初始化手风琴以触发更改事件，每当激活新窗格时，该事件都会将新索引写入隐藏字段。
During a postback, the hidden field value is persisted in the ViewState so that when the page is loaded again the accordion is initialised with the index of the last pane clicked on.
在回发期间，隐藏字段值保留在 ViewState 中，这样当页面再次加载时，手风琴会使用点击的最后一个窗格的索引进行初始化。
回答by Yelnic
MaxCarey's solution seems to work well, but the latest version of jQuery UI (1.10.4) seems to have some differences. The correct event is not "changed" now, but "activate" (or "beforeActivate", if you want the option to cancel the event).
MaxCarey 的解决方案似乎运行良好，但最新版本的 jQuery UI (1.10.4) 似乎有一些差异。正确的事件现在不是“更改”，而是“激活”（或“beforeActivate”，如果您想要取消事件的选项）。
<asp:HiddenField runat="server" ID="hidAccordionIndex" Value="0" />
...
$(document).ready(function () {
var activeIndex = parseInt($("#<%=hidAccordionIndex.ClientID %>").val());
$("#accordion").accordion({
heightStyle: "content",
active: activeIndex,
activate: function (event, ui) {
var index = $(this).children('h3').index(ui.newHeader);
$("#<%=hidAccordionIndex.ClientID %>").val(index);
}
});
});
The gotcha for me here is that I can verify that the hidAccordionIndex value is being set to the proper value, but on postback, it's getting set back to 0 no matter what I try. I've tried setting it to an empty string, like Dave.Lebr1 suggested, but it still isn't persisting on postback.
对我来说，这里的问题是我可以验证 hidAccordionIndex 值是否被设置为正确的值，但在回发时，无论我尝试什么，它都会被设置回 0。我试过将它设置为空字符串，就像 Dave.Lebr1 建议的那样，但它仍然没有坚持回发。
This should remain available on postback, since my divAccordionIndex field should have ViewState (I've verified it's enabled).
这应该在回发时仍然可用，因为我的 divAccordionIndex 字段应该有 ViewState（我已经验证它已启用）。
Has anyone else had success with this? This menu is in my master page, and it works great...other than this.
有没有其他人在这方面取得过成功？此菜单在我的母版页中，效果很好……除此之外。
回答by gm.
I know this is late, but it still may help someone struggling with this. The solution here is basically a combination of some of the above wisdom. ;-)
我知道这已经晚了，但它仍然可以帮助那些为此苦苦挣扎的人。这里的解决方案基本上是上述一些智慧的组合。;-)
I am using jquery-ui-1.10.4.custom.min.js and jquery-1.6.3.min.js.
我正在使用 jquery-ui-1.10.4.custom.min.js 和 jquery-1.6.3.min.js。
<%--the hidden field saves the active tab during a postback--%>
<asp:HiddenField ID="hdLastActive" runat="server" Value="0" />
</div>
</form>
and here is the javaScript:
这是javaScript：
<script type="text/javascript">
$(document).ready(function () {
// get the last active tab index -or 0 on initial pagee load- to activate the tab
var activeTab = parseInt($("[id$='hdLastActive']").val());
// initialize the accordion to the activeTab and set the activate event to save the last active tab index.
$("#accordion").accordion({
active: activeTab,
activate: function (e) {
// save the active tab index in the hidden field
$("[id$='hdLastActive']").val($(this).accordion("option", "active"));
}
});
});
回答by rainabba
To expand on the previous HiddenField ideas, but without having to mangle your JS:
要扩展以前的 HiddenField 想法，但不必破坏您的 JS：
In your page:
在您的页面中：
<asp:HiddenField runat="server" ID="hidAccordionIndex" Value="0" ClientIDMode="Static" />
In your JS:
在你的 JS 中：
$('#yourAccordion').accordion({
heightStyle: "content"
, active: parseInt($('#hidAccordionIndex').val())
, activate: function (e, ui) {
$('#hidAccordionIndex').val($(this).children('h3').index(ui.newHeader));
}
});
The key is ClientIDMode="Static". This approach is take little modification to work with nearly any server-side language because the JS doesn't have to change, only the one hidden field.
关键是 ClientIDMode="静态"。这种方法几乎可以与任何服务器端语言一起使用，因为无需更改 JS，只需更改一个隐藏字段即可。
回答by Om Prakash
It is working on my side Please check......
它在我这边工作请检查......
$(document).ready(function () {
var activeIndex = parseInt($('#<%=hidAccordionIndex.ClientID %>').val());
alert(activeIndex);
$("#accordion").accordion({
active: activeIndex,
beforeActivate: function (event, ui) {
var index = $(this).children('h3').index(ui.newHeader);
$('#<%=hidAccordionIndex.ClientID %>').val(index);
}
});
});
回答by user3867250
Put your button or gridview which may has to clicked or updated in a Update panel. Then ui accordion will works fine 100% + guarantee.. Sarath@f1
将您可能需要单击或更新的按钮或网格视图放在更新面板中。然后 ui 手风琴将正常工作 100% + 保证.. Sarath@f1
回答by TheVillageIdiot
write index or id of accordion pane in which the button was pressed using ClientScript.RegisterStartupScript. Suppose user clicks button named btnSubmitwhich is in pane 3. Then it will work like this:
使用 . 写入按钮被按下的手风琴窗格的索引或 ID ClientScript.RegisterStartupScript。假设用户单击btnSubmit窗格 3 中名为的按钮。然后它将像这样工作：
protected void btnSubmitClick(object sender, EventArgs e)
{
//process button click
//class this function at end:
SetAccordionPane(3);
}
//you can call this function every time you need to set specific pane to open
//positon
private void SetAccordionPane(int idx)
{
var s="<script type=\"text/javascript\">var paneIndex = "
+ idx +"</script">;
ClientScript.RegisterStartupScript(typeof(<YourPageClass>, s);
}
now in javascript:
现在在javascript中：
$(function(){
if(paneIndex)
{
$('.selector').accordion({active: paneIndex});
}
else
{
$('.selector').accordion();
}
});
回答by Mattias Jakobsson
Use the option "active" when you create the accordion. Something like this:
创建手风琴时使用“活动”选项。像这样的东西：
$('.selector').accordion({ active: 2 });
This will activate the second option in the accordion. You can also pass a selector to select by id.
这将激活手风琴中的第二个选项。您还可以传递一个选择器以按 id 进行选择。
回答by Yogesh Jiwankar
var activeIndex = parseInt($('#<%=hidAccordionIndex.ClientID %>').val());
$("#accordion,#inneraccordian").accordion({
heightStyle: "content",
collapsible: true,
navigation: true,
active: activeIndex,
beforeActivate: function (event, ui) {
var index = $(this).children('h3').index(ui.newHeader);
$('#<%=hidAccordionIndex.ClientID %>').val(index);
}
});
回答by Imran H. Ashraf
$("#accordion").accordion({
heightStyle: "content",
collapsible: true,
navigation: true
});
Setting the navigationproperty to truewill retain the state of the accordion panel.
将该navigation属性设置为true将保留手风琴面板的状态。
