首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

jQuery EasyUI Panel面板组件使用详解

- Author -

hai_cheng001

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
浅析JS中document对象的一些重要属性
Mar 06 Javascript
javascript判断office版本示例
Apr 11 Javascript
首页图片漂浮效果示例代码
Jun 05 Javascript
javascript实现点击提交按钮后显示loading的方法
Jul 03 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
Dec 14 Javascript
canvas实现图像放大镜
Feb 06 Javascript
js实现时间轴自动排列效果
Mar 09 Javascript
vue生成随机验证码的示例代码
Sep 29 Javascript
js数组常用最重要的方法
Feb 04 Javascript
jQuery实现表格隔行换色
Sep 01 jQuery
JS动画实现回调地狱promise的实例代码详解
Nov 08 Javascript
vue+moment实现倒计时效果
Aug 26 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
requests(1) 面向对象(3) 相对路径 (1) mt-swipe(1) 慢日志(1) hashlib(1) Mint UI(1) hmac(1) 相对路径(1) openpyxl(1)
You might like
可定制的PHP缩略图生成程式(需要GD库支持)
2007/03/06 PHP
PHP中MVC模式的模板引擎开发经验分享
2011/03/23 PHP
领悟php接口中interface存在的意义
2013/06/27 PHP
在Nginx上部署ThinkPHP项目教程
2015/02/02 PHP
PHP测试成功的邮件发送案例
2015/10/26 PHP
php图片添加文字水印实现代码
2016/03/15 PHP
PHP获取真实客户端的真实IP
2017/03/07 PHP
PHP实现将上传图片自动缩放到指定分辨率，并保持清晰度封装类示例
2019/06/17 PHP
THINKPHP-Apache服务器中使用Alias虚拟目录URL重写 隐藏index.php
2021/03/09 PHP
你需要知道的JavsScript可以做什么？
2007/06/29 Javascript
Web 前端设计模式--Dom重构 提高显示性能
2010/10/22 Javascript
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
2011/07/31 Javascript
jQuery拖拽 &amp; 弹出层 介绍与示例
2013/12/27 Javascript
js时间日期格式化封装函数
2014/12/02 Javascript
jQuery简单获取键盘事件的方法
2016/01/22 Javascript
JS关闭窗口时产生的事件及用法示例
2016/08/20 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
2016/11/29 Javascript
详解Vue.js搭建路由报错 router.map is not a function
2017/06/27 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
2017/07/07 Javascript
JS实现随机生成10个手机号的方法示例
2018/12/07 Javascript
bootstrap tooltips在 angularJS中的使用方法
2019/04/10 Javascript
vue router 传参获取不到的解决方式
2019/11/13 Javascript
利用JS如何获取form表单数据
2019/12/19 Javascript
JQuery实现折叠式菜单的详细代码
2020/06/03 jQuery
python基础教程之缩进介绍
2014/08/29 Python
全面了解python中的类,对象,方法,属性
2016/09/11 Python
python3利用smtplib通过qq邮箱发送邮件方法示例
2017/12/03 Python
python 编码规范整理
2018/05/05 Python
Python实现的多叉树寻找最短路径算法示例
2018/07/30 Python
详解Python的数据库操作（pymysql）
2019/04/04 Python
安装完Python包然后找不到模块的解决步骤
2020/02/13 Python
机关单位工作失职检讨书
2014/11/20 职场文书
党员公开承诺书2015
2015/01/21 职场文书
调任通知
2015/04/21 职场文书
帝企鹅日记观后感
2015/06/10 职场文书
Vue+Flask实现图片传输功能
2022/04/01 Vue.js