# 加载方式 ## Class加载 ``` <div style="width: 500px;" class="easyui-panel" title="我的面板"> <p>标题</p> </div> ```  ## JS调用加载 ``` <div id="box"> <p>标题</p> </div> <script> $(function () { $('#box').panel({ // 面板的 ID 值 id : 'pox', // 面板左上角的图标 iconCls:'icon-add', // 设置面板宽度 width:500, // 设置面板高度 heigth:400, // 设置面板距离左边的位置 left : 10000, // 设置面板距离顶部的位置 top: 200, // 添加一个 CSS 类 ID 到面板(往面板的class中加入 a) cls:'a', // 添加一个 CSS 类 ID 到面板头部 headerCls : 'b', // 添加一个 CSS 类 ID 到面板正文部分 bodyCls : 'c', // 添加一个当前指定样式到面板 style : { 'min-height' : '150px' }, // 当设置为true的时候面板大小将自适应父容器 fit : false, // 是否显示面板边框 border : true, // 面板显示的标题文本 title:'面板标题', // 如果设置为 true，在面板被创建的时候将重置大小和重新布局 doSize : true, // 是否创建面板标题 noheader : false, // 面板主体内容 content : '我是面板内容', // 是否显示可折叠按钮 collapsible : true, // 是否显示最小化按钮 minimizable : true, // 是否显示最大化按钮 maximizable : true, // 是否显示关闭按钮 closable : true, // 自定义工具菜单 tools : [{ iconCls:'icon-help', handler:function () { alert('help'); } },{ iconCls:'icon-edit', handler:function () { alert('edit'); } }], // 是否在初始化的时候折叠面板 collapsed : false, // 是否在初始化的时候最小化面板 minimized : false, // 是否在初始化的时候最大化面板 maximized : false, // 是否在初始化的时候关闭面板 closed : false, // 从 URL 读取远程数据并且显示到面板 href : 'mycontent.php', // 是否在超链接载入时缓存面板内容 cache : true, // 在加载远程数据的时候在面板内显示一条信息 loadingMessage : '正在加载中', //定义如何从 ajax 应答数据中提取内容，返回提取数据 extractor: function (data) { return data.substring(0,3); } }); }); </script> ```  # 属性列表 | 属性名 | 值 | 说明 | | --- | --- | | id | string | 面板的 ID 值。默认为 null。| | title | string | 面板显示的标题文本。默认为 null。| | iconCls | string| 设置一个 16x16 图标的 CSS 类 ID 显示在面板左上角。默认为 null。| | width | number | 设置面板宽度。默认值 auto。| | height | number | 设置面板高度。默认值 auto。| | left | number| 设置面板距离左边的位置（即 X 轴位置）。默认为null。| | top| number | 设置面板距离顶部的位置（即 Y 轴位置）。默认为null。| | cls| string | 添加一个 CSS 类 ID 到面板。默认为 null。| | headerCls| string | 添加一个 CSS 类 ID 到面板头部。默认为 null。| | bodyCls | string| 添加一个 CSS 类 ID 到面板正文部分。默认为null。| | style| subject | 添加一个当前指定样式到面板。默认为{}。| | fit | boolean| 当设置为true的时候面板大小将自适应父容器。默认为 false。| | border| boolean| 定义是否显示面板边框。默认为 true| | doSize | boolean| 如果设置为 true，在面板被创建的时候将重置大小和重新布局。默认为 true。| | noheader| boolean| 如果设置为 true。将不会创建面板标题。默认为false。| | content | string| 面板主体内容。默认为 null。| | collapsible | boolean| 定义是否显示可折叠按钮。默认为 false。| | minimizable| boolean | 定义是否显示最小化按钮。默认为 false。| | maximizable| boolean| 定义是否显示最大化按钮。默认为 false。| | closeable | boolean | 定义是否显示关闭按钮。| | tools| array,selector| 自定义工具菜单，可用值：1)数 组 ， 每 个 元 素 都 包 含 ’iconCls’和’handler’属性。2)指向工具菜单的选择器。默认为[]。| | collapsed| boolean| 定义是否在初始化的时候折叠面板。默认值为false。| | minimized| boolean| 定义是否在初始化的时候最小化面板。默认值为false。| | maximized | boolean| 定义是否在初始化的时候最大化面板。默认值为false。| | closed | boolean| 定义是否在初始化的时候关闭面板。默认为false。| | href | string| 从 URL 读取远程数据并且显示到面板。默认为null。| | cache| boolean| 如果为 true，在超链接载入时缓存面板内容。默认为 true。| | loadingMessage| string| 在加载远程数据的时候在面板内显示一条信息。默认值为 loading...。| | extractor| function| 定义如何从 ajax 应答数据中提取内容，返回提取数据。| # 事件列表 | 事件名 | 参数 | 说明 | | --- | --- | | onBeforeLoad | none | 在加载远程数据之前触发。| | onLoad | none | 在加载远程数据时触发。| | onBeforeOpen| none| 在打开面板之前触发，返回 false 可以取消打开操作。| | onOpen | none | 在打开面板之后触发。| | onBeforeClose | none| 在关闭面板之前触发，返回 false 可以取消关闭操作。| | onClose| none | 在面板关闭之后触发。| | onBeforeDestroy | none| 在面板销毁之前触发，返回 false 可以取消销毁操作。| | onDestroy | none| 在面板销毁之后触发。| | onBeforeCollapse| none| 在面板折叠之前触发，返回 false 可以终止折叠操作。| | onCollapse | none| 在面板折叠之后触发。| | onBeforeExpand | none| 在面板展开之前触发，返回 false 可以终止、展开操作。| | onExpand| none| 在面板展开之后触发。| | onResize| width,height| 在面板改变大小之后触发。width：新的宽度。height：新的高度。| | onMove | left,top| 在面板移动之后触发。left：新的左边距位置。top：新的上边距位置。| | onMaximize| none| 在窗口最大化之后触发。| | onRestore| none | 在窗口恢复到原始大小以后触发。| | onMinimize| none | 在窗口最小化之后触发。| # 方法列表 | 方法名 | 参数 | 说明 | | --- | --- | | options| none| 返回属性对象。| | panel | none | 返回面板对象。| | header| none| 返回面板头对象。| | body| none| 返回面板主体对象。| | setTitle| title | 设置面板头的标题文本。| | open| forceOpen| 在'forceOpen'参数设置为 true 的时候，打开面板时将跳过'onBeforeOpen'回调函数。| | close| forceClose| 在'forceClose'参数设置为 true 的时候，关闭面板时将跳过'onBeforeClose'回调函数。| | destroy | forceDestroy| 在'forceDestroy'参数设置为 true 的时候，销毁面板时将跳过'onBeforeDestory'回调函数。| | refresh | href| 刷新面板来装载远程数据。如果'href'属性有了新配置，它将重写旧的'href'属性。| | resize| options| 设置面板大小和布局。参数对象包含下列属性：width：新的面板宽度。height：新的面板高度。left：新的面板左边距位置。top：新的面板上边距位置。| | move | options| 移动面板到一个新位置。参数对象包含下列属性：left：新的左边距位置。top：新的上边| | maximize | none | 最大化面板到容器大小。| | minimize | none | 最小化面板。| | restore| none | 恢复最大化面板回到原来的大小和位置。| | collapse | animate | 折叠面板主题。| | expand| animate | 展开面板主体。| ``` //返回属性对象 console.log($('#box').panel('options')); //返回面板对象 console.log($('#box').panel('panel')); //返回面板头对象 console.log($('#box').panel('header')); //返回面板主体对象 console.log($('#box').panel('body')); //修改面板标题 $('#box').panel('setTitle', '修改') //跳过 onBeforeOpen 回调函数 $('#box').panel('open', true); //跳过 onBeforeClose 回调函数 $('#box').panel('close', true); //跳过 onBeforeDestroy 回调函数 $('#box').panel('close', true); //刷新当前内容 $('#box').panel('refresh'); //刷新指定载入内容 $('#box').panel('refresh', 'content.php'); //设置面板的大小和布局 $('#box').panel('resize', { width : 100, height : 100, left : 100, top : 100, }); //设置移动的坐标 $('#box').panel('move', { left : 100, top : 100, }); //设置面板最大化 $('#box').panel('maximize'); //设置面板最小化 $('#box').panel('minimize'); //设置恢复最大化面板到原始的大小和位置 $('#box').panel('restore'); //设置折叠面板 $('#box').panel('collapse'); //设置展开面板 $('#box').panel('expand'); //可以使用$.fn.panel.defaults 重写默认值对象。 $.fn.panel.defaults.border = false; ```