지금부터 jQuery EasyUI 튜토리얼의 첫 번째 섹션인 레이아웃: jQuery-panel(패널) 컴포넌트에 대해 설명하겠습니다. 이 컴포넌트의 사용법은 이전 기사의 컴포넌트와 거의 동일합니다. 모두 유사하며 일부 패널 속성, 조작 패널에서 발생하는 이벤트 및 메서드를 설정하여 사례를 구현합니다. <br/>
기본값 개체를 재정의하려면 $.fn.panel.defaults를 사용하세요.
패널은 다른 콘텐츠를 담는 컨테이너 역할을 합니다. 이는 다른 구성요소(예: 레이아웃, 탭, 아코디언 등)를 작성하기 위한 기초입니다. 또한 축소, 닫기, 최대화, 최소화 및 사용자 정의 동작을 제공합니다. 패널은 웹 페이지의 어느 곳에나 쉽게 삽입될 수 있습니다.
사용 사례:
패널 생성
프런트 엔드 개발 작업에서는 태그와 프로그램을 통해 패널이 생성됩니다.
1. 태그를 통해 패널 만들기
태그를 통해 패널을 만드는 것이 더 쉽습니다.
태그에 'easyui-panel' 클래스 ID를 추가합니다.
<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’);
}
}); 로그인 후 복사
속성:
属性名 属性值类型 描述 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> 로그인 후 복사
<br/>
border boolean 定义是否显示面板边框。 doSize boolean 如果设置为true，在面板被创建的时候将重置大小和重新布局。 noheader boolean 如果设置为true，那么将不会创建面板标题 content string 面板主体内容 collapsible boolean 定义是否显示可折叠按钮。 minimizable boolean 定义是否显示最小化按钮。 maximizable boolean 定义是否显示最大化按钮。 closable boolean 定义是否显示关闭按钮。 tools array,selector 自定义工具菜单，可用值：<br/>1) 数组，每个元素都包含’iconCls’和’handler’属性。<br/>2) 指向工具菜单的选择器。<br/>面板工具菜单可以声明在已经存在的
标签上：
<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> 로그인 후 복사
<br/>
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='get_content.php',closed:true">
</p>
<a href="#" onclick
="javascript:$('#pp').panel('open')">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 定义了如何从远程服务器加载内容页，该函数接受以下参数：<br/>param：参数对象发送给远程服务器。<br/>success(data)：在检索数据成功的时候调用的回调函数。<br/>error()：在检索数据失败的时候调用的回调函数。<br/>（该属性自1.3.6版开始可用）
이벤트:
事件名 事件参数 描述 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 在面板改变大小之后触发。<br/>width：新的宽度。<br/>높이: 새로운 높이. onMove left,top 은 패널이 이동한 후 트리거됩니다. <br/>왼쪽: 새로운 왼쪽 여백 위치. <br/>top: 새로운 상단 여백 위치 onMaximize 없음 창이 최대화되면 트리거됨 onRestore none 은 창이 원래 크기로 복원된 후 실행됩니다. onMinimize 없음 창이 최소화된 후 실행됩니다.
방법:
方法名 方法参数 描述 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 设置面板大小和布局。参数对象包含下列属性：<br/>width：新的面板宽度。<br/>height：新的面板高度。<br/>left：新的面板左边距位置。<br/>top：新的面板上边距位置。代码示例：$('#pp').panel('resize',{
width: 600,
height: 400
}); 로그인 후 복사
move
options
移动面板到一个新位置。参数对象包含下列属性：
최대화
옵션
패널을 컨테이너 크기로 최대화합니다.
최소화
없음
패널을 최소화합니다.
복원
없음
최대화된 패널을 원래 크기와 위치로 복원합니다.
접기
애니메이션
패널 테마를 접습니다.
확장
애니메이션
패널 본체를 확장합니다.
위 내용은 jQuery EasyUI tutorial-Panel(Panel) 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요. !
관련 기사:
easyui datagrid paging 4, easyUI-seven 레이아웃(레이아웃)
일반 데이터베이스 첫 소개 프론트엔드 easyui-datagrid, form(php), easyuidatagrid
jQuery EasyUI의 트리 사용 가이드에 대한 간략한 분석
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
2023-03-15 16:54:01
2023-03-15 12:26:02
2023-03-14 18:58:01
2023-03-14 11:30:01
1970-01-01 08:00:00
2023-03-16 15:20:01
1970-01-01 08:00:00
1970-01-01 08:00:00
1970-01-01 08:00:00
1970-01-01 08:00:00
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
