网站前端_EasyUI.基础入门.0007.使用EasyUI Tabs组件的最佳姿势?

2024-12-18 技术教程

1. 基础选项卡

<divid="t"class="easyui-tabs"data-options="width:500,height:300"><divdata-options="title:'About',closable:true,bodyCls:'tabbody'"><p>jQueryEasyUIframeworkhelpsyoubuildyourwebpageseasily.</p><ul><li>easyuiisacollectionofuser-interfacepluginbasedonjQuery.</li><li>easyuiprovidesessentialfunctionalityforbuildingmodem,interactive,javascriptapplications.</li><li>usingeasyuiyoudon'tneedtowritemanyjavascriptcode,youusuallydefinesuser-interfacebywritingsomeHTMLmarkup.</li><li>completeframeworkforHTML5webpage.</li><li>easyuisaveyourtimeandscaleswhiledevelopingyourproducts.</li><li>easyuiisveryeasybutpowerful.</li></ul></div><divdata-options="title:'MyDucements',closable:true,bodyCls:'tabbody'"><ulclass="easyui-tree"data-options="animate:true"><li><span>MyDucements</span><ul><li><span>Photos</span><ul><li>Firend</li><li>Wife</li></ul></li><li><span>ProgramFiles</span><ul><li>Shell</li><li>Python</li></ul></li></ul></li></ul></div><divdata-options="iconCls:'icon-help',title:'help',closable:true,bodyCls:'tabbody'">Thisisthehelpcontent.</div></div>

2. 固定选项卡宽度

<divid="t"class="easyui-tabs"data-options="width:500,height:300,tabWidth:120"><divdata-options="title:'选项卡一',closable:true,bodyCls:'tabbody'">选项卡一</div><divdata-options="title:'选项卡二',closable:true,bodyCls:'tabbody'">选项卡二</div><divdata-options="title:'选项卡三',closable:true,bodyCls:'tabbody'">选项卡三</div></div>

3. 流式选项卡

<div >

</div>

4. 带图片的选项卡

<divid="t"class="easyui-tabs"data-options="width:500,height:250,tabHeight:100"><divtitle="<spanclass='ttinner'><imgsrc='img/1.png'><br>PSD</span>"data-options="bodyCls:'tabbody'">PSD</div><divtitle="<spanclass='ttinner'><imgsrc='img/2.png'><br>HTML</span>"data-options="bodyCls:'tabbody'">HTML</div><divtitle="<spanclass='ttinner'><imgsrc='img/3.png'><br>RAR</span>"data-options="bodyCls:'tabbody'">RAR</div></div><styletype="text/css"scoped="scoped">.tabbody{padding:10px;}.ttinner{display:inline-block;line-height:25px;padding-top:20px;}.ttinnerimg{border:0;}</style>

说明: 其实title生成的是一个ul下的li,所以支持html代码,可以任意发挥,比如上面为Tab选项添加图片.

5. 选项卡嵌套

<divid="t"class="easyui-tabs"data-options="width:500,height:250"><divdata-options="title:'SubTabs',bodyCls:'tabbody'"><divid="tt"class="easyui-tabs"data-options="fit:true,plain:true"><divdata-options="title:'Title1',bodyCls:'tabbody'">Title</div><divdata-options="title:'Title2',bodyCls:'tabbody'">Title</div><divdata-options="title:'Title3',bodyCls:'tabbody'">Title</div></div></div><divdata-options="title:'Ajax',href:'/easyui/data.json',bodyCls:'tabbody'"></div><divdata-options="title:'Iframe',closable:true"><iframesrc="http://www.baidu.com/"frameborder="0"width="100%"height="100%"></iframe></div><divdata-options="title:'DataGrid',closable:true"><tableid="ttt"class="easyui-datagrid"data-options="fit:true,singleSelect:true,rownumbers:true"><thead><thdata-options="field:'f1',width:'33%'">Title1</th><thdata-options="field:'f2',width:'33%'">Title2</th><thdata-options="field:'f3',width:'33%'">Title3</th></thead><tbody><tr><td>td1</td><td>td2</td><td>td3</td></tr><tr><td>td1</td><td>td2</td><td>td3</td></tr></tbody></table></div></div>

6. 选项卡工具组

<divid="t"class="easyui-tabs"data-options="width:500,height:250,tools:'#tools'"></div><divid="tools"><ahref="javascript:void(0);"class="easyui-linkbutton"data-options="iconCls:'icon-add',plain:true"onclick="javascript:add();"></a><ahref="javascript:void(0);"class="easyui-linkbutton"data-options="iconCls:'icon-remove',plain:true"onclick="javascript:remove();"></a></div><scriptsrc="js/jquery-easyui/jquery.min.js"></script><scriptsrc="js/jquery-easyui/jquery.easyui.min.js"></script><scriptsrc="js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script><scripttype="text/javascript">functionadd(){varoptions={title:'Tab'+$('#t').tabs('tabs').length||0,content:'Tab'+$('#t').tabs('tabs').length||0,bodyCls:'tabbody',closable:true,};$('#t').tabs('add',options);};functionremove(){$('#t').tabs('close',$('#t').tabs('getTabIndex',$('#t').tabs('getSelected')));};</script>

7. 带下拉菜单的选项卡

<divid="t"class="easyui-tabs"data-options="width:500,height:250"><divdata-options="title:'help'"></div></div><divid="tabmenu"><divonclick="javascript:alert('search')"data-options="iconCls:'icon-search'">register</div><divonclick="javascript:alert('author')">author</div></div><scriptsrc="js/jquery-easyui/jquery.min.js"></script><scriptsrc="js/jquery-easyui/jquery.easyui.min.js"></script><scriptsrc="js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script><scripttype="text/javascript">$(function(){varcurTab=$('#t').tabs('getSelected');vartabMenu=curTab.panel('options').tab.find('a.tabs-inner');tabMenu.menubutton({menu:'#tabmenu',iconCls:'icon-help',})});</script>

说明: 由于头部的tab选项卡其实是在ul下的li,它和主体panel通过curTab.panel('options').tab关联,而我们需要的是给对应的li下面a.tabs-inner绑定一个菜单按钮即可.

8. 高度自适应选项卡

<divid="t"class="easyui-tabs"data-options="width:500,plain:true"><divdata-options="title:'Title0',bodyCls:'tabbody',closable:true">line1</div><divdata-options="title:'Title1',bodyCls:'tabbody',closable:true">line1<br>line2</div><divdata-options="title:'Title2',bodyCls:'tabbody',closable:true">line1<br>line2<br>line3</div></div>

9. 选项卡鼠标经过事件

<divid="t"class="easyui-tabs"data-options="width:500,height:250"><divdata-options="title:'Title0',bodyCls:'tabbody',closable:true">line1</div><divdata-options="title:'Title1',bodyCls:'tabbody',closable:true">line1<br>line2</div><divdata-options="title:'Title2',bodyCls:'tabbody',closable:true">line1<br>line2<br>line3</div></div><scriptsrc="js/jquery-easyui/jquery.min.js"></script><scriptsrc="js/jquery-easyui/jquery.easyui.min.js"></script><scriptsrc="js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script><scripttype="text/javascript">$(function(){vartabs=$('#t').tabs('tabs');for(vari=0;i<tabs.length;i++){varcurTab=tabs[i].panel('options').tab;curTab.unbind().bind('mouseenter',{index:i},function(event){$('#t').tabs('select',event.data.index);});};});</script>

说明: 一定要等所有页面加载完毕$(function(){...}),不然会异常,然后为每个tab对应的li重新绑定进入事件,进入之后就选中对应的面板即可.

10. 选项卡工具条

<divid="t"class="easyui-tabs"data-options="width:500,height:250"><divdata-options="title:'Title0',iconCls:'icon-ok',bodyCls:'tabbody',tools:'#tab0_tools'"><pre>try:click:icon-mini-addclick:icon-mini-editclick:icon-mini-refresh</pre></div></div><divid="tab0_tools"><ahref="#"class="icon-mini-add"onclick="javascript:alert('add');"></a><ahref="#"class="icon-mini-edit"onclick="javascript:alert('edit');"></a><ahref="#"class="icon-mini-refresh"onclick="javascript:alert('refresh');"></a></div>

11. 选项卡位置

<div><selectname="tabPosition"id="tabPosition"onchange="$('#t').tabs({'tabPosition':this.value})"><optionvalue="top">top</option><optionvalue="bottom">bottom</option><optionvalue="left">left</option><optionvalue="right">right</option></select></div><hr><divid="t"class="easyui-tabs"data-options="width:500,height:250"><divdata-options="title:'Title0',iconCls:'icon-ok',bodyCls:'tabbody'">Title0</div></div><divid="tab0_tools"><ahref="#"class="icon-mini-add"onclick="javascript:alert('add');"></a><ahref="#"class="icon-mini-edit"onclick="javascript:alert('edit');"></a><ahref="#"class="icon-mini-refresh"onclick="javascript:alert('refresh');"></a></div>