jQuery EasyUI Panel面板组件使用详解


Posted in Javascript onFebruary 28, 2017

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

Javascript 相关文章推荐
js 获取中文拼音,Select自动匹配字母获取值的代码
Sep 23 Javascript
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
Feb 03 Javascript
使用javascript创建快捷方式的简单实例
Aug 09 Javascript
分享15个大家都熟知的jquery小技巧
Dec 02 Javascript
jQuery动画效果相关方法实例分析
Dec 31 Javascript
JavaScript驾驭网页-获取网页元素
Mar 24 Javascript
jQuery树形插件jquery.simpleTree.js用法分析
Sep 05 Javascript
AngularJS表单提交实例详解
Feb 18 Javascript
深入理解vue-router之keep-alive
Aug 31 Javascript
Angular2+如何去除url中的#号详解
Dec 20 Javascript
微信小程序仿RadioGroup改变样式的处理方案
Jul 13 Javascript
详解基于原生JS验证表单组件xy-form
Aug 20 Javascript
AngularJS constant和value区别详解
Feb 28 #Javascript
微信小程序左右滑动切换页面详解及实例代码
Feb 28 #Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
Feb 28 #Javascript
Vue.js父与子组件之间传参示例
Feb 28 #Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
Feb 28 #Javascript
JS对象创建的几种方式整理
Feb 28 #Javascript
js仿淘宝评价评分功能
Feb 28 #Javascript
You might like
PHP自定义函数收代码
2010/08/01 PHP
PHP 使用pcntl和libevent 实现Timer功能
2013/10/27 PHP
两千行代码的PHP学习笔记汇总
2014/10/05 PHP
php实现parent调用父类的构造方法与被覆写的方法
2015/02/11 PHP
php给图片添加文字水印方法汇总
2015/08/27 PHP
smarty高级特性之过滤器的使用方法
2015/12/25 PHP
PHP实现带进度条的Ajax文件上传功能示例
2019/07/02 PHP
实现复选框全选/全不选切换
2006/12/23 Javascript
JavaScript中数组对象的那些自带方法介绍
2013/03/12 Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
2013/05/08 Javascript
jquery插件corner实现圆角边框的方法
2015/03/09 Javascript
jQuery标签编辑插件Tagit使用指南
2015/04/21 Javascript
AngularJS进行性能调优的7个建议
2015/12/28 Javascript
深入浅析JavaScript中数据共享和数据传递
2016/04/25 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
2017/02/07 Javascript
详解使用webpack构建多页面应用
2017/12/21 Javascript
Vue.js实现可排序的表格组件功能示例
2019/02/19 Javascript
基于Fixed定位的框选功能的实现代码
2019/05/13 Javascript
jQuery轮播图功能制作方法详解
2019/12/03 jQuery
js中script的上下放置区别,Dom的增删改创建操作实例分析
2019/12/16 Javascript
在Python中使用cookielib和urllib2配合PyQuery抓取网页信息
2015/04/25 Python
Python网络编程之TCP套接字简单用法示例
2018/04/09 Python
python框架中flask知识点总结
2018/08/17 Python
解决python super()调用多重继承函数的问题
2019/06/26 Python
基于python3抓取pinpoint应用信息入库
2020/01/08 Python
Python使用进程Process模块管理资源
2020/03/05 Python
html5 video全屏播放/自动播放的实现示例
2020/08/06 HTML / CSS
美国皮靴公司自1863年:The Frye Company
2016/11/30 全球购物
你所在的项目是如何确定版本号的
2015/12/28 面试题
J2EE中常用的名词进行解释
2015/11/09 面试题
员工考核评语大全
2014/04/26 职场文书
大学奖学金获奖感言
2014/08/15 职场文书
个人租房协议书范本
2014/09/30 职场文书
北京英文导游词
2015/02/12 职场文书
雨雪天气温馨提示
2015/07/15 职场文书
护理工作心得体会
2016/01/22 职场文书