该CollapsiblePanelExtender似乎主要设计为折叠/展开以响应用户的鼠标事件的事情。 有也是一个很好的方式来获得扩展到折叠/展开以响应客户端的JavaScript的东西呢?
在我的具体情况,我公司拥有一批在页面上CollapsiblePanelExtenders(及其相应面板)的,我想知道如果我可以做这样的事情严格对客户端实行“展开所有面板”按钮:
for each CollapsiblePanelExtender on this page, call somethingOrOther(extender)
我可以实现这个逻辑的服务器端,而不是如果我做了全面的回传,但我的网页需要很长的时间来加载,所以这似乎并不像它会提供一个非常漂亮的用户体验。 因此,我有兴趣做展开/折叠的客户端。
看起来这是不是一个用例的AJAX控件工具包的人脑子里想的,但我想我会检查。
写入以下代码中的图像/按钮的OnClick事件
<asp:Image ID="img1" runat="server" OnClick="ExpandCollapse()"/>
function ExpandCollapse() {
$find("collapsibleBehavior1").set_Collapsed(true);
$find("collapsibleBehavior2").set_Collapsed(true);
}
希望这可以帮助!
我现在有一个部分工作液。
我跟着伊恩的建议,并通过该工具包源看去。 在CollapsiblePanelBehavior.debug.js
,你可以在expandPanel()
显然是打算作为公共接口的行为的一部分。 还有一个get_Collapsed()
在JavaScript中访问这些行为的关键似乎是设置BehaviorID
你的财产CollapsiblePanelExtender
在ASP.NET标签。
我修改了中继我的网页上,以便BehaviorID
s为predictible,沿着这些线路:
<ajaxToolkit:CollapsiblePanelExtender
BehaviorID="<%#'collapsebehavior'+DataBinder.Eval(Container.DataItem,'id')%>"
ID="CollapsiblePanelExtender" runat="server" />
这导致与命名行为collapsebehavior1
, collapsebehavior2
, collapsebehavior3
等。
有了这个做,我能够扩大客户端上的所有的可折叠面板如下:
function expandAll() {
var i = 0;
while (true) {
i++;
var name = 'collapsebehavior' + i;
var theBehavior = $find(name);
if (theBehavior) {
var isCollapsed = theBehavior.get_Collapsed();
if (isCollapsed) {
theBehavior.expandPanel();
}
} else {
// No more more panels to examine
break;
}
}
}
我敢肯定,使用$find
在一个循环一样,实在是低效的,但是这是我到目前为止所。
此外,它不会在Firefox出于某种原因。 (在FF只有第一元件膨胀,然后有控制工具包代码内一个Javascript错误)。
这会都显得格外难看给你所有的JavaScript利弊。 也许我以后会清理东西,或者你可以帮助我。
你也可以切换面板收合/展开状态之间进行切换:
function toggle() {
var MenuCollapser = $find("name");
MenuCollapser.togglePanel();
}
文章来源: CollapsiblePanelExtender: Can I initiate collapse/expand from client-side javascript? (AJAX Control Toolkit)