现在的位置: 首页 > easyui > Layout > panel > 正文
jQuery Easyui 源码分析之panel组件(未完)
2014年04月02日 panel, 源码分析 ⁄ 共 3117字 评论数 8 ⁄ 被围观 15,151 views+
文章目录
[隐藏]

在jQuery EasyUI的几个布局组件中,panel组件是基石类组件,直接使用的比较少,但是像layout,accordion,tabs这样上层布局组件均完全依赖panel组件,即便是datagrid,combo等非布局类组件也对panel组件有一定程度的依赖。所以对panel组件的透彻理解程度,直接决定了各位对EasyUI的认识深度。本篇文章将就panel的DOM结构,实现思路等给出分析,最后也会给出一份加有详细注释的code。

panel在框架中位置

我依赖谁

panel组件是基石组件,不依赖任何组件,一笔雕凿吧……

谁依赖我

layout; accordion; combo; tabs; window.

panel组件dom结构

大家都知道,EasyUI的组件都是依赖某个dom生成的,一般我称这个dom为“宿主DOM”,那么panel组件基于宿主dom到底会生成怎样的一个复杂dom结构呢,我们来看看:

  1. <!-- panel组件最外层的容器,样式'panel'是固有的,'myCls'是利用'cls'属性定义的样式 -->
  2. <!-- 这个外层DIV容器没有任何特殊之处,block级元素,静态定位,是一个最普通的块级元素了 -->
  3. <div class="panel myCls">
  4. <!-- panel组件的header部分,'panel-header'是固有样式,'myHeaderCls'是利用'headerCls'属性定义的样式 -->
  5. <!-- header容器也是block级元素,不过其定位方式relative,即相对定位 -->
  6. <!-- 需要注意的是,如果'title'属性为空,panel组件是不会生成header部分的 -->
  7. <div class="panel-header myHeaderCls">
  8. <!-- 文字标题部分 -->
  9. <div class="panel-title panel-with-icon">面板标题</div>
  10. <!-- 用户自定义的工具列表,多个工具,会产生多个这样的DIV -->
  11. <div class="panel-icon icon-save"></div>
  12. <!-- 标题栏自带的工具列表,例如关闭,收起,展开,最小化,最大化这些按钮都在这个节点里面 -->
  13. <div class="panel-tool"></div>
  14. </div>
  15. <!-- panel组件的body部分,'panel-body'是固有样式,'myBodyCls'是利用'bodyCls'属性定义的样式 -->
  16. <!-- body容器也是block级元素,定位方式为静态定位 -->
  17. <!-- 需要注意的是,body容器是panel组件的宿主dom,panel组件的所有dom结构都是从这个节点延伸出去的 -->
  18. <div id="p" class="panel-body myBodyCls" style="width: 472px; height: 142px;" title="" data-options="iconCls:'icon-save'"></div>
  19. </div>

通过panel组件的dom结构,我们很容易看出来:jQuery EasyUI的panel组件实质就是一个默认为“静态块级元素”,其内部生成了“标题部”和“主体部分”,然后“标题部分”默认提供了一些如“最大化”、“最小化”、“展开”、“收起”、“关闭”等功能,而“主体部分”则纯粹是用于展示内容的一个静态块级元素。

panel组件的属性

id属性

该属性算是panel组件的唯一标识,不过并不是必须属性,默认值也是为null,这个属性跟宿主dom的id属性到底是什么关系,如果在"data-options"里面定义的id和宿主dom的id有冲突,最终又会怎么样?为此,我尝试了一下,得出这个结论:

1.宿主dom未定义id属性的话,使用data-options属性定义的id属性并不会写入到宿主dom中,不过通过panel的options方法获取到的id属性是data-options里面定义的id;

2.宿主dom定义id属性的话,使用data-options属性定义的id属性并不会改变宿主dom的id属性,通过panel的options方法获取到的id属性是宿主dom的id值。

title属性

该属性是panel组件的标题,没有什么不好理解的,用于显示在"header部分"的文字标题标题里。值得注意的是,不设置title属性或者title为空的话,panel组件将不会拼装“header部分”。

那么会不会有时候我们不想要文字标题,但是又想要"header部分"的工具条呢?岂不是矛盾了,没关系,设置title为一个空格字符串就可以了,哈哈,猥琐的一笔啊。

iconCls属性

该属性是用于定义panel组件header部分文字标题前要显示的小图标的,图标大小为16x16,引用的样式一般定义在"themes/icon.css"文件里面。

width属性

该属性用于定义"panel组件DOM结构"最外层容器的宽度,对应于“panel组件dom结构”一节的:

  1. <div class="panel myCls">...</div>

需要注意的是,这里的宽度是指box模型里面的:
“左边距 + 左边框 + 左补白 + 宽度 + 左补白 + 左边框 + 左边距”

height属性

该属性用于定义"panel组件DOM结构"最外层容器的高度,类似于width属性,其是指:
“上边距 + 上边框 + 上补白 + 宽度 + 下补白 + 下边框 + 下边距”

left属性

该属性用于定义"panel组件DOM结构"最外层容器css属性里的left值,例如我定义了left属性为100的话,panel组件最外层容器将会产生以下style属性:

...

css里面的left属性到底什么时候才会起作用,请各位看官好好去查查资料,针对静态定位,相对定位,绝对定位三种典型,left和top是如何表现的。

这里我多嘴一下,当css的position属性没有指定或者为"static"的时候,left和top的设置都是不起作用的。而默认的panel最外层容器,恰恰未定义position,也就是说默认情况下,你再怎么设置panel组件的left和top值也不会发生任何偏移的。

关于left和top的话,我似乎说多了,实在不是EasyUI的范畴,只是有很多同学经常会问这个问题,所以提出来说一下,希望以后问这种傻乎乎的问题的人能越来越少……

top属性

该属性用于定义"panel组件DOM结构"最外层容器css属性里的top值,跟left属性基本雷同了,这里就不吐重复的口水了。请大家细读“left属性”一节。

cls属性

该属性用于给"panel组件DOM结构"最外层容器的class属性增加一个样式,注意只是增加,并不覆盖原有样式,比如在前面的panel组件dom结构中,我们就是定义了cls属性值为myCls,当然了,你必须定义myCls样式才会有意义。

headerCls属性

跟cls属性类似,该属性用于给"panel组件DOM结构"header部对应分容器的class属性增加一个样式,也只是增加,比如在前面的panel组件dom结构中,我们就是定义了headerCls属性值为myHeaderCls。

bodyCls属性

跟cls属性类似,该属性用于给"panel组件DOM结构"body部分对应容器的class属性增加一个样式,也只是增加,比如在前面的panel组件dom结构中,我们就是定义了bodyCls属性值为myBodyCls。

style属性
fit属性

目前有 8 条留言 其中:访客:4 条, 博主:3 条 引用: 1

  1. 英子 : 2014年04月22日08:58:47  -49楼 @回复 回复

给我留言

留言无头像?


×