JQuery UI--Accordion使用体会

　　1.效果如下：

　　

　　2.关于JQuery UI的介绍请看官方http://jqueryui.com/，里面有详细的DEMO和文档。

　　3.关于静态的Accordion效果，如上图所示，跟JQuery UI里的Demo一模一样。再使用JQueryUI前要先引用相应的样式和库　

代码

   
   

    
    
    
     
    
    <
    
    link 
    
    href
    
    ="../JQueryUi/jquery-ui-1.8.5.custom.css"
    
     rel
    
    ="stylesheet"
    
     type
    
    ="text/css"
    
     
    
    />
    
    

 
    
    <
    
    script 
    
    src
    
    ="../JQueryUi/jquery-1.4.2.min.js"
    
     type
    
    ="text/javascript"
    
    ></
    
    script
    
    >
    
    
 
    
    <
    
    script 
    
    src
    
    ="../JQueryUi/jquery-ui-1.8.5.custom.min.js"
    
     type
    
    ="text/javascript"
    
    ></
    
    script
    
    >
   
   

　　然后再调用Accordion

代码

   
   

    
    
    
     
    
    <
    
    script 
    
    type
    
    ="text/javascript"
    
    >
    
    
 $(
    
    function
    
    () {
 
    
    //
    
    静态Accordion
    
    

    
     $(
    
    "
    
    #staticAccordion
    
    "
    
    ).accordion({
 
    
    //
    
    配置信息
    
    

    
     autoHeight: 
    
    false
    
    ,
 
    
    //
    
    事件
    
    

    
     change: 
    
    function
    
    (event, ui) {
 alert(
    
    "
    
    select changed
    
    "
    
    );
 }
 });

 $(
    
    "
    
    #defaultSettingAccordion
    
    "
    
    ).accordion();

 $(
    
    "
    
    #defaultSettingAccordion h3
    
    "
    
    ).click(
    
    function
    
    () {
 
    
    var
    
     info 
    
    =
    
     $(
    
    "
    
    #info
    
    "
    
    );
 
    
    var
    
     isClickModuleNum 
    
    =
    
     $(
    
    this
    
    ).attr(
    
    "
    
    name
    
    "
    
    );
 
    
    var
    
     isClickModuleContent 
    
    =
    
     $(
    
    this
    
    ).next(
    
    "
    
    .moduleContent
    
    "
    
    ).html();
 info.html(
    
    "
    
    模块编号：
    
    "
    
     
    
    +
    
     isClickModuleNum 
    
    +
    
     
    
    "
    
    <br/>
    
    "
    
     
    
    +
    
     
    
    "
    
    模块内容：
    
    "
    
     
    
    +
    
     isClickModuleContent);
 });
 });
 
    
    </
    
    script
    
    >
   
   

　　html代码如下:

　　

代码

   
   

    
    
    
    <
    
    div
    
    >
    
    
 
    
    <
    
    h2
    
    >
    
    静态Accordion
    
    </
    
    h2
    
    >
    
    
 
    
    <
    
    div 
    
    id
    
    ="staticAccordion"
    
    >
    
    
 
    
    <
    
    h3
    
    ><
    
    a 
    
    href
    
    ="#"
    
    >
    
    Section 1
    
    </
    
    a
    
    ></
    
    h3
    
    >
    
    
 
    
    <
    
    div
    
    >
    
    
 
    
    <
    
    p
    
    >
    
    
 Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
 purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
 velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
 suscipit faucibus urna.
 
    
    </
    
    p
    
    >
    
    
 
    
    </
    
    div
    
    >
    
    
 
 
    
    <
    
    h3
    
    ><
    
    a 
    
    href
    
    ="#"
    
    >
    
    Section 2
    
    </
    
    a
    
    ></
    
    h3
    
    >
    
    
 
    
    <
    
    div
    
    >
    
    
 
    
    <
    
    p
    
    >
    
    
 Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
 Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
 ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
 lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
 
    
    </
    
    p
    
    >
    
    
 
    
    <
    
    ul
    
    >
    
    
 
    
    <
    
    li
    
    >
    
    List item one
    
    </
    
    li
    
    >
    
    
 
    
    <
    
    li
    
    >
    
    List item two
    
    </
    
    li
    
    >
    
    
 
    
    <
    
    li
    
    >
    
    List item three
    
    </
    
    li
    
    >
    
    
 
    
    </
    
    ul
    
    >
    
    
 
    
    </
    
    div
    
    >
    
    
 
 
    
    <
    
    h3
    
    ><
    
    a 
    
    href
    
    ="#"
    
    >
    
    Section 3
    
    </
    
    a
    
    ></
    
    h3
    
    >
    
    
 
    
    <
    
    div
    
    >
    
    
 
    
    <
    
    p
    
    >
    
    
 Cras dictum. Pellentesque habitant morbi tristique senectus et netus
 et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
 faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
 mauris vel est.
 
    
    </
    
    p
    
    >
    
    
 
    
    <
    
    p
    
    >
    
    
 Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
 Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
 inceptos himenaeos.
 
    
    </
    
    p
    
    >
    
    
 
    
    </
    
    div
    
    >
    
    
 
    
    </
    
    div
    
    >
    
    
 
    
    </
    
    div
    
    >
    
    
 
    
    <
    
    div
    
    >
    
    
 
    
    <
    
    h2
    
    >
    
    动态Accordion
    
    </
    
    h2
    
    >
    
    
 
    
    <
    
    div
    
    >
    
    
 
    
    <
    
    asp:Literal 
    
    ID
    
    ="dynamicAccordion"
    
     runat
    
    ="server"
    
    ></
    
    asp:Literal
    
    >
    
    
 
    
    <
    
    div 
    
    id
    
    ="info"
    
    ></
    
    div
    
    >
    
    
 
    
    </
    
    div
    
    >
    
    
 
    
    </
    
    div
    
    >
   
   

　　4.下面主要来说说动态读取数据库里内容作为Accordion内容的使用体会，大家如有什么不同的方法，可以相互交流下。

　　后台代码：

代码

   
   

    
    
    
     
    
    protected
    
     
    
    void
    
     Page_Load(
    
    object
    
     sender, EventArgs e)
 {
 InitDynamicAccordion();
 }

 
    
    private
    
     
    
    void
    
     InitDynamicAccordion()
 {
 System.IO.StringWriter sw 
    
    =
    
     
    
    new
    
     System.IO.StringWriter();
 List
    
    <
    
    Module
    
    >
    
     ls 
    
    =
    
     ModuleDAL.GetModuleList();

 sw.Write(
    
    "
    
    <div ID='defaultSettingAccordion'>
    
    "
    
    );

 
    
    for
    
     (
    
    int
    
     i 
    
    =
    
     
    
    0
    
    ; i 
    
    <
    
     ls.Count; i
    
    ++
    
    )
 {
 sw.Write(
    
    "
    
    <h3 style='width:100%' name={1}><a href='#' style='font-size:12px'>{0}</a></h3>
    
    "
    
    , ls[i].ModuleName, ls[i].ModuleNum);
 sw.Write(
    
    "
    
    <div class='moduleContent' style='font-size:12px;width:98px' id={1}>{0}</div>
    
    "
    
    , ls[i].ModuleDes, ls[i].ModuleNum);
 }

 sw.Write(
    
    "
    
    </div>
    
    "
    
    );
 dynamicAccordion.Text 
    
    =
    
     sw.ToString();
 }
   
   

　　大家可以根据具体需要，替代div里显示的内容。对于Accordion主要就是点击标题（h3里的内容）来展开收缩层（div）。

 

　　对于后台如何跟Accordion选中的内容如何交互，本人暂时用一个隐藏标签来处理，把选中的快的ID设置成隐藏标签的值，然后后台拿到相应ID来进行相关操作。

如果大家有其他方法，请指点一二，不胜感激。