JQuery UI--Accordion使用体会

时间：2010-09-20 来源：忧忧夏天

　　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来进行相关操作。

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