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 相关文章推荐
JQuery获取浏览器窗口内容部分高度的代码
Feb 24 Javascript
js实现拖拽效果(构造函数)
Dec 14 Javascript
基于JQuery实现图片上传预览与删除操作
May 24 Javascript
BootStrap中Datepicker控件带中文的js文件
Aug 10 Javascript
@ResponseBody 和 @RequestBody 注解的区别
Mar 08 Javascript
详谈js对url进行编码和解码(三种方式的区别)
Aug 16 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
Dec 22 Javascript
如何将HTML字符转换为DOM节点并动态添加到文档中详解
Aug 19 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
Nov 13 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
May 17 Javascript
微信小程序点击顶部导航栏切换样式代码实例
Nov 12 Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
Jan 21 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
PHPMailer安装方法及简单实例
2008/11/25 PHP
PHP file_get_contents函数读取远程数据超时的解决方法
2015/05/13 PHP
PHP创建文件,并向文件中写入数据,覆盖,追加的实现代码
2016/03/25 PHP
深入理解PHP中的empty和isset函数
2016/05/26 PHP
jquery easyui的tabs使用时的问题
2010/03/23 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
2012/12/04 Javascript
jquery模拟SELECT下拉框取值效果
2013/10/23 Javascript
返回上一页并自动刷新的JavaScript代码
2014/02/19 Javascript
javascript实现动态侧边栏代码
2014/02/19 Javascript
JavaScript中pop()方法的使用教程
2015/06/09 Javascript
详解angular2实现ng2-router 路由和嵌套路由
2017/03/24 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
2017/06/15 Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
2017/07/11 Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
2018/03/23 Javascript
node实现登录图片验证码的示例代码
2018/04/20 Javascript
JS的函数调用栈stack size的计算方法
2018/06/24 Javascript
ajaxfileupload.js实现上传文件功能
2019/04/19 Javascript
JavaScript实现单英文金山打字通
2020/07/24 Javascript
微信小程序拼接图片链接无底洞深入探究
2019/09/03 Javascript
浅谈Vue.use到底是什么鬼
2020/01/21 Javascript
[02:25]DOTA2英雄基础教程 熊战士
2014/01/03 DOTA
Python学习笔记之解析json的方法分析
2017/04/21 Python
python用BeautifulSoup库简单爬虫实例分析
2018/07/30 Python
解决python3运行selenium下HTMLTestRunner报错的问题
2018/12/27 Python
python可视化实现代码
2019/01/15 Python
pandas DataFrame索引行列的实现
2019/06/04 Python
Django REST framework 视图和路由详解
2019/07/19 Python
K最近邻算法(KNN)---sklearn+python实现方式
2020/02/24 Python
python实现Pyecharts实现动态地图(Map、Geo)
2020/03/25 Python
实现ECharts双Y轴左右刻度线一致的例子
2020/05/16 Python
基于python实现生成指定大小txt文档
2020/07/20 Python
Alpine安装Python3依赖出现的问题及解决方法
2020/12/25 Python
CSS3实战第一波 让我们尽情的圆角吧
2010/08/27 HTML / CSS
5分钟弄清楚html5的drag and drop(小结)
2019/04/10 HTML / CSS
社区优秀志愿者先进事迹
2014/05/09 职场文书
音乐课《小猫钓鱼》教学反思
2016/02/18 职场文书