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 相关文章推荐
jWiard 基于JQuery的强大的向导控件介绍
Oct 28 Javascript
深入理解javascript学习笔记(一) 编写高质量代码
Aug 09 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
Sep 29 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
May 05 Javascript
javascript实现unicode与ASCII相互转换的方法
Dec 10 Javascript
jQuery+formdata实现上传进度特效遇到的问题
Feb 24 Javascript
JavaScript性能优化总结之加载与执行
Aug 11 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
Feb 14 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
Apr 14 Javascript
Node.js原生api搭建web服务器的方法步骤
Feb 15 Javascript
微信小程序性能优化之checkSession的使用
Mar 06 Javascript
如何利用React实现图片识别App
Feb 18 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
浅谈apache和nginx的rewrite的区别
2013/02/22 PHP
thinkPHP5.1框架使用SemanticUI实现分页功能示例
2019/08/03 PHP
Laravel 关联模型-关联新增和关联更新的方法
2019/10/10 PHP
使用IE的地址栏来辅助调试Web页脚本
2007/03/08 Javascript
Javascript将string类型转换int类型
2010/12/09 Javascript
jquery实现弹出窗口效果的实例代码
2013/11/28 Javascript
jQery使网页在显示器上居中显示适用于任何分辨率
2014/06/09 Javascript
如何利用Promises编写更优雅的JavaScript代码
2016/05/17 Javascript
AngularJS入门教程之过滤器详解
2016/08/19 Javascript
基于JavaScript实现复选框的全选和取消全选
2017/02/09 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
2018/12/11 Javascript
vue动态设置路由权限的主要思路
2021/01/13 Vue.js
[01:02:10]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第一局
2016/02/26 DOTA
[01:32]2016国际邀请赛中国区预选赛IG战队首日赛后采访
2016/06/27 DOTA
[51:17]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
Python的Django框架中URLconf相关的一些技巧整理
2015/07/18 Python
Python编程之基于概率论的分类方法:朴素贝叶斯
2017/11/11 Python
一百多行python代码实现抢票助手
2018/09/25 Python
python 重命名轴索引的方法
2018/11/10 Python
Python3转换html到pdf的不同解决方案
2019/03/11 Python
python元组和字典的内建函数实例详解
2019/10/22 Python
python Shapely使用指南详解
2020/02/18 Python
django的autoreload机制实现
2020/06/03 Python
Django 构建模板form表单的两种方法
2020/06/14 Python
python3.7调试的实例方法
2020/07/21 Python
Pycharm快捷键配置详细整理
2020/10/13 Python
几个解决兼容IE6\7\8不支持html5标签的几个方法
2013/01/07 HTML / CSS
巴西宠物店在线:Geração Pet
2017/05/31 全球购物
英国露营设备和户外服装购物网站:Simply Hike
2019/05/05 全球购物
毕业自我鉴定怎么写
2014/03/25 职场文书
竞选班干部演讲稿
2014/04/24 职场文书
体育节口号
2014/06/19 职场文书
应届生自荐书
2014/06/23 职场文书
交通事故委托书范本
2014/09/28 职场文书
党支部季度考核意见
2015/06/02 职场文书
公司管理建议书
2015/09/14 职场文书