jquery ui中 accordion的问题及我的解决方法

来源：互联网发布：手机精美时钟软件编辑：程序博客网时间：2024/06/06 17:45

jquery有一套所谓的ui组件，很不错的。如果有兴趣的朋友，可以参考http://jqueryui.com/

但其中的accordion，我使用的时候发现一些问题。如果按照demo那样，写一些静态内容，倒也正常。但如果每个面板里面的内容是动态绑定的，则会发生高度变小，然后出现滚动条的诡异现象

<%@ Page Language="C#" %><%@ Import Namespace="System.Linq" %><%@ Import Namespace="System.Xml.Linq" %><script runat="server">    protected override void OnPreInit(EventArgs e)    {        rp.ItemDataBound += new RepeaterItemEventHandler(rp_ItemDataBound);    }    void rp_ItemDataBound(object sender, RepeaterItemEventArgs e)    {        Label lb = e.Item.FindControl("categoryId") as Label;        if (lb != null)        {            string id = lb.Text;            var forms = from x in config.Root.Descendants("Form")                        where x.Attribute("CategoryId").Value == id                        select new                        {                            FormTitle = x.Attribute("Title").Value,                            FormDescription = x.Attribute("Description").Value,                            Url = x.Attribute("Url").Value,                            Icon = "Forms/Icons/" + x.Attribute("Icon").Value                        };            Repeater temp = e.Item.FindControl("rp_forms") as Repeater;            temp.DataSource = forms;            temp.DataBind();        }    }    protected override void OnLoad(EventArgs e)    {        if (!IsPostBack)            DataBind();    }    private XDocument config = null;    public override void DataBind()    {        //先读取分类数据        config = XDocument.Load(Server.MapPath("Forms/Forms.xml"));        var categories = from x in config.Root.Descendants("Category")                         orderby x.Attribute("Id").Value                         select new                         {                             Title = x.Attribute("Title").Value,                             Id = x.Attribute("Id").Value,                             Description = x.Attribute("Description").Value                         };        rp.DataSource = categories;        rp.DataBind();    }            script>"server">                "themes/cupertino/ui.all.css" rel="stylesheet" type="text/css" />        "widget.js" type="text/javascript">script>    <link href="Style/Widget.css" rel="stylesheet" type="text/css" />    <style type="text/css">        li.formli        {            list-style-type: none;            width: 300px;            float: left;        }        li.formli img        {            border: none;        }    style>head><body>    <h2>        表单中心h2>    <p>        这里将列出了所有的表单，您可以通过这里进行表单填写p>    <div id="formscontainer">        <asp:Repeater ID="rp" runat="server">            <ItemTemplate>                <div class="widget">                    <div class="title">                        <div class="icon">                        div>                        <h3>                            <%# Eval("Title") %>                            <asp:Label ID="categoryId" runat="server" Text='<%# Eval("Id") %>' Visible="false">asp:Label>                        h3>                    div>                    <div class="details">                        <asp:Repeater ID="rp_forms" runat="server">                            <HeaderTemplate>                                <ul>                            HeaderTemplate>                            <ItemTemplate>                                <li class="formli">                                    <img src='<%# Eval("Icon") %>' />                                    <a href='<%# Eval("Url") %>'>                                        <%# Eval("FormTitle") %>                                    a>                                    <div style="padding-left:40px">                                        <%# Eval("FormDescription") %>                                    div>                                li>                            ItemTemplate>                            <FooterTemplate>                                ul>FooterTemplate>                        asp:Repeater>                    div>                div>            ItemTemplate>        asp:Repeater>    div>    <div class="widget" autoOpen="false">        <div class="title">            <div class="icon">            div>            <h3>            异步加载的内容            h3>        div>        <div class="details" action="AsyncDataPage.aspx">        div>    div> body>html>

.csharpcode, .csharpcode pre{font-size: small;color: black;font-family: consolas, "Courier New", courier, monospace;background-color: #ffffff;/*white-space: pre;*/}.csharpcode pre { margin: 0em; }.csharpcode .rem { color: #008000; }.csharpcode .kwrd { color: #0000ff; }.csharpcode .str { color: #006080; }.csharpcode .op { color: #0000c0; }.csharpcode .preproc { color: #cc6633; }.csharpcode .asp { background-color: #ffff00; }.csharpcode .html { color: #800000; }.csharpcode .attr { color: #ff0000; }.csharpcode .alt {background-color: #f4f4f4;width: 100%;margin: 0em;}.csharpcode .lnum { color: #606060; }

页面效果

点击“异步加载的内容”