JQuery EasyUI(9)_minimized boolean-优快云博客

本文详细介绍了EasyUI框架中的Panel组件，包括其加载方式、属性列表、事件列表及方法列表，适合初学者和进阶开发者参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第九章：Panel（面板）组件

学习要点：

加载方式
属性列表
事件列表
方法列表

一、加载方式：

1.class加载方式

<!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>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
  <div class="easyui-panel" style="width:40px" title="面板" data-options="closable:true">
     <p>内容区域</p>
  </div>
</html>

2.JS调用

<!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>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>

  <!--
  <div class="easyui-panel" style="width:40px" title="面板" data-options="closable:true">
     <p>内容区域</p>
  </div>
  -->
  <div id="box">
     <p>内容区域</p>
  </div>
</html>

$(function(){
    $('#box').panel({
       title:'面板',
   });
});

二、属性列表：

Panel属性
属性名	值	说明
id	string	面板的ID值。默认为null
title	string	面板显示的标题文本。默认为null
iconCls	string	设置一个16*16图标的CSS类ID显示在面板左上角。默认为null
width	number	设置面板宽度。默认值auto
height	number	设置面板高度。默认值auto
left	number	设置面板距离左边的位置（即x轴位置），默认为null
top	number	设置面板距离顶部的位置（即y轴位置），默认为null
cls	string	添加一个CSS类ID到面板，默认为null
headerCls	string	添加一个CSS类ID到面板头部，默认为null
bodyCls	string	添加一个CSS类ID到面板正文部分，默认为null
style	subject	添加一个当前指定样式到面板。默认为{}
fit	boolean	当设置为true的时候面板大小将自适应父容器。默认为false
border	boolean	定义是否显示面板边框，默认为true
doSize	boolean	如果设置为true在面板别创建的时候将重置大小和重新布局。默认值为true。
noheader	boolean	如果设置为true，将不会创建面板标题，默认为false
content	string	面板那主体内容，默认为null
collapsible	boolean	定义是否显示可折叠按钮。默认为false
minimizable	boolean	定义是否显示最小化按钮。默认为false
maximizable	boolean	定义是否显示最大化按钮。默认为false
closeable	boolean	定义是否显示关闭按钮
tools	array,selector	自定义工具菜单，可用值：1.数组，每一个元素都包含'iconCls'和'handler' 属性。2.指向工作菜单的选择器。默认为[]
collapsed	boolean	定义是否在初始化的时候折叠面板。默认为false
minimized	boolean	定义是否在初始化的时候最小化面板。默认为false
maximized	boolean	定义是否在初始化的时候最大化面板。默认为false
closed	boolean	定义是否在初始化的时候关闭面板。默认为false
href	string	从URL读取远程数据并显示到面板。默认为null
cache	boolean	如果为true，在超链接载入时缓存面板内容。默认为true
loadingMessage	string	在载入远程数据的时候在模板内显示一条信息。默认值为loading……
extractor	function	定义如何从ajax应答数据中提取内容，返回提取数据。

<!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>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
<body>
  <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>

$(function(){
    $('#box').panel({
       id:'pox',
       title:'面板',
       width:500,
       height:150,
       iconCls:'icon-search',   
       //left:100,
       //top:100,
       cls:'a',
       headerCls:'b',
       bodyCls:'c',
       style:function(){
         'min-height':'200px',
      },  
       //fit:true, 
       //boder:false,
       //doSize:false,
       //noheader:true,
       //content:'修改了',
       //collapsible:true,
       //minimizable:true,
       //maximizable:true,
       closable:true,
       tools:'#tt',
       tools:[{
          iconCls:'icon-help',
          headerCls:function(){
            alert('help');
           },
         },{
      }],

        //collapsed:true,
        //minimized:true,
        //maximized:true,
        //colsed:true,
        href:'content.php',
        loadingMessage:'加载中……',
        extractor:function(data){
         return data.substring(0,3);
         //alert(data);
       }
   });

   //$('#box').panel('panel').css('position','absolute');
});

<?php
  //content.php
  sleep(3);
  echo 123;
?>

三、事件列表：

Panel事件
事件名	传参	说明
onBeforeLoad	none	在加载远程数据之前触发。
onLoad	none	在加载远程数据时触发。
onBeforeOpen	none	在打开面板之前触发，返回false可以打开操作。
onOpen	none	在打开面板之后触发。
onBeforeClose	none	在关闭面板之前触发，返回false可以取消关闭操作。
onClose	none	在面板关闭之后触发。
onbeforeDestroy	none	在面板销毁之前触发，返回false可以取消销毁操作。
onDestroy	none	在面板销毁之后触发。
onBeforeCollapse	none	在面板折叠之前触发，返回false可以终止折叠操作。
onCollapse	none	在面板折叠之后触发。
onBeforeExpand	none	在面板展开之前触发，返回false可以终止展开操作。
onExpand	none	在面板展开之后触发。
onResize	width,height	在面板改变大小之后触发，width：新的宽度，height：新的高度
onMove	left，top	在面板移动之后触发。left：新的左边距位置，top：新的上边距位置
onMaximize	none	在窗口最大化之后触发。
onRestore	none	在窗口恢复到原始大小以后触发
onMinimize	none	在窗口最小化之后触发。

四、方法列表：

Panel方法
方法名	传参	说明
options	none	返回属性对象
panel	none	返回面板对象
header	none	返回面板头对象
body	none	返回面板主体对象
setTitle	title	设置面板头的标题文本
open	forceOpen	在'forceOpen'参数设置为true的时候，打开面板时将跳过'onBeforeOpen'回调函数。
close	forceClose	在'forceClose'参数设置为true的时候，关闭面板时将跳过'onBeforeClose'回调函数。
destory	forceDestory	在'forceDestory'参数设置为true的时候，销毁面板时将跳过'onBeforeDestory'回调函数
refresh	href	刷新面板来装载远程数据。如果'href'属性有了新的配置。它将重写旧的'href'属性。
resize	options	设置面板大小和布局。参数对象包含下列属性：width：新的面板宽度。height：新的面板高度。left：新的面板左边距位置。top：新的面板上边距位置。
move	options	移动面板到一个新的位置，参数对象包含下列属性：left：新的左边距位置，top：新的上边距位置。
maximize	none	最大化面板到容器大小。
minimize	none	最小化面板。
restore	none	恢复最大化面板回到原来的大小和位置。
collapse	animate	折叠面板主题
expand	animate	展开面板主题

<!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>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
<body>
  <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>

<?php
  //content.php
  sleep(3);
  echo 'abc';
?>

$(function(){
    $('#box').panel({
       id:'pox',
       title:'面板',
       width:500,
       height:150,
       iconCls:'icon-search',   
       //left:100,
       //top:100,
       cls:'a',
       headerCls:'b',
       bodyCls:'c',
       style:function(){
         'min-height':'200px',
      },  
       //fit:true, 
       //boder:false,
       //doSize:false,
       //noheader:true,
       //content:'修改了',
       //collapsible:true,
       //minimizable:true,
       //maximizable:true,
       closable:true,
       //tools:'#tt',
      /*
       tools:[{
          iconCls:'icon-help',
          headerCls:function(){
            alert('help');
           },
         },{
      }],
     */

       tools:[{
          iconCls:'icon-reload',
          headerCls:function(){
            //alert('help');
             $('#box').panel('refresh');
           },
         },{
      }],

        //collapsed:true,
        //minimized:true,
        //maximized:true,
        //colsed:true,
        href:'content.php',
        loadingMessage:'加载中……',
       /*
        extractor:function(data){
         return data.substring(0,3);
         //alert(data);
       },
       */
       /*
       onBeforeLoad:function(){
        alert('在远程加载之前触发！');
        return false;                //取消远程加载
      },

       onLoad:function(){
        alert('在远程加载之后触发！');
      },


       onBeforeOpen:function(){
        alert('打开之前触发！');
        return false;          //取消打开        
      },

       onOpen:function(){
        alert('打开之后触发！');
      },

       onBeforeClose:function(){
        alert('关闭之前触发！');
        return false;          //取消关闭       
      },

       onOpen:function(){
        alert('关闭之后触发！');
      },

       onBeforeDestory:function(){
        alert('销毁之前触发！');
        return false;          //取消销毁      
      },

       onDestory: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('destory');
    
   /*
     $(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('destory');
   //$('#box').panel('maximize');
   //$('#box').panel('restore');
   //$('#box').panel('minimize');
   //$('#box').panel('collspse');
   //$('#box').panel('expand');
  });
});

作者：Roger_CoderLife

链接：https://blog.youkuaiyun.com/Roger_CoderLife/article/details/102853690

本文根据网易云课堂JQuery EasyUI视频教程翻译成文档，转载请注明原文出处，欢迎转载