2

我有一个带有通常的扩展和折叠按钮的 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'); });
4

2 回答 2

3

我假设您在谈论 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'); });

如果您有任何问题，请告诉我...我已经在各种解决方案中对其中一些对象进行了相当多的自定义。

于 2009-05-27T18:08:18.077 回答
0

onClick首先，您需要为用户单击的面板或控件创建客户端 (JavaScript)事件。

所以，进去输入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 中，一切顺利！

于 2011-11-10T16:09:46.537 回答