首页
课程
路径
文章
PHP培训
精品课
下载

技术文章  >  web前端 > css教程

jQuery EasyUI 教程-Panel（面板）

黄舟
黄舟 原创
2017-03-23 17:30:28 1677浏览

从现在开始，要给大家开始讲解jQuery EasyUI 教程-Layout（布局）中的第一小节内容：jQuery-panel(面板)组件，这款组件跟前面几篇文章的组件用法几乎都差不多，也是从设置一些面板属性、操作面板触发的事件以及方法来实现案列的，我们可针对这三个点去学习。

使用$.fn.panel.defaults重写默认值对象。

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

463.png

使用案例：

创建面板

前端开发工作中会通过标签和程序两种方法来创建面板。

1、通过标签创建面板

通过标签创建更简单。添加’easyui-panel’类ID到<p/>标签。

<p id=”p” class=”easyui-panel” title=”My Panel”
style=”width:500px;height:150px;padding:10px;background:#fafafa;”
data-options=”iconCls:’icon-save’,closable:true,
collapsible:true,minimizable:true,maximizable:true”>
<p>panel content.</p>
<p>panel content.</p>
</p>

2. 创建面板程序

让我们创建面板右上角的的工具栏。

<p id=”p” style=”padding:10px;”>
<p>panel content.</p>
<p>panel content.</p>
</p>
$(‘#p’).panel({
width:500,
height:150,
title: ‘My Panel’,
tools: [{
iconCls:’icon-add’,
handler:function(){alert(‘new’)}
},{
iconCls:’icon-save’,
handler:function(){alert(‘save’)}
}]
});

移动面板

调用‘move’方法移动面板到新的位置。

$(‘#p’).panel(‘move’,{
left:100,
top:100
});

读取内容

当加载成功的时候让我们通过ajax加载面板内容并显示一些消息。

$(‘#p’).panel({
href:’content_url.php’,
onLoad:function(){
alert(‘loaded successfully’);
}
});

属性：

属性名属性值类型描述
idstring面板的ID属性。
titlestring在面板头部显示的标题文本。
iconClsstring设置一个16×16图标的CSS类ID显示在面板左上角。
widthnumber设置面板宽度。
heightnumber设置面板高度。
leftnumber设置面板距离左边的位置（即X轴位置）
topnumber设置面板距离顶部的位置（即Y轴位置）
clsstring添加一个CSS类ID到面板
headerClsstring添加一个CSS类ID到面板头部
bodyClsstring添加一个CSS类ID到面板正文部分
styleobject添加一个当前指定样式到面板。如下代码示例更改面板边框宽度：
<p class="easyui-panel" style="width:200px;height:100px"
        data-options="style:{borderWidth:2}">
</p>
fitboolean

当设置为true的时候面板大小将自适应父容器。下面的例子显示了一个面板；可以自动在父容器的最大范围内调整大小。

<p style="width:200px;height:100px;padding:5px">
<p class="easyui-panel" style="width:200px;height:100px"
data-options="fit:true,border:false">
Embedded Panel
</p>
</p>


borderboolean定义是否显示面板边框。
doSizeboolean如果设置为true，在面板被创建的时候将重置大小和重新布局。
noheaderboolean如果设置为true，那么将不会创建面板标题
contentstring面板主体内容
collapsibleboolean定义是否显示可折叠按钮。
minimizableboolean定义是否显示最小化按钮。
maximizableboolean定义是否显示最大化按钮。
closableboolean定义是否显示关闭按钮。
toolsarray,selector自定义工具菜单，可用值：
1) 数组，每个元素都包含’iconCls’和’handler’属性。
2) 指向工具菜单的选择器。

面板工具菜单可以声明在已经存在的<p>标签上：

<p class="easyui-panel" style="width:300px;height:200px"
title="My Panel" data-options
="iconCls:'icon-ok',tools:'#tt'">
</p>
<p id="tt">
<a href="//m.sbmmt.com/m/faq/#" class="icon-add" onclick
="javascript:alert('add')"></a>
<a href="//m.sbmmt.com/m/faq/#" class="icon-edit" onclick
="javascript:alert('edit')"></a>
</p>

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

<p 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')}
}]">
</p>


collapsedboolean定义是否在初始化的时候折叠面板。
minimizedboolean定义是否在初始化的时候最小化面板。
maximizedboolean定义是否在初始化的时候最大化面板。
closedboolean定义是否在初始化的时候关闭面板。
hrefstring从URL读取远程数据并且显示到面板。注意：内容将不会被载入，直到面板打开或扩大，在创建延迟加载面板时是非常有用的：
<p id="pp" class="easyui-panel" style
="width:300px;height:200px"
data-options="href='get_content.php',closed:true">
</p>
<a href="//m.sbmmt.com/m/faq/#" onclick
="javascript:$('#pp').panel('open')">Open</a>
cacheboolean如果为true，在超链接载入时缓存面板内容
loadingMessagestring在加载远程数据的时候在面板内显示一条消息
extractorfunction定义如何从ajax应答数据中提取内容，返回提取数据。
xtractor: function(data){
	var pattern = /<body[^>]*>((.|[\n\r])*)<\/body>/im;
	var matches = pattern.exec(data);
	if (matches){
		return matches[1];	// 仅提取主体内容
	} else {
		return data;
	}
}
methodstring使用HTTP的哪一种方法读取内容页。可用值：’get’,’post’。（该属性自1.3.6版开始可用）
queryParamsobject在加载内容页的时候添加的请求参数。（该属性自1.3.6版开始可用）
loaderfunction定义了如何从远程服务器加载内容页，该函数接受以下参数：
param：参数对象发送给远程服务器。
success(data)：在检索数据成功的时候调用的回调函数。
error()：在检索数据失败的时候调用的回调函数。
（该属性自1.3.6版开始可用）

事件：

事件名事件参数描述
onBeforeLoadnone在加载内容页之前触发，返回false将忽略该动作。（该事件自1.3.6版开始可用）
onLoadnone在加载远程数据时触发
onLoadErrornone在加载内容页发生错误时触发。（该事件自1.3.6版开始可用）
onBeforeOpennone在打开面板之前触发，返回false可以取消打开操作
onOpennone在打开面板之后触发
onBeforeClosenone在关闭面板之前触发，返回false可以取消关闭操作。下列的面板将不能关闭。
<p class="easyui-panel" style="width:300px;height:200px;"
title="My Panel" data-options
="onBeforeClose:function(){return false}">
 面板将不能关闭
</p>
onClosenone在面板关闭之后触发。
onBeforeDestroynone在面板销毁之前触发，返回false可以取消销毁操作
onDestroynone在面板销毁之后触发
onBeforeCollapsenone在面板折叠之前触发，返回false可以终止折叠操作。
onCollapsenone在面板折叠之后触发
onBeforeExpandnone在面板展开之前触发，返回false可以终止展开操作。
onExpandnone在面板展开之后触发
onResizewidth, height在面板改变大小之后触发。
width：新的宽度。
height：新的高度。
onMoveleft,top在面板移动之后触发。
left：新的左边距位置。
top：新的上边距位置
onMaximizenone在窗口最大化之后触发
onRestorenone在窗口恢复到原始大小以后触发。
onMinimizenone在窗口最小化之后触发。

方法：

方法名方法参数描述
optionsnone返回属性对象。
panelnone返回面板对象。
headernone返回面板头对象。
bodynone返回面板主体对象。
setTitletitle设置面板头的标题文本。
openforceOpen在’forceOpen’参数设置为true的时候，打开面板时将跳过’onBeforeOpen’回调函数。
closeforceClose在’forceClose’参数设置为true的时候，关闭面板时将跳过’onBeforeClose’回调函数。
destroyforceDestroy在’forceDestroy’参数设置为true的时候，销毁面板时将跳过’onBeforeDestory’回调函数。
refreshhref刷新面板来装载远程数据。如果’href’属性有了新配置，它将重写旧的’href’属性。代码示例：
// 打开面板且刷新其内容。
$('#pp').panel('open').panel('refresh');
// 刷新一个新的URL内容
$('#pp').panel('open').panel('refresh','new_content.php');
resizeoptions设置面板大小和布局。参数对象包含下列属性：
width：新的面板宽度。
height：新的面板高度。
left：新的面板左边距位置。
top：新的面板上边距位置。代码示例：
$('#pp').panel('resize',{
	width: 600,
	height: 400
});
moveoptions移动面板到一个新位置。参数对象包含下列属性：
left：新的左边距位置。
top：新的上边距位置。
maximizeoptions最大化面板到容器大小。
minimizenone最小化面板。
restorenone恢复最大化面板回到原来的大小和位置。
collapseanimate折叠面板主题。
expandanimate展开面板主体。

以上就是jQuery EasyUI 教程-Panel（面板）的内容，更多相关内容请关注PHP中文网（m.sbmmt.com）！

相关文章：

easyui datagrid分页 4、easyUI-七种布局（layout）

初识通用数据库操作类前端easyui-datagrid，form（php），easyuidatagrid

浅析jQuery EasyUI中的tree使用指南

jQuery EasyUI PanelPHP课程HTML视频教程CSS视频JS视频教程Vue视频教程
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。
上一条：jQuery EasyUI 教程-Tooltip（提示框） 下一条：AngularJS 模块化详解及实例代码

相关文章

查看更多
  • 热门课程
打开APP，随时随地在线学习！