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 相关文章推荐
Javascript 获取字符串字节数的多种方法
Jun 02 Javascript
JavaScript 设计模式之组合模式解析
Apr 09 Javascript
在JS中最常看到切最容易迷惑的语法(转)
Oct 29 Javascript
jqPlot 图表中文API使用文档及源码和在线示例
Feb 07 Javascript
Egret引擎开发指南之发布项目
Sep 03 Javascript
jQuery继承extend用法详解
Oct 10 Javascript
jquery心形点赞关注效果的简单实现
Nov 14 Javascript
canvas知识总结
Jan 25 Javascript
Bootstrap Table 删除和批量删除
Sep 22 Javascript
解决VUE中document.body.scrollTop为0的问题
Sep 15 Javascript
vue router总结 $router和$route及router与 router与route区别
Jul 05 Javascript
JS面向对象编程——ES6 中class的继承用法详解
Mar 03 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注入实例
2006/10/09 PHP
PHP 关于访问控制的和运算符优先级介绍
2013/07/08 PHP
php+mysql不用递归实现的无限级分类实例(非递归)
2014/07/08 PHP
PHP获取一段文本显示点阵宽度和高度的方法
2015/03/12 PHP
php生成验证码函数
2015/10/20 PHP
Symfony2在Nginx下的配置方法图文教程
2016/02/04 PHP
Javascript Global对象
2009/08/13 Javascript
asp.net+jquery滚动滚动条加载数据的下拉控件
2010/06/25 Javascript
JS实现图片无间断滚动代码汇总
2014/07/30 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
2016/09/16 Javascript
javascript观察者模式实现自动刷新效果
2017/09/05 Javascript
Vue2.0用户权限控制解决方案的示例
2018/02/10 Javascript
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
2018/05/26 Javascript
Redux实现组合计数器的示例代码
2018/07/04 Javascript
如何让node运行es6模块文件及其原理详解
2018/12/11 Javascript
vue iview多张图片大图预览、缩放翻转
2019/07/13 Javascript
微信小程序canvas截取任意形状的实现代码
2020/01/13 Javascript
Js实现粘贴上传图片的原理及示例
2020/12/09 Javascript
[40:55]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#4Newbee VS Fnatic
2016/03/03 DOTA
[54:41]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VGJ.T VS paiN
2018/03/31 DOTA
python基于socket实现网络广播的方法
2015/04/29 Python
python进行TCP端口扫描的实现
2018/12/21 Python
python PyQt5/Pyside2 按钮右击菜单实例代码
2019/08/17 Python
python 实现仿微信聊天时间格式化显示的代码
2020/04/17 Python
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
2019/01/17 HTML / CSS
CSS3实现图片抽屉式效果的示例代码
2019/11/06 HTML / CSS
Nice Kicks网上商店:ShopNiceKicks.com
2018/12/25 全球购物
英国羊皮鞋类领先品牌:Just Sheepskin
2019/12/12 全球购物
德国高尔夫商店:Par71.de
2020/11/29 全球购物
污水厂厂长岗位职责
2014/01/04 职场文书
厨房领班竞聘演讲稿
2014/04/23 职场文书
项目负责人任命书
2014/06/04 职场文书
2015年党支部公开承诺书
2015/01/22 职场文书
2015年中职班主任工作总结
2015/05/25 职场文书
小学生大队委竞选稿
2015/11/20 职场文书
python自动化调用百度api解决验证码
2021/04/13 Python