EasyuiAPI:布局
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了EasyuiAPI:布局相关的知识,希望对你有一定的参考价值。
一、Panel(面板)
1.通过标签创建:
<div 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> </div>
2.通过JS调用:
html代码:
<div id="p" style="padding:10px;"> <p>panel content.</p> <p>panel content.</p> </div>
JS代码:
$(‘#p‘).panel({ width:500, height:150, title: ‘My Panel‘, tools: [{ iconCls:‘icon-add‘, handler:function(){alert(‘new‘)} },{ iconCls:‘icon-save‘, handler:function(){alert(‘save‘)} }] });
二、Tabs(选项卡)
1.通过标签创建:
<div id="tt" class="easyui-tabs" style="width:500px;height:250px;"> <div title="Tab1" style="padding:20px;display:none;"> tab1 </div> <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;"> tab2 </div> <div title="Tab3" data-options="iconCls:‘icon-reload‘,closable:true" style="padding:20px;display:none;"> tab3 </div> </div>
2.通过JS调用:
html代码:
<div id="tt" class="easyui-tabs" style="width:500px;height:250px;"></div>
JS代码:
$(‘#tt‘).tabs({ border:false, onSelect:function(title){ alert(title+‘ is selected‘); } });
添加一个选项卡:
$(‘#tt‘).tabs(‘add‘,{ title:‘New Tab‘, content:‘Tab Body‘, closable:true, tools:[{ iconCls:‘icon-mini-refresh‘, handler:function(){ alert(‘refresh‘); } }] });
三、Accordion(分类)
1.通过标签创建:
<div id="aa" class="easyui-accordion" style="width:300px;height:200px;"> <div title="Title1" data-options="iconCls:‘icon-save‘" style="overflow:auto;padding:10px;"> <h3 style="color:#0099FF;">Accordion for jQuery</h3> <p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p> </div> <div title="Title2" data-options="iconCls:‘icon-reload‘,selected:true" style="padding:10px;"> content2 </div> <div title="Title3"> content3 </div> </div>
四、Layout(布局)
1.通过标签创建:
<div id="cc" class="easyui-layout" style="width:600px;height:400px;"> <div data-options="region:‘north‘,title:‘North Title‘,split:true" style="height:100px;"></div> <div data-options="region:‘south‘,title:‘South Title‘,split:true" style="height:100px;"></div> <div data-options="region:‘east‘,iconCls:‘icon-reload‘,title:‘East‘,split:true" style="width:100px;"></div> <div data-options="region:‘west‘,title:‘West‘,split:true" style="width:100px;"></div> <div data-options="region:‘center‘,title:‘center title‘" style="padding:5px;background:#eee;"></div> </div>
2.通过JS调用:
//创建西侧面板
$(‘#cc‘).layout(‘add‘,{ region: ‘west‘, width: 180, title: ‘West Title‘, split: true, tools: [{ iconCls:‘icon-add‘, handler:function(){alert(‘add‘)} },{ iconCls:‘icon-remove‘, handler:function(){alert(‘remove‘)} }] });
以上是关于EasyuiAPI:布局的主要内容,如果未能解决你的问题,请参考以下文章
如何通过单击片段内的线性布局从片段类开始新活动?下面是我的代码,但这不起作用