search
HomeWeb Front-endCSS TutorialjQuery EasyUI Tutorial-Panel (Panel)

jQuery EasyUI Tutorial-Panel (Panel)

Mar 23, 2017 pm 05:30 PM
easyuijquerypanel

<br/>

From now on, I will explain to you the first section of the jQuery EasyUI tutorial-Layout: jQuery-panel (panel) component. The usage of this component is almost the same as the components in the previous articles. , the case is also implemented by setting some panel properties, events and methods triggered by the operation panel. We can learn from these three points.

Use $.fn.panel.defaults to override the default value object.

Panels serve as containers for other content. This is the basis for building other components (such as layout, tabs, accordion, etc.). It also provides collapse, close, maximize, minimize and custom behaviors. Panels can be easily embedded anywhere on a web page.

jQuery EasyUI Tutorial-Panel (Panel)

Use case:

Creating a panel

In front-end development work, panels are created through two methods: tags and programs.

1. Create panel through tags

Creating through tags is easier. Add 'easyui-panel' class ID to

tag.
<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. Create the panel program

Let us create the toolbar in the upper right corner of the panel.

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

Call the 'move' method to move the panel to a new location.

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

Read content

When the loading is successful, let us load the panel content through ajax and display some messages.

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

Attributes:

属性名 属性值类型 描述
id string 面板的ID属性。
title string 在面板头部显示的标题文本。
iconCls string 设置一个16×16图标的CSS类ID显示在面板左上角。
width number 设置面板宽度。
height number 设置面板高度。
left number 设置面板距离左边的位置(即X轴位置)
top number 设置面板距离顶部的位置(即Y轴位置)
cls string 添加一个CSS类ID到面板
headerCls string 添加一个CSS类ID到面板头部
bodyCls string 添加一个CSS类ID到面板正文部分
style object 添加一个当前指定样式到面板。如下代码示例更改面板边框宽度:
<p class="easyui-panel" style="width:200px;height:100px"
        data-options="style:{borderWidth:2}">
</p>
fit boolean

当设置为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>


border boolean 定义是否显示面板边框。
doSize boolean 如果设置为true,在面板被创建的时候将重置大小和重新布局。
noheader boolean 如果设置为true,那么将不会创建面板标题
content string 面板主体内容
collapsible boolean 定义是否显示可折叠按钮。
minimizable boolean 定义是否显示最小化按钮。
maximizable boolean 定义是否显示最大化按钮。
closable boolean 定义是否显示关闭按钮。
tools array,selector 自定义工具菜单,可用值:
1) 数组,每个元素都包含’iconCls’和’handler’属性。
2) 指向工具菜单的选择器。

面板工具菜单可以声明在已经存在的

标签上:

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

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

<p class="easyui-panel" style="width:300px;height:200px"
title="My Panel" data-options="iconCls:&#39;icon-ok&#39;,tools:[
{
iconCls:&#39;icon-add&#39;,
handler:function(){alert(&#39;add&#39;)}
},{
iconCls:&#39;icon-edit&#39;,
handler:function(){alert(&#39;edit&#39;)}
}]">
</p>


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

event:

事件名 事件参数 描述
onBeforeLoad none 在加载内容页之前触发,返回false将忽略该动作。(该事件自1.3.6版开始可用)
onLoad none 在加载远程数据时触发
onLoadError none 在加载内容页发生错误时触发。(该事件自1.3.6版开始可用)
onBeforeOpen none 在打开面板之前触发,返回false可以取消打开操作
onOpen none 在打开面板之后触发
onBeforeClose none 在关闭面板之前触发,返回false可以取消关闭操作。下列的面板将不能关闭。
<p class="easyui-panel" style="width:300px;height:200px;"
title="My Panel" data-options
="onBeforeClose:function(){return false}">
 面板将不能关闭
</p>
onClose none 在面板关闭之后触发。
onBeforeDestroy none 在面板销毁之前触发,返回false可以取消销毁操作
onDestroy none 在面板销毁之后触发
onBeforeCollapse none 在面板折叠之前触发,返回false可以终止折叠操作。
onCollapse none 在面板折叠之后触发
onBeforeExpand none 在面板展开之前触发,返回false可以终止展开操作。
onExpand none 在面板展开之后触发
onResize width, height 在面板改变大小之后触发。
width:新的宽度。
height: new height.
onMove left,top Fires after the panel moves.
left: New left margin position.
top: New top margin position
onMaximize none Triggered after the window is maximized
onRestore none Triggered after the window is restored to its original size.
onMinimize none Fires after the window is minimized.

method:

方法名 方法参数 描述
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’属性。代码示例:
// 打开面板且刷新其内容。
$(&#39;#pp&#39;).panel(&#39;open&#39;).panel(&#39;refresh&#39;);
// 刷新一个新的URL内容
$(&#39;#pp&#39;).panel(&#39;open&#39;).panel(&#39;refresh&#39;,&#39;new_content.php&#39;);
resize options 设置面板大小和布局。参数对象包含下列属性:
width:新的面板宽度。
height:新的面板高度。
left:新的面板左边距位置。
top:新的面板上边距位置。代码示例:
$(&#39;#pp&#39;).panel(&#39;resize&#39;,{
	width: 600,
	height: 400
});
move options 移动面板到一个新位置。参数对象包含下列属性:
left:新的左边距位置。
top: New top margin position.
maximize options Maximize the panel to the container size.
minimize none Minimize the panel.
restore none Restore the maximized panel back to its original size and position.
collapse animate Collapse panel theme.
expand animate Expand the panel body.

The above is the content of the jQuery EasyUI tutorial-Panel (Panel). For more related content, please pay attention to the PHP Chinese website (www.php.cn)!

Related articles:

easyui datagrid paging 4, easyUI-seven layouts (layout)

First introduction to general database Operation front-end easyui-datagrid, form (php), easyuidatagrid

A brief analysis of the tree usage guide in jQuery EasyUI

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
What does margin: 40px 100px 120px 80px signify?What does margin: 40px 100px 120px 80px signify?Apr 28, 2025 pm 05:31 PM

Article discusses CSS margin property, specifically "margin: 40px 100px 120px 80px", its application, and effects on webpage layout.

What are the different CSS border properties?What are the different CSS border properties?Apr 28, 2025 pm 05:30 PM

The article discusses CSS border properties, focusing on customization, best practices, and responsiveness. Main argument: border-radius is most effective for responsive designs.

What are CSS backgrounds, list the properties?What are CSS backgrounds, list the properties?Apr 28, 2025 pm 05:29 PM

The article discusses CSS background properties, their uses in enhancing website design, and common mistakes to avoid. Key focus is on responsive design using background-size.

What are CSS HSL Colors?What are CSS HSL Colors?Apr 28, 2025 pm 05:28 PM

Article discusses CSS HSL colors, their use in web design, and advantages over RGB. Main focus is on enhancing design and accessibility through intuitive color manipulation.

How can we add comments in CSS?How can we add comments in CSS?Apr 28, 2025 pm 05:27 PM

The article discusses the use of comments in CSS, detailing single-line and multi-line comment syntaxes. It argues that comments enhance code readability, maintainability, and collaboration, but may impact website performance if not managed properly.

What are CSS Selectors?What are CSS Selectors?Apr 28, 2025 pm 05:26 PM

The article discusses CSS Selectors, their types, and usage for styling HTML elements. It compares ID and class selectors and addresses performance issues with complex selectors.

Which type of CSS holds the highest priority?Which type of CSS holds the highest priority?Apr 28, 2025 pm 05:25 PM

The article discusses CSS priority, focusing on inline styles having the highest specificity. It explains specificity levels, overriding methods, and debugging tools for managing CSS conflicts.

In how many ways can we add CSS to our HTML file?In how many ways can we add CSS to our HTML file?Apr 28, 2025 pm 05:24 PM

Article discusses three methods to add CSS to HTML: inline, internal, and external. Each method's impact on website performance and suitability for beginners is analyzed.(159 characters)

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

SecLists

SecLists

SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.

WebStorm Mac version

WebStorm Mac version

Useful JavaScript development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools

Atom editor mac version download

Atom editor mac version download

The most popular open source editor