panel面板组件,跟前面的组件用法几乎都差不多，也是从设置一些面板属性、操作面板触发的事件、我们可针对面板对象的操作方法这三个点去学习。
后面有一些组件要依赖于这个组件。
还有一点跟前面不同的就是面板内容可以请求远程数据。
示例：
<!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script> <link rel="stylesheet" type="text/css" href="easyui/themes/bootstrap/panel.css" rel="external nofollow" /> <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" rel="external nofollow" /> <script> $(function () { //属性列表 $('#box').panel({ id : 'box', //面板的ID值 默认为null title : '我是一个面板', //面板显示的标题文本，默认为null width : 500, //面板宽度 默认为auto height : 150, //面板高度 默认为auto iconCls : 'icon-add', //面板左上角的一个图标,可去css样式中自定义图标文件，默认为null //left : 100, //设置面板距离左边的距离 默认为null //top : 100, //设置面板距离上边的距离 默认为null cls : 'a', //添加一个CSS 类ID 到面板。默认为null。 headerCls : 'b', //参数为css类 定义面板头部样式 默认null bodyCls : 'c', //参数为css类 定义面板正文样式 默认null //面板样式 style : { 'min-height' : '200px', }, //fit : true, //默认为false，含义是面板大小是否自适应父容器 //border : false, //默认为true 定义是否显示面板边框 //doSize : false, //noheader : true, //默认为false，当设置为true，在创建面板的时候不会创建标题 content : '<strong>面板主体内容</strong>', //面板主体内容 默认为null collapsible : true, //是否显示可折叠按钮 默认为false minimizable : true, //是否显示最小化按钮 默认false maximizable : true, //是否显示最大化按钮 默认false closable : true, //是否定义关闭按钮 默认false tools : '#tt', //定义工具菜单，有两种方式，一种是下面那个数组方式，另一种指向定义好的菜单 /* tools : [{ iconCls : 'icon-help', //图标 handler : function () { //点击触发函数 alert('help'); }, },{ }], */ //collapsed : true, //是否在初始化的时候折叠面板 //minimized : true, //是否在初始化的时候最小化面板 //maximized : true, //是否在初始化的时候最大化面板 //closed : true, //是否在初始化的时候关闭面板，这个属性什么时候能用到？ //href : 'haicheng_demo/panel', //远程请求数据（ajax请求，不能跨域） //loadingMessage : '正在努力加载中...', //正在加载远程数据的时候，在面板内显示的信息,默认loading... //cache:false, //如果为true，在超链接载入时缓存面板内容。默认为true。 /** *对ajax远程请求回来的数据进行处理，然后return到面板上 * extractor : function (data) { return data+"</br>--2014.08.18"; } */ //触发事件列表： /* onBeforeLoad : function () { alert('远程加载之前触发！'); return false; //取消远程加载 }, onLoad : function () { alert('远程加载之后触发！'); }, onBeforeOpen : function () { alert('打开之前触发！'); return false; //取消打开 }, onOpen : function () { alert('打开之后触发！'); }, onBeforeClose : function () { alert('关闭之前触发！'); return false; //取消关闭 }, onClose : function () { alert('关闭之后触发！'); }, onBeforeDestroy : function () { alert('销毁之前触发！'); //return false; //取消销毁 }, onDestroy : function () { alert('销毁之后触发！'); }, onBeforeCollapse : function () { alert('折叠之前触发！'); //return false; //取消折叠 }, onCollapse : function () { alert('折叠之后触发！'); }, onBeforeExpand : function () { alert('展开之前触发！'); //return false; //取消展开 }, onExpand : function () { alert('展开之后触发！'); }, onMaximize : function () { alert('窗口最大化时触发！'); }, onRestore : function () { alert('窗口还原时触发！'); }, onMinimize : function () { alert('窗口最小化时触发！'); }, onResize : function (width, height) { alert(width + '|' + height); }, onMove : function (left, top) { alert(left + '|' + top); } */ //onBeforeOpen : function () { // alert('打开之前触发！'); //return false; //取消打开 //}, }); //方法列表 //$('#box').panel('panel').css('position', 'absolute'); //$('#box').panel('destroy'); /* $(document).click(function () { $('#box').panel('resize', { 'width' : 600, 'height' : 300, }); }); $(document).click(function () { $('#box').panel('move', { 'left' : 600, 'top' : 300, }); }); */ //console.log($('#box').panel('options')); //console.log($('#box').panel('panel')); //console.log($('#box').panel('header')); //console.log($('#box').panel('body')); //$('#box').panel('setTitle', '标题'); //$('#box').panel('open', true); //$('#box').panel('close'); //$('#box').panel('destroy'); //$('#box').panel('maximize'); //$('#box').panel('restore'); //$('#box').panel('minimize'); //$('#box').panel('collapse'); //$('#box').panel('expand'); }); </script> </head> <body> <!-- <div class="easyui-panel" data-options="closable:true" title="面板" style="width:500px;"> <p>内容区域</p> </div> --> <div id="box"> <p>内容区域</p> </div> <div id="tt"> <a class="icon-add" onclick="javascript:alert('add')"> </a> <a class="icon-edit" onclick="javascript:alert('edit')"> </a> <a class="icon-cut" onclick="javascript:alert('cut')"> </a> </div> </body> </html>
其他地方不说了，就说一下那个href属性，我在实际学习的时候是基于一个SpringMVC框架写的例子。
后台代码：
@RequestMapping(value = "panel")
public ModelAndView panel(String _){
<span style="white-space:pre"> </span>System.out.println("****************进入后台*******************"+_);
<span style="white-space:pre"> </span>ModelAndView mv =new ModelAndView("/panelDemo/panelData.jsp");
<span style="white-space:pre"> </span>mv.addObject("data", "Hello Hirain!!!");
<span style="white-space:pre"> </span>return mv;
}
为什么我的后台方法多了个参数String _呢？是因为我看到它实际请求的时候在url后面自动拼上了一个参数_，后台不接收这个参数也一样。
panelData.jsp内代码就只有${data}
源码下载：jQuery EasyUI Panel面板组件
您可能感兴趣的文章:
- jquery滚动条插件jScrollPane的使用介绍
- Ajenti开源免费的服务器管理面板和Ajenti V虚拟主机面板及安装与使用详细教程
- 新版VPS主机管理面板WDCP安装及使用体验-国产简单易用型VPS面板
- 宝塔Linux面板之好用免费的中文Linux VPS主机控制面板适合快速建站
- 宝塔Linux面板 2.8.9稳定版介绍
- jQuery EasyUI Accordion可伸缩面板组件使用详解
- Java常用面板之JScrollPane滚动面板实例详解
