帮酷LOGO
0 0 评论
文章标签:jtemplate  Accordion  acc  Jtemplates  


介绍

本文将介绍使用jQuery的jTemplates插件构建的accordion 用户控件。 jTemplates是一个模板引擎,它被写在。 JTemplates在客户端呈现HTML是非常有效的。 在这里我可以在前面的文章中找到关于jTemplates的简要介绍。

web上已经有很多 accordion Plug-Ins 了。 这一个有什么不同? 主要区别在于,你对客户端呈现的内容拥有完全控制权限。 你可以基本上指出控制和底部的内容,以及内容和内容的每个 header 中的内容。

源代码

源代码包含 accordion 用户控件和显示使用它的几种方法的web应用程序。

使用代码

下面是 Accordion 用户控件的示例用法:

<JQuery:AccordionID="acTest3"ActionElementCssClass="AccordionActionItem"ExpandableElementCssClass="AccordionItemContainer"Width="200"runat="server"><JTemplate> {#foreach $T as record}
 <divclass="AccordionActionItem"><label>{$T.record.Title}</label></div><divclass="AccordionItemContainer"style="height:150px;"> {#foreach $T.record.Items as item}
 <div><label>{$T.item.Name}</label> 
 </div> {#/for} 
 </div> 
 {#/for}
 </JTemplate></JQuery:Accordion>

有两种使用该控件的方法: 在 static 模式和动态模式下。 在 static 模式下,你只需编写需要为 accordion 输出的HTML,并在页面加载时自动执行该控件。 在这种模式下,不需要使用特殊的jtemplates 标签。

动态模式中,有两种需要做的事情。 控制源数据需要在某一点初始化,即以太服务器端或者客户端。 模板需要包含 jtemplates 特殊标记,以便为数据源(。查看 上面 示例) 中的每个项呈现 accordion 项。

需要遵循某些规则才能使所有这些工作正常。 对于每个项,都应该有一个与 ActionElementCssClass 属性值匹配的类。 这里元素可以由其他元素包含。 但是,元素容器顶部必须跟有一个元素,该元素与 ExpandableElementCssClass 值匹配。 below 是以下例子的几个有效示例 ActionElementCssClass="AccordionActionItem"ExpandableElementCssClass="AccordionItemContainer"

<div><!-thisistheactionelementtopcontainerforitem1--><labelclass=" AccordionActionItem">Item 1</label></div><divclass=" AccordionItemContainer">.....</div><!-thisistheitemcontainerelement--><div><!-thisistheactionelementtopcontainerforitem2--><labelclass=" AccordionActionItem">Item 2</label></div><divclass=" AccordionItemContainer">.....</div><!-thisistheitemcontainerelement-->
<divclass=" AccordionActionItem">Item 1</div><!-thisistheactionelementtopcontainerforitem1--><divclass=" AccordionItemContainer">.....</div><!-thisistheitemcontainerelement--><divclass=" AccordionActionItem">Item 2</div><!-thisistheactionelementtopcontainerforitem2--><divclass=" AccordionItemContainer">.....</div><!-thisistheitemcontainerelement-->

让我们浏览一下控件提供的其他属性。

  • ActionElementContainerExpandedCssClass - 如果设置了属性,则当项目展开时,该CSS类将应用于动作元素的顶部容器。
  • ActionElementContainerNotExpandedCssClass - 如果设置了该属性,则这里CSS类将在关闭项时应用到action元素的顶部容器。
  • ActionElementContainerMouseOverCssClass - 如果设置了该属性,则当鼠标移过该项时,这里CSS类将应用于动作元素的顶部容器。
  • 如果列表中的第一个项在默认情况下展开,则为 ExpandedByDefault -indicates。
  • BeforeItemOpenClientMethod - 如果设置了该属性,则在打开项之前调用具有相应名称的JavaScript方法。 这里方法和描述的below 应该具有以下签名: 函数( 索引,dataItem,actionElement,itemContainerElement )
    • index - 元素索引
    • dataItem - 与 accordion 项对应的数据项
    • actionElement - 动作元素
    • itemContainerElement - 项容器元素
  • BeforeItemCloseClientMethod - 如果设置了该属性,则在关闭项之前,将调用具有相应名称的JavaScript方法。
  • AfterItemOpenClientMethod - 如果设置了该属性,则在打开项之后,将调用具有相应名称的JavaScript方法。
  • AfterItemCloseClientMethod - 如果设置了该属性,则在关闭项之后,将调用具有相应名称的JavaScript方法。

控件支持客户端加载和模板更新。 下面显示了客户端加载的一个示例:

var dataSource = [
 {
 Title : "Item 1",
 Items : [{Name : "Item 1.1"}]
 },
 {
 Title : "Item 2",
 Items : [{Name : "Item 2.1"}, {Name : "Item 2.2"}]
 }, 
 {
 Title : "Item 3",
 Items : [{Name : "Item 3.1"}, {Name : "Item 3.2"}]
 }, 
 {
 Title : "Item 4",
 Items : [{Name : "Item 4.1"}, {Name : "Item 4.2"}]
 }
]; 
acTest4.dataBind(dataSource);

其中" acTest4"等于控件的ClientID 属性。

结束语

将 jQuery Plug-Ins 与jTemplates或者其他模板引擎混合可以带来惊人的结果。 我们一定会看到这种技术在未来的几年里不断演变。 问题是,如果微软在 ASP.NET 4中介绍了 jTemplates,那么. NET 开发人员将在未来使用它。



文章标签:acc  Accordion  jtemplate  Jtemplates  

Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语