Событие щелчка CollapsiblePanelExtender
-
06-09-2019 - |
Вопрос
У меня есть CollapsiblePanelExtender с обычными кнопками расширения и свертывания.... Я хотел бы, чтобы событие щелчка сработало, когда расширитель расширен, и другое событие щелчка сработало, когда расширитель свернут.Но самое главное событие – это его продление.Я мог бы жить без щелчка даже при коллапсе.
Большинство примеров, которые я нашел в Интернете, используя:Событие щелчка «CollapsiblePanelExtender» заставляет расширитель реагировать на щелчок даже там, где...
Я хочу, чтобы расширитель запускал JS при нажатии.
Как мне это сделать?Я задаю неправильный вопрос/использую неправильные строки поиска?
CollapsiblePanelExtender extendatron = new CollapsiblePanelExtender();
extendatron.ID = "cpe" + MenuId;
extendatron.TargetControlID = "pnlContent" + strMenuId;
extendatron.ExpandControlID = "pnlMenu" + strMenuId;
extendatron.CollapseControlID = "pnlMenu" + strMenuId;
extendatron.Collapsed = bCollapsed;
extendatron.TextLabelID = strMenuName;
extendatron.ExpandedText = m_strButtonLabelHide;
extendatron.CollapsedText = m_strButtonLabelShow;
extendatron.ImageControlID = "imglnk" + strMenuId;
extendatron.CollapsedImage = "~/App_Themes/default/nbExpand.gif";
extendatron.ExpandedImage = "~/App_Themes/default/nbCollapse.gif";
extendatron.SuppressPostBack = true;
extendatron.ScrollContents = false;
var extender = $find('extendatron'); //this would be <%=myExtender.ClientID%>
extender.add_collapsed( function() { alert('collapsed'); });
extender.add_expanded( function() { alert('expanded'); });
Решение
Я предполагаю, что вы говорите о наборе средств управления ASP.Net AJAX.Вы можете добавить обработчики к свернутым и развернутым событиям следующим образом:
//this would be <%=myExtender.ClientID%> when using a master page
var extender = $find('myExtender_ClientId');
extender.add_collapsed( function() { alert('collapsed'); });
extender.add_expanded( function() { alert('expanded'); });
Дайте мне знать, если у вас возникнут вопросы... Я немало поработал над настройкой некоторых из этих объектов в различных решениях.
Другие советы
Сначала вам нужно создать клиентскую часть (JavaScript). onClick
событие для панели или элемента управления, на которое нажимают пользователи.
Итак, зайдите туда и наберите onClick="functionName();"
<asp:Panel ID="pDocumentHeaderTitle" runat="server" CssClass="collapsePanelHeader" onClick="setCollapseState();">
<asp:Image ID="imgDocumentHeaderHeader" runat="server" ImageUrl="~/images/wadown.gif"/>Document Header
<asp:Label ID="lblDocumentHeaderHeader" runat="server">(Show)</asp:Label>
</asp:Panel>
Следующий:Добавьте этот JavaScript.
<script type="text/javascript">
function setCollapseState() {
var extenderDocumentHeader = document.getElementById("MainContent_cpeDocumentHeader_ClientState");
setCookie("cpeDocumentHeaderStatus", extenderDocumentHeader.value, 5)
}
//W3Schools cookie code.
function setCookie(c_name, value, exdays) {
var exdate = new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
document.cookie = c_name + "=" + c_value;
}
//W3Schools cookie code.
function getCookie(c_name) {
var i, x, y, ARRcookies = document.cookie.split(";");
for (i = 0; i < ARRcookies.length; i++) {
x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
x = x.replace(/^\s+|\s+$/g, "");
if (x == c_name) {
return unescape(y);
}
}
}
</script>
Обратите внимание: когда ваша страница загружается, есть скрытое поле, которое отображает состояние ваших складных панелей.Это будет правда или ложь.Перейдите к источнику страницы и найдите его, вы его найдете.
Затем добавьте:
var extenderDocumentHeader = document.getElementById("MainContent_cpeDocumentHeader_ClientState");
Итак, щелкните мышью, получите это состояние клиента, сохраните его в файле cookie и готово!