網站前端_EasyUI.基礎入門.0007.使用EasyUI Tabs組件的最佳姿勢?

1. 基礎選項卡

<div id="t" class="easyui-tabs" data-options="width:500,height:300">
    <div data-options="title:'About',closable:true,bodyCls:'tabbody'">
        <p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p>
        <ul>
            <li>easyui is a collection of user-interface plugin based on jQuery.</li>
            <li>easyui provides essential functionality for building modem, interactive, javascript applications.</li>
            <li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li>
            <li>complete framework for HTML5 web page.</li>
            <li>easyui save your time and scales while developing your products.</li>
            <li>easyui is very easy but powerful.</li>
        </ul>
    </div>
    <div data-options="title:'My Ducements',closable:true,bodyCls:'tabbody'">
        <ul class="easyui-tree" data-options="animate:true">
            <li>
                <span>My Ducements</span>
                <ul>
                    <li>
                        <span>Photos</span>
                        <ul>
                            <li>Firend</li>
                            <li>Wife</li>
                        </ul>
                    </li>
                    <li>
                        <span>Program Files</span>
                        <ul>
                            <li>Shell</li>
                            <li>Python</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <div data-options="iconCls:'icon-help',title:'help',closable:true,bodyCls:'tabbody'">
        This is the help content.
    </div>
</div>

---

2. 固定選項卡寬度

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

---

3. 流式選項卡

<div style="width:500px;height:300px">

   <div id="t" class="easyui-tabs" data-options="fit:true,tabWidth:120">

       <div data-options="title:'選項卡一',closable:true,bodyCls:'tabbody'">選項卡一</div>

       <div data-options="title:'選項卡二',closable:true,bodyCls:'tabbody'">選項卡二</div>

       <div data-options="title:'選項卡三',closable:true,bodyCls:'tabbody'">選項卡三</div>

   </div>

</div>

---

4. 帶圖片的選項卡

<div id="t" class="easyui-tabs" data-options="width:500,height:250,tabHeight:100">
    <div title="<span class='ttinner'><img src='img/1.png'><br>PSD</span>" data-options="bodyCls:'tabbody'">PSD</div>
    <div title="<span class='ttinner'><img src='img/2.png'><br>HTML</span>" data-options="bodyCls:'tabbody'">HTML</div>
    <div title="<span class='ttinner'><img src='img/3.png'><br>RAR</span>" data-options="bodyCls:'tabbody'">RAR</div>
</div>
<!-- 說明: 加載全局樣式 -->
<style type="text/css" scoped="scoped">
    .tabbody {
        padding: 10px;
    }
    .ttinner {
        display: inline-block;
        line-height: 25px;
        padding-top: 20px;
    }
    .ttinner img {
        border: 0;
    }
</style>

---

說明: 其實title生成的是一個ul下的li,所以支持html代碼,可以任意發揮,比如上面爲Tab選項添加圖片.

5. 選項卡嵌套

<div id="t" class="easyui-tabs" data-options="width:500,height:250">
    <div data-options="title:'Sub Tabs',bodyCls:'tabbody'">
        <div id="tt" class="easyui-tabs" data-options="fit:true,plain:true">
            <div data-options="title:'Title 1',bodyCls:'tabbody'">Title</div>
            <div data-options="title:'Title 2',bodyCls:'tabbody'">Title</div>
            <div data-options="title:'Title 3',bodyCls:'tabbody'">Title</div>
        </div>
    </div>
    <div data-options="title:'Ajax',href:'/easyui/data.json',bodyCls:'tabbody'"></div>
    <div data-options="title:'Iframe',closable:true">
        <iframe src="http://www.baidu.com/" frameborder="0" width="100%" height="100%"></iframe>
    </div>
    <div data-options="title:'DataGrid',closable:true">
        <table id="ttt" class="easyui-datagrid" data-options="fit:true,singleSelect:true,rownumbers:true">
            <thead>
                <th data-options="field:'f1',width:'33%'">Title1</th>
                <th data-options="field:'f2',width:'33%'">Title2</th>
                <th data-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. 選項卡工具組

<div id="t" class="easyui-tabs" data-options="width:500,height:250,tools:'#tools'">
</div>
<div id="tools">
    <a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="javascript:add();"></a>
    <a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="javascript:remove();"></a>
</div>
<!-- 說明: 加載jquery-easyui腳本文件 -->
<script src="js/jquery-easyui/jquery.min.js"></script>
<script src="js/jquery-easyui/jquery.easyui.min.js"></script>
<script src="js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
    function add() {
        var options = {
            title: 'Tab'+$('#t').tabs('tabs').length || 0,
            content: 'Tab'+$('#t').tabs('tabs').length || 0,
            bodyCls: 'tabbody',
            closable:true,
        };
        $('#t').tabs('add', options);
    };
    function remove(){
        $('#t').tabs('close', $('#t').tabs('getTabIndex',$('#t').tabs('getSelected')));
    };
</script>

---

7. 帶下拉菜單的選項卡

<div id="t" class="easyui-tabs" data-options="width:500,height:250">
    <div data-options="title:'help'"></div>
</div>
<div id="tabmenu">
    <div onclick="javascript:alert('search')" data-options="iconCls:'icon-search'">register</div>
    <div onclick="javascript:alert('author')">author</div>
</div>
<!-- 說明: 加載jquery-easyui腳本文件 -->
<script src="js/jquery-easyui/jquery.min.js"></script>
<script src="js/jquery-easyui/jquery.easyui.min.js"></script>
<script src="js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
    $(function() {
         var curTab = $('#t').tabs('getSelected');
         var tabMenu = 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. 高度自適應選項卡

<div id="t" class="easyui-tabs" data-options="width:500,plain:true">
    <div data-options="title:'Title0',bodyCls:'tabbody',closable:true">
        line 1
    </div>
    <div data-options="title:'Title1',bodyCls:'tabbody',closable:true">
        line 1 <br>
        line 2
    </div>
    <div data-options="title:'Title2',bodyCls:'tabbody',closable:true">
        line 1 <br>
        line 2 <br>
        line 3
    </div>
</div>

---

9. 選項卡鼠標經過事件

<div id="t" class="easyui-tabs" data-options="width:500,height:250">
    <div data-options="title:'Title0',bodyCls:'tabbody',closable:true">
        line 1
    </div>
    <div data-options="title:'Title1',bodyCls:'tabbody',closable:true">
        line 1 <br>
        line 2
    </div>
    <div data-options="title:'Title2',bodyCls:'tabbody',closable:true">
        line 1 <br>
        line 2 <br>
        line 3
    </div>
</div>
<!-- 說明: 加載jquery-easyui腳本文件 -->
<script src="js/jquery-easyui/jquery.min.js"></script>
<script src="js/jquery-easyui/jquery.easyui.min.js"></script>
<script src="js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
    $(function() {
        var tabs = $('#t').tabs('tabs');
        for(var i=0;i<tabs.length;i++){
            var curTab = tabs[i].panel('options').tab;
            curTab.unbind().bind('mouseenter', {index: i}, function(event) {
                $('#t').tabs('select', event.data.index);
            });
        };
    });
</script>

---

說明: 一定要等所有頁面加載完畢$(function(){...}),不然會異常,然後爲每個tab對應的li重新綁定進入事件,進入之後就選中對應的面板即可.

10. 選項卡工具條

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

---

11. 選項卡位置

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

---