网站前端_EasyUI.基础入门.0002.带你玩转jQuery EasyUI Panel组件 ?

简单介绍:

---

说明: Panel面板常当作其它内容的容器,可用于创建包含Layout布局/Tabs选项卡/Accordion折叠面板等基础组件,还提供了内置的折叠/关闭/最大化/最小化的行为,你可以将它嵌入到网页的任何位置.

基础用法:

---

    
面板-内容

---

异步加载:

---

    var options = {         width:500,         height:150,         iconCls:'icon-ok',         title:'面板 - 标题',         closable: true,         href: '/easyui/data.json',         cache: false,         onLoad: function(){             alert('notice: load remove data success!');         }     };     $('#p').panel(options);

---

容器属性:

---

id -> string

说明: 面板的id属性

title -> string

说明: 显示在面板头部的标题文字

iconCls -> string

说明: 在面板显示一个16*16图标Css Class

width -> number

说明: 设置面板宽度

height -> number

说明: 设置面板高度

left -> number

说明: 设置面板的Left位置

top -> number

说明: 设置面板的Top位置

content -> string

说明: 面板的主体内容

---

---

cls -> string

说明: 给面板添加一个Css Class

headerCls -> string

说明: 给面板头部添加一个Css Class

bodyCls -> string

说明: 给面板主体添加一个Css Class

style -> object

说明: 给面板添加一个自定义格式样式

---

---

注意: 在data-options中使用style属性其实是应用在整个panel上,且写法必须是style:{padding: 10},而单独使用标签的style内联样式竟然应用在panel-body上,这个还是挺有意思~

collapsiable -> boolean

说明: 定义是否显示折叠按钮

minimizable -> boolean

说明: 定义是否显示最小化按钮

maximizable -> boolean

说明: 定义是否显示最大化按钮

closable -> boolean

说明: 定义是否显示关闭按钮

---