1、Panel创建第一种方式(div直接添加class="easyui-panel"):
<div id="p" class="easyui-panel" title="My Panel" style="width:500px;height:150px;padding:10px;background:#fafafa;" data-options="iconCls:'icon-save',closable:true, collapsible:true,minimizable:true,maximizable:true"> <p>panel content.</p> <p>panel content.</p> </div>
效果图:http://sandbox.runjs.cn/show/xnlogyo5
2、Panel创建第二种方式(js中初始化):
<div id="p" style="padding:10px;"> <p>panel content.</p> <p>panel content.</p> </div>
$(function(){ $('#p').panel({ width:500, height:150, title: '我的面板', tools: [{ iconCls:'icon-add', handler:function(){ alert("点击添加按钮"); } },{ iconCls:'icon-save', handler:function(){ alert("点击保存按钮"); } }] }); });
效果图: http://sandbox.runjs.cn/show/7esvbnlk
3、常用属性:
<div id="p" class="easyui-panel" style="width:500px;height:300px" title="我的面板" data-options="iconCls:'icon-ok',closable:true,collapsible:true,maximized:false,loadingMessage:'正在load你妹!'"> </div> <input type="button" value="click" onclick="javascript:clickMe()"/>
function clickMe(){ $('#p').panel({ href:'/js/sandbox/jquery-easyui/jquery.easyui.min.js', onLoad:function(){ alert('loaded 你妹 successfully'); } }); }
效果图:http://sandbox.runjs.cn/show/fkjnat5l
说明:
1)、tools:可用一个数组(每个元素包含按钮样式和它的处理方法)或已存在的div。 <div class="easyui-panel" style="width:300px;height:200px" title="My Panel" data-options="iconCls:'icon-ok',tools:[ { iconCls:'icon-add', handler:function(){alert('add')} },{ iconCls:'icon-edit', handler:function(){alert('edit')} }]"> </div> -------------------------------------------------------------------------------------- <div class="easyui-panel" style="width:300px;height:200px" title="My Panel" data-options="iconCls:'icon-ok',tools:'#tt'"> </div> <div id="tt"> <a href="#" class="icon-add" onclick="javascript:alert('add')"></a> <a href="#" class="icon-edit" onclick="javascript:alert('edit')"></a> </div> -------------------------------------------------------------------------------------- 2)、collapsed:panel初始化的时候是否缩放 3)、minimized、maximized、closed:初始化的时候是否最小化或最大化或关闭 4)、href:加载远程数据并显示在panel上,只有panel在open状态下才会加载 <div id="pp" class="easyui-panel" style="width:300px;height:200px" data-options="href='get_content.php',closed:true"> </div> <a href="#" onclick="javascript:$('#pp').panel('open')">Open</a> -------------------------------------------------------------------------------------- 5)、loadingMessage:加载数据时显示的提示信息 6)、collapsible、minimizable、maximizable、closable:是否显示缩放、最小化、最大化、关闭按钮 7)、noheader:是否不显示头部标题 8)、border:是否显示边框,boolean类型 9)、fit:自适应父类窗口尺寸 10)、title:panel标题
4、常用事件:
1)、onLoad:远程数据加载成功执行 2)、onOpen、onClose:面板被打开、关闭执行 3)、onCollapse、onExpand:面板缩放、展开执行 4)、onMaximize、onMinimize:面板最大化、最小化执行
<div id="p" class="easyui-panel" style="width:500px;height:300px;" title="我的面板" data-options="iconCls:'icon-ok',closable:true,collapsible:true,maximized:false,loadingMessage:'正在load你妹!',border:true,noheader:false,minimizable:true,maximizable:true, onOpen:function(){alert('面板打开啦!')}, onClose:function(){alert('面板被关闭了!')}, onCollapse:function(){alert('面板被缩放了!')}, onExpand:function(){alert('面板被展开了!')}"> </div>
效果图:http://sandbox.runjs.cn/show/6xffeimt
5、常用方法:
(未完待续...)