一、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\')}    
    }]    
});

　　

版权声明：本文为koto原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/koto/p/5313012.html