主页 / 网络编程 /

jQuery EasyUI Panel面板组件使用详解

网络编程 2021-07-04 19:20www.168986.cn编程入门
这篇文章主要为大家详细介绍了jQuery EasyUI Panel面板组件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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 
    // : 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',     //定义工具菜单，有两种方式，一种是狼蚁网站SEO优化那个数组方式，另一种指向定义好的菜单 
    / 
    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, ) { 
      alert(left + '|' + ); 
    } 
    / 
    //onBeforeOpen : function () { 
    // alert('打开之前触发！'); 
      //return false;         //取消打开 
    /
上一篇：NodeJS仿WebApi路由示例 下一篇：AngularJS constant和value区别详解

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by