面板作为承载其它内容的容器。这是构建其他组件的基础(比如:layout,tabs,accordion等)。它还提供了折叠、关闭、最大化、最小化和自定义行为。面板可以很容易地嵌入到web页面的任何位置。

1. 通过HTML标签创建面板

属性名 属性值类型 描述 默认值
id string 面板的ID属性。 null
title string 在面板头部显示的标题文本。 null
iconCls string 设置一个16x16图标的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 object 添加一个当前指定样式到面板。

如下代码示例更改面板边框宽度:

<div class="easyui-panel" style="width:200px;height:100px"
        data-options="style:{borderWidth:2}">
</div>
{}
fit boolean 当设置为true的时候面板大小将自适应父容器。下面的例子显示了一个面板,可以自动在父容器的最大范围内调整大小。

<div style="width:200px;height:100px;padding:5px">
	<div class="easyui-panel" style="width:200px;height:100px"
			data-options="fit:true,border:false">
		Embedded Panel
	</div>
</div>
false
border boolean 定义是否显示面板边框。 true
doSize boolean 如果设置为true,在面板被创建的时候将重置大小和重新布局。 true
noheader boolean 如果设置为true,那么

面板工具菜单也可以通过数组定义:

<div class="easyui-panel" style="width:300px;height:200px"
		title="My Panel" data-options="iconCls:'icon-ok',tools:[
				{
					iconCls:'icon-add',
					handler:function(){alert('add')}
				},{
					iconCls:'icon-edit',
					handler:function(){alert('edit')}
				}]">
</div>
[]
collapsed boolean 定义是否在初始化的时候折叠面板。 false
minimized boolean 定义是否在初始化的时候最小化面板。 false
maximized boolean 定义是否在初始化的时候最大化面板。 false
closed boolean 定义是否在初始化的时候关闭面板。 false
href string 从URL读取远程数据并且显示到面板。注意:内容将不会被载入,直到面板打开或扩大,在创建延迟加载面板时是非常有用的:

<div id="pp" class="easyui-panel" style="width:300px;height:200px"
		data-options="href='get_content.php',closed:true">
</div>
<a href="#" onclick="javascript:$('#pp').panel('open')">Open</a>
null
cache boolean 如果为true,在超链接载入时缓存面板内容。 true
loadingMessage string 在加载远程数据的时候在面板内显示一条消息。 Loading…
extractor function 定义如何从ajax应答数据中提取内容,返回提取数据。

extractor: function(data){
	var pattern = /<body[^>]*>((.|[\n\r])*)<\/body>/im;
	var matches = pattern.exec(data);
	if (matches){
		return matches[1];	// 仅提取主体内容
	} else {
		return data;
	}
}
<div id="mypanel" class="easyui-panel" style="width:300px;height:200px;" title="My Panel" iconCls="icon-save" minimizable="true" maximizable="true" closable="true" collapsible="true"    >
          <p>必须要加上这个类class="easyui-panel"</p>
</div>

 2. 通过js创建面板

事件名 事件参数 描述
onLoad none 在加载远程数据时触发。
onBeforeOpen none 在打开面板之前触发,返回false可以取消打开操作。
onOpen none 在打开面板之后触发。
onBeforeClose none 在关闭面板之前触发,返回false可以取消关闭操作。下列的面板将不能关闭。

<div class="easyui-panel" style="width:300px;height:200px;"
		title="My Panel" data-options="onBeforeClose:function(){return false}">
    面板将不能关闭
</div>
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 在窗口最小化之后触发。
方法名 方法参数 描述
options none 返回属性对象。
panel none 返回面板对象。
header none 返回面板头对象。
body none 返回面板主体对象。
setTitle title 设置面板头的标题文本。
open forceOpen 在'forceOpen'参数设置为true的时候,打开面板时将跳过'onBeforeOpen'回调函数。
close forceClose 在'forceClose'参数设置为true的时候,关闭面板时将跳过'onBeforeClose'回调函数。
destroy forceDestroy 在'forceDestroy'参数设置为true的时候,销毁面板时将跳过'onBeforeDestory'回调函数。
refresh href 刷新面板来装载远程数据。如果'href'属性有了新配置,它将重写旧的'href'属性。

代码示例:

// 打开面板且刷新其内容。
$('#pp').panel('open').panel('refresh');
// 刷新一个新的URL内容$('#pp').panel('open').panel('refresh','new_content.php');
resize options 设置面板大小和布局。参数对象包含下列属性:
width:新的面板宽度。
height:新的面板高度。
left:新的面板左边距位置。
top:新的面板上边距位置。

代码示例:

$('#pp').panel('resize',{
	width: 600,
	height: 400
});
move options 移动面板到一个新位置。参数对象包含下列属性:
left:新的左边距位置。
top:新的上边距位置。
maximize none 最大化面板到容器大小。
minimize none 最小化面板。
restore none
恢复最大化面板回到原来的大小和位置。
collapse animate 折叠面板主题。
expand animate 展开面板主体。
 <script type="text/javascript">
        $(function(){
            $("#mypanel").panel({
                title:'我的面板',
                width:200,
                height:200,
                closable:true,
                content:"我是面板内容"
            });//创建一个面板

        });
    </script>

  </head>

  <body>
      <div id="mypanel">

     </div>
 </body>


  
 

基础组件_panel面板的更多相关文章

  1. winform快速开发平台 -> 基础组件之分页控件

    一个项目控件主要由及部分的常用组件,当然本次介绍的是通用分页控件. 处理思想:我们在处理分页过程中主要是针对数据库操作. 一般情况主要是传递一些开始位置,当前页数,和数据总页数以及相关关联的业务逻辑. ...

  2. CentOS安装LNMP环境的基础组件

    注:以下所有操作均在CentOS 6.5 x86_64位系统下完成. 在安装LNMP环境之前,请确保已经使用yum安装了以下各类基础组件(如果系统已自带,还可以考虑yum update下基础组件): ...

  3. Ext学习-基础组件介绍

    1.目标    学习对象获取,组件基础,事件模型以及学习ExtJS中的基础组件的应用. 2.内容   1.对象获取   2.组件原理以及基础   3.事件模型   4.常用组件的介绍 3.学习步骤 1 ...

  4. 如何从零开始实现一个soa远程调用服务基础组件

    说起soa远程调用基础组件,最著名的莫过于淘宝的dubbo了,目前很多的大型互联网公司都有一套自己的远程服务调用分布式框架,或者是使用开源的(例如dubbo),或者是自己基于某种协议(例如hessia ...

  5. android学习——必学基础组件

    android基础组件是一个Android的开发人员必须要了解,且深刻理解的东西: 1.应用程序基础 2.应用程序组件 2.1.活动(Activities) 2.2.服务(Services) 2.3. ...

  6. Android 基础组件

    基础组件 所有的控件都可以在java代码中创建出来,并且大部分的属性都对应set和get方法,比如 View view = new View(Context context)  context是上下文 ...

  7. Akka(17): Stream:数据流基础组件-Source,Flow,Sink简介

    在大数据程序流行的今天,许多程序都面临着共同的难题:程序输入数据趋于无限大,抵达时间又不确定.一般的解决方法是采用回调函数(callback-function)来实现的,但这样的解决方案很容易造成“回 ...

  8. App架构师实践指南三之基础组件

    App架构师实践指南三之基础组件 1.基础组件库随着时间的增长,代码量的逐渐积累,新旧项目之间有太多可以服用的代码.下面是整理的公共代码库. 2.关于加密密钥的保护以及网络传输安全是移动应用安全最关键 ...

  9. JMeter各个基础组件简介

    刚从LoadRunner转到JMeter,对JMeter的各种概念比较懵.在这里记录下.欢迎大家关注我的个人微信号:测试杂货铺. JMeter的各个功能都是它的组件来完成或实现的,下面来对JMeter ...

随机推荐

  1. 对话框Dialog

    QMainWindow QMainWindow是 Qt 框架带来的一个预定义好的主窗口类. 主窗口,就是一个普通意义上的应用程序(不是指游戏之类的那种)最顶层的窗口.通常是由一个标题栏,一个菜单栏,若 ...

  2. 【转】dip,px,pt,sp 的区别

    dip: device independent pixels(设备独立像素). 不同设备有不同的显示效果,这个和设备硬件有关,一般我们为了支持WVGA.HVGA和QVGA 推荐使用这个,不依赖像素. ...

  3. ***mysql中查询今天、昨天、上个月sql语句

    今天 select * from 表名 where to_days(时间字段名) = to_days(now()); 昨天Select * FROM 表名 Where TO_DAYS( NOW( ) ...

  4. JavaWeb项目开发案例精粹-第4章博客网站系统-006View层

    1.showAllArticle.jsp <%@ page language="java" contentType="text/html; charset=gb23 ...

  5. JTAG的SWD接线方式

    JTAG引脚示意图: 一.SWD 和传统的调试方式区别 1. SWD 模式比 JTAG 在高速模式下面更加可靠 2. GPIO 刚好缺一个的时候, 可以使用 SWD 仿真, 这种模式支持更少的引脚 3 ...

  6. Hibernate笔记——(ONE TO ONE)一对一

    转自:http://ryxxlong.iteye.com/blog/622652 ================= 一对一(one-to-one)实例(Person-IdCard) 一对一的关系在数 ...

  7. [转]应聘Java,jsp,j2ee软件工程师笔试中可能出现的问题

    相信大家应聘的时候第一关就是笔试,即使是一位很有经验的工程师也不一定能够顺利通过,笔试不好,可能就无法进行面试,即使能够进行面试,考官对你的印象也不会很好,问的问题也会很多,估计很难吃的消,当然如果你 ...

  8. 271. Encode and Decode Strings

    题目: Design an algorithm to encode a list of strings to a string. The encoded string is then sent ove ...

  9. git源码推荐

    http://git.oschina.net/explore/monthly http://git.oschina.net/juapk/spring-wind http://git.oschina.n ...

  10. tomcat报警告 An attempt was made to authenticate the locked user

    有好多这样的警报怪怪的,一分钟抛一次,大概抛了10分钟,停止 有 Anattempt was made to authenticate the locked user "root" ...