在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结构呢，我们来看看：
- <!-- panel组件最外层的容器，样式'panel'是固有的，'myCls'是利用'cls'属性定义的样式 -->
- <!-- 这个外层DIV容器没有任何特殊之处，block级元素，静态定位，是一个最普通的块级元素了 -->
- <div class="panel myCls">
- <!-- panel组件的header部分，'panel-header'是固有样式，'myHeaderCls'是利用'headerCls'属性定义的样式 -->
- <!-- header容器也是block级元素，不过其定位方式relative，即相对定位 -->
- <!-- 需要注意的是，如果'title'属性为空，panel组件是不会生成header部分的 -->
- <div class="panel-header myHeaderCls">
- <!-- 文字标题部分 -->
- <div class="panel-title panel-with-icon">面板标题</div>
- <!-- 用户自定义的工具列表，多个工具，会产生多个这样的DIV -->
- <div class="panel-icon icon-save"></div>
- <!-- 标题栏自带的工具列表，例如关闭，收起，展开，最小化，最大化这些按钮都在这个节点里面 -->
- <div class="panel-tool"></div>
- </div>
- <!-- panel组件的body部分，'panel-body'是固有样式，'myBodyCls'是利用'bodyCls'属性定义的样式 -->
- <!-- body容器也是block级元素，定位方式为静态定位 -->
- <!-- 需要注意的是，body容器是panel组件的宿主dom，panel组件的所有dom结构都是从这个节点延伸出去的 -->
- <div id="p" class="panel-body myBodyCls" style="width: 472px; height: 142px;" title="" data-options="iconCls:'icon-save'"></div>
- </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结构”一节的：
- <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。
管理员 世纪之光 : 2014年04月22日19:25:49 地下1层
管理员 世纪之光 : 2014年04月23日13:30:40 地下3层
管理员 世纪之光 : 2014年04月23日19:11:52 地下5层