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

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

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

  1. <%@ Page Language="C#" %>
  2.  
  3. <%@ Import Namespace="System.Linq" %>
  4. <%@ Import Namespace="System.Xml.Linq" %>
  5.  
  6. <script runat="server">
  7.     protected override void OnPreInit(EventArgs e)
  8.     {
  9.         rp.ItemDataBound += new RepeaterItemEventHandler(rp_ItemDataBound);
  10.     }
  11.  
  12.     void rp_ItemDataBound(object sender, RepeaterItemEventArgs e)
  13.     {
  14.         Label lb = e.Item.FindControl("categoryId") as Label;
  15.         if (lb != null)
  16.         {
  17.             string id = lb.Text;
  18.             var forms = from x in config.Root.Descendants("Form")
  19.                         where x.Attribute("CategoryId").Value == id
  20.                         select new
  21.                         {
  22.                             FormTitle = x.Attribute("Title").Value,
  23.                             FormDescription = x.Attribute("Description").Value,
  24.                             Url = x.Attribute("Url").Value,
  25.                             Icon = "Forms/Icons/" + x.Attribute("Icon").Value
  26.                         };
  27.  
  28.             Repeater temp = e.Item.FindControl("rp_forms") as Repeater;
  29.             temp.DataSource = forms;
  30.             temp.DataBind();
  31.  
  32.         }
  33.     }
  34.  
  35.     protected override void OnLoad(EventArgs e)
  36.     {
  37.         if (!IsPostBack)
  38.             DataBind();
  39.  
  40.     }
  41.  
  42.     private XDocument config = null;
  43.  
  44.     public override void DataBind()
  45.     {
  46.         //先读取分类数据
  47.         config = XDocument.Load(Server.MapPath("Forms/Forms.xml"));
  48.         var categories = from x in config.Root.Descendants("Category")
  49.                          orderby x.Attribute("Id").Value
  50.                          select new
  51.                          {
  52.                              Title = x.Attribute("Title").Value,
  53.                              Id = x.Attribute("Id").Value,
  54.                              Description = x.Attribute("Description").Value
  55.                          };
  56.         rp.DataSource = categories;
  57.         rp.DataBind();
  58.  
  59.     }
  60.  
  61. </script>
  62.  
  63. <html>
  64. <head runat="server">
  65.  
  66.     <script src="jquery-1.3.2-vsdoc.js" type="text/javascript"></script>
  67.  
  68.     <script src="ui/ui.core.js" type="text/javascript"></script>
  69.  
  70.     <script src="ui/ui.accordion.js" type="text/javascript"></script>
  71.  
  72.     <link href="themes/cupertino/ui.all.css" rel="stylesheet" type="text/css" />
  73.  
  74.     <script type="text/javascript">
  75.         $(function() {
  76.  
  77.             $("#formscontainer").accordion();
  78.  
  79.         });
  80.     </script>
  81.  
  82.     <style type="text/css">
  83.         li.formli
  84.         {
  85.             list-style-type: none;
  86.             width: 300px;
  87.             float: left;
  88.         }
  89.         li.formli img
  90.         {
  91.             border: none;
  92.         }
  93.     </style>
  94. </head>
  95. <body>
  96.     <h2>
  97.         表单中心</h2>
  98.     <p>
  99.         这里将列出了所有的表单，您可以通过这里进行表单填写</p>
  100.     <div id="formscontainer">
  101.         <asp:Repeater ID="rp" runat="server">
  102.             <ItemTemplate>
  103.                 <h3>
  104.                     <a href="#" title='<%# Eval("Description") %>'>
  105.                         <%# Eval("Title") %></a>
  106.                     <asp:Label ID="categoryId" runat="server" Text='<%# Eval("Id") %>' Visible="false"></asp:Label>
  107.                 </h3>
  108.                 <div class="details">
  109.                     <asp:Repeater ID="rp_forms" runat="server">
  110.                         <HeaderTemplate>
  111.                             <ul>
  112.                         </HeaderTemplate>
  113.                         <ItemTemplate>
  114.                             <li class="formli">
  115.                                 <img src='<%# Eval("Icon") %>' />
  116.                                 <a href='<%# Eval("Url") %>'>
  117.                                     <%# Eval("FormTitle") %>
  118.                                 </a>
  119.                                 <div style="padding-left: 40px">
  120.                                     <%# Eval("FormDescription") %>
  121.                                 </div>
  122.                             </li>
  123.                         </ItemTemplate>
  124.                         <FooterTemplate>
  125.                             </ul></FooterTemplate>
  126.                     </asp:Repeater>
  127.                 </div>
  128.             </ItemTemplate>
  129.         </asp:Repeater>
  130.     </div>
  131. </body>
  132. </html>
  1. 开始的时候，看起来不错

.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; }

但只要缩放几次，就会出现下面这样的情况

发现了吗，div的高度会缩小，然后出现滚动条。而且更加神奇的是，它会逐渐变小，小到一定程度之后，又会还原。

尝试过他所有的参数，也没有找到很好的方法，实在也是不解，难道这么明显的问题别人就没有遇到过。

我的解决方法倒也干脆，既然不好用，那就自己动手写一个，其实也没有什么大不了的。当然，我写的这个和accordion不完全一样，但更符合我自己的需要，而且简便易行

脚本代码

  1. /// 这个脚本用来处理所有的widget行为。
  2. /// 作者：陈希章
  3.  
  4. $(function() {
  5.  
  6.     $("div.widget").each(function() {
  7.         var w = $(this);
  8.         var d = w.find("div.details");
  9.         var h = parseInt(d.attr("offsetHeight")) + 10;
  10.         d.css("height", h);
  11.  
  12.         var autoOpen = w.attr("autoOpen");
  13.         if (autoOpen != null && autoOpen == "false") {
  14.             d.fadeOut("fast");
  15.             //只有明确地设置了不自动打开，才隐藏起来
  16.         }
  17.         else {
  18.             //如果设置了一个action，表示要异步加载
  19.             var a = d.attr("action");
  20.             if (a != null) {
  21.                 d.empty();
  22.                 $("<img src='images/loading.gif' />").appendTo(d);
  23.                 d.load(a);
  24.             }
  25.         }
  26.     });
  27.  
  28.     $("div.widget>div.title").click(function() {
  29.         var t = $(this);
  30.         var d = t.next("div.details");
  31.         t.children(".icon").toggleClass("icon2");
  32.  
  33.         var display = d.css("display");
  34.         if (display == "none") {
  35.             d.fadeIn("slow", function() {
  36.                 var a = d.attr("action");
  37.                 if (a != null) {
  38.                     d.empty();
  39.                     $("<img src='images/loading.gif' />").appendTo(d);
  40.                     d.load(a);
  41.                 }
  42.             });
  43.         }
  44.         else
  45.             d.fadeOut("fast");
  46.  
  47.     });
  48. });
  1.  
  1.  
  1. 页面代码
  1. <%@ Page Language="C#" %>
  2.  
  3. <%@ Import Namespace="System.Linq" %>
  4. <%@ Import Namespace="System.Xml.Linq" %>
  5.  
  6. <script runat="server">
  7.     protected override void OnPreInit(EventArgs e)
  8.     {
  9.         rp.ItemDataBound += new RepeaterItemEventHandler(rp_ItemDataBound);
  10.     }
  11.  
  12.     void rp_ItemDataBound(object sender, RepeaterItemEventArgs e)
  13.     {
  14.         Label lb = e.Item.FindControl("categoryId") as Label;
  15.         if (lb != null)
  16.         {
  17.             string id = lb.Text;
  18.             var forms = from x in config.Root.Descendants("Form")
  19.                         where x.Attribute("CategoryId").Value == id
  20.                         select new
  21.                         {
  22.                             FormTitle = x.Attribute("Title").Value,
  23.                             FormDescription = x.Attribute("Description").Value,
  24.                             Url = x.Attribute("Url").Value,
  25.                             Icon = "Forms/Icons/" + x.Attribute("Icon").Value
  26.                         };
  27.  
  28.             Repeater temp = e.Item.FindControl("rp_forms") as Repeater;
  29.             temp.DataSource = forms;
  30.             temp.DataBind();
  31.  
  32.         }
  33.     }
  34.  
  35.     protected override void OnLoad(EventArgs e)
  36.     {
  37.         if (!IsPostBack)
  38.             DataBind();
  39.  
  40.     }
  41.  
  42.     private XDocument config = null;
  43.  
  44.     public override void DataBind()
  45.     {
  46.         //先读取分类数据
  47.         config = XDocument.Load(Server.MapPath("Forms/Forms.xml"));
  48.         var categories = from x in config.Root.Descendants("Category")
  49.                          orderby x.Attribute("Id").Value
  50.                          select new
  51.                          {
  52.                              Title = x.Attribute("Title").Value,
  53.                              Id = x.Attribute("Id").Value,
  54.                              Description = x.Attribute("Description").Value
  55.                          };
  56.         rp.DataSource = categories;
  57.         rp.DataBind();
  58.  
  59.     }
  60.  
  61. </script>
  62.  
  63. <html>
  64. <head id="Head1" runat="server">
  65.  
  66.     <script src="jquery-1.3.2-vsdoc.js" type="text/javascript"></script>
  67.     <script src="widget.js" type="text/javascript"></script>
  68.     <link href="Style/Widget.css" rel="stylesheet" type="text/css" />
  69.     <style type="text/css">
  70.         li.formli
  71.         {
  72.             list-style-type: none;
  73.             width: 300px;
  74.             float: left;
  75.         }
  76.         li.formli img
  77.         {
  78.             border: none;
  79.         }
  80.     </style>
  81. </head>
  82. <body>
  83.     <h2>
  84.         表单中心</h2>
  85.     <p>
  86.         这里将列出了所有的表单，您可以通过这里进行表单填写</p>
  87.     <div id="formscontainer">
  88.         <asp:Repeater ID="rp" runat="server">
  89.             <ItemTemplate>
  90.                 <div class="widget">
  91.                     <div class="title">
  92.                         <div class="icon">
  93.                         </div>
  94.                         <h3>
  95.                             <%# Eval("Title") %>
  96.                             <asp:Label ID="categoryId" runat="server" Text='<%# Eval("Id") %>' Visible="false"></asp:Label>
  97.                         </h3>
  98.                     </div>
  99.                     <div class="details">
  100.                         <asp:Repeater ID="rp_forms" runat="server">
  101.                             <HeaderTemplate>
  102.                                 <ul>
  103.                             </HeaderTemplate>
  104.                             <ItemTemplate>
  105.                                 <li class="formli">
  106.                                     <img src='<%# Eval("Icon") %>' />
  107.                                     <a href='<%# Eval("Url") %>'>
  108.                                         <%# Eval("FormTitle") %>
  109.                                     </a>
  110.                                     <div style="padding-left:40px">
  111.                                         <%# Eval("FormDescription") %>
  112.                                     </div>
  113.                                 </li>
  114.                             </ItemTemplate>
  115.                             <FooterTemplate>
  116.                                 </ul></FooterTemplate>
  117.                         </asp:Repeater>
  118.                     </div>
  119.                 </div>
  120.             </ItemTemplate>
  121.         </asp:Repeater>
  122.     </div>
  123.     <div class="widget" autoOpen="false">
  124.         <div class="title">
  125.             <div class="icon">
  126.             </div>
  127.             <h3>
  128.             异步加载的内容
  129.             </h3>
  130.         </div>
  131.         <div class="details" action="AsyncDataPage.aspx">
  132.         </div>
  133.     </div>
  134. </body>
  135. </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; }

页面效果


.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; }

点击“异步加载的内容”

jquery ui中 accordion的问题及我的解决方法的更多相关文章

  1. jquery ui中的dialog，官网上经典的例子

    jquery ui中的dialog,官网上经典的例子   jquery ui中dialog和easy ui中的dialog很像,但是最近用到的时候全然没有印象,一段时间不用就忘记了,这篇随笔介绍一下这 ...

  2. JQuery UI中的Tabs与base元素摩擦的BUG

    JQuery UI中的Tabs与base元素冲突的BUG 以前一直使用jquery-ui-1.8,最近打算试一下目前最新的版本1.11.但对于Tabs,页面是乱的,怎么也不正常.折腾了好几个小时,最后 ...

  3. ASP.NET MVC中对Model进行分步验证的解决方法

    原文:ASP.NET MVC中对Model进行分步验证的解决方法 在我之前的文章:ASP.NET MVC2.0结合WF4.0实现用户多步注册流程中将一个用户的注册分成了四步,而这四个步骤都是在完善一个 ...

  4. 如何自定义JSTL标签与SpringMVC 标签的属性中套JSTL标签报错的解决方法

    如何自定义JSTL标签 1.创建一个类,从SimpleTagSupport继承 A) 通过继承可以获得当前JSP页面上的对象,如JspContext I) 实际上可以强转为PageContext II ...

  5. WAMP中phpMyAdmin登陆不了问题的解决方法

    WAMP中phpMyAdmin登陆不了问题的解决方法

  6. [转载][jQuery] Cannot read property ‘msie’ of undefined错误的解决方法

    参考 [jQuery] Cannot read property ‘msie’ of undefined错误的解决方法 ---------------------------------------- ...

  7. 问题-[Access]“无法打开工作组信息文件中的表 'MSysAccounts'”的问题的解决方法

    问题现象:ado.net oledb方式访问Access数据库文件时报错“无法打开工作组信息文件中的表 'MSysAccounts'”的问题的解决方法  问题处理:1.数据库名称不能命名为:Syste ...

  8. [jQuery] Cannot read property ‘msie’ of undefined错误的解决方法

    最近把一个项目的jQuery升级到最新版,发现有些页面报错Cannot read property ‘msie’ of undefined.上jQuery网站上搜了一下,原因是$.browser这个a ...

  9. jquery升级到新版本报错[jQuery] Cannot read property ‘msie’ of undefined错误的解决方法(转)

    最近把一个项目的jQuery升级到最新版,发现有些页面报错Cannot read property 'msie' of undefined.上jQuery网站上搜了一下,原因是$.browser这个a ...

随机推荐

  1. check————身份证

    -- Access 不支持 Substring 查询,可以替换为 mid 查询. select 序号,姓名,身份证号,性别from 身份表where (len(身份证号)<>15 and ...

  2. 【linux】开发环境说明

    欢迎转载,转载时请保留作者信息,谢谢. 邮箱:tangzhongp@163.com 博客园地址:http://www.cnblogs.com/embedded-tzp Csdn博客地址:http:// ...

  3. Eclipse用法和技巧十：显示代码outline

    在一个文件中快速找到某一个方法或者某一个作用域,可以使用 Ctrl+O或者Ctrl+F3,快速显示当前代码的outline,进行快速查找.效果如下:        这里主要是补充一些后续操作,能更加方 ...

  4. Nginx 负载均衡配置和策略

    Nginx 的 HttpUpstreamModule 提供对后端(backend)server的简单负载均衡.一个最简单的 upstream 写法例如以下: upstream backend { se ...

  5. 10个优秀的 HTML5 &amp; CSS3 下拉菜单制作教程

    下拉菜单是一个非经常见的效果.在站点设计中被广泛使用.通过使用下拉菜单.设计者不仅能够在站点设计中营造出色的视觉吸引力,但也能够为站点提供了一个有效的导航方案.使用 HTML5 和 CSS3 能够更e ...

  6. Selenium Webdriver firefox 浏览器问题

    Selenium Webdriver 在使用firefox 测试会牵扯到firefox的安装路径的问题 1.默认安装路径在c盘的情况下: WebDriver driver = new FirefoxD ...

  7. bestcoder.hdu.edu.cn

    http://bestcoder.hdu.edu.cn/ Problem A 题目链接: http://bestcoder.hdu.edu.cn/contests/contest_showproble ...

  8. Win32环境下的程序崩溃异常定位

    1       案例描述 作为Windows程序员,平时最担心见到的事情可能就是程序发生了崩溃(异常),这时Windows会提示该程序执行了非法操作,即将关闭.请与您的供应商联系.呵呵,这句微软的“名 ...

  9. Eclipse代码字体、颜色美化，更改字体大小、颜色

    先看效果: 感觉如何,是否比你的eclipse编辑器显示的代码要漂亮简洁呢?呵呵.这个是我原来ADT Eclipse的效果,现在去下居然更新掉了,找不到了.于是我就参照我原来的配置对这个新的Eclip ...

  10. 在ListView中实现排序

    此处介绍的情境是: (1)使用table布局ListView. (2)ListView的数据源是List<T>. (3)排序字段2个(帖子的回复次数和浏览次数),都是int类型. 基本思路 ...