jQuery EasyUI 教程-Panel（面板）

<br/>

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

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

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

使用案例：

创建面板

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

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
});

读取内容

PaperFake

AI写论文

下载

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

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

属性：

事件：

 方法：

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

相关文章：

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

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

浅析jQuery EasyUI中的tree使用指南

<p class="easyui-panel" style="width:200px;height:100px"
        data-options="style:{borderWidth:2}">
</p>

<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>

<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="#" class="icon-add" onclick
="javascript:alert('add')"></a>
<a href="#" 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>

<p id="pp" class="easyui-panel" style
="width:300px;height:200px"
data-options="href='get_content.php',closed:true">
</p>
<a href="#" onclick
="javascript:$('#pp').panel('open')">Open</a>

xtractor: function(data){
	var pattern = /<body[^>]*>((.|[\n\r])*)<\/body>/im;
	var matches = pattern.exec(data);
	if (matches){
		return matches[1];	// 仅提取主体内容
	} else {
		return data;
	}
}

<p class="easyui-panel" style="width:300px;height:200px;"
title="My Panel" data-options
="onBeforeClose:function(){return false}">
 面板将不能关闭
</p>

// 打开面板且刷新其内容。
$('#pp').panel('open').panel('refresh');
// 刷新一个新的URL内容
$('#pp').panel('open').panel('refresh','new_content.php');

$('#pp').panel('resize',{
	width: 600,
	height: 400
});