jQuery EasyUI Panel面板组件使用详解

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面板组件