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:布局的主要内容,如果未能解决你的问题,请参考以下文章

EasyuiAPI:基础

如何通过单击片段内的线性布局从片段类开始新活动?下面是我的代码,但这不起作用

Wordpress - 将代码片段包含到布局的选定部分的插件

有没有更聪明的方法将布局绑定到片段?

android片段表格布局

重新创建片段布局