EasyUI中Tabs标签页的简单使用

忘是亡心i 2023-10-18 20:03 4阅读 0赞

## 场景 ##

### 效果 ###

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

### 属性 ###

<table> 
 <tbody> 
  <tr> 
   <td><br> tabs</td> 
   <td>none</td> 
   <td>返回全部的标签页面板（tab panel）。</td> 
  </tr> 
  <tr> 
   <td>resize</td> 
   <td>none</td> 
   <td>调整标签页（tabs）容器的尺寸并做布局。</td> 
  </tr> 
  <tr> 
   <td>add</td> 
   <td>options</td> 
   <td>添加一个新的标签页面板（tab panel），options 参数是一个配置对象，更多详细信息请参见标签页面板（tab panel）属性。<br> 当添加一个新的标签页面板（tab panel）时，它将被选中。<br> 如需添加一个未选中的标签页面板（tab panel），请记得设置 'selected' 属性为 false。 <pre>&nbsp;</pre> 
    <ol> 
     <li>// add a unselected tab panel</li> 
     <li>$('#tt').tabs('add',{ </li> 
     <li>title: 'new tab',</li> 
     <li>selected: false</li> 
     <li>//...</li> 
     <li>});</li> 
    </ol></td> 
  </tr> 
  <tr> 
   <td>close</td> 
   <td>which</td> 
   <td>关闭一个标签页面板（tab panel），'which' 参数可以是要被关闭的标签页面板（tab panel）的标题（title）或索引（index）。</td> 
  </tr> 
  <tr> 
   <td>getTab</td> 
   <td>which</td> 
   <td>获取指定的标签页面板（tab panel），'which' 参数可以是标签页面板（tab panel）的标题（title）或索引（index）。</td> 
  </tr> 
  <tr> 
   <td>getTabIndex</td> 
   <td>tab</td> 
   <td>获取指定的标签页面板（tab panel）索引。</td> 
  </tr> 
  <tr> 
   <td>getSelected</td> 
   <td>none</td> 
   <td>获取选中的标签页面板（tab panel）。下面的实例演示如何获取选中的标签页面板（tab panel）的索引。 <pre>&nbsp;</pre> 
    <ol> 
     <li>var tab = $('#tt').tabs('getSelected');</li> 
     <li>var index = $('#tt').tabs('getTabIndex',tab);</li> 
     <li>alert(index);</li> 
    </ol></td> 
  </tr> 
  <tr> 
   <td>select</td> 
   <td>which</td> 
   <td>选择一个标签页面板（tab panel），'which' 参数可以是标签页面板（tab panel）的标题（title）或索引（index）。</td> 
  </tr> 
  <tr> 
   <td>unselect</td> 
   <td>which</td> 
   <td>选择一个标签页面板（tab panel），'which' 参数可以是标签页面板（tab panel）的标题（title）或索引（index）。该方法自版本 1.3.5 起可用。</td> 
  </tr> 
  <tr> 
   <td>showHeader</td> 
   <td>none</td> 
   <td>显示标签页（tabs）头部。该方法自版本 1.3.5 起可用。</td> 
  </tr> 
  <tr> 
   <td>hideHeader</td> 
   <td>none</td> 
   <td>隐藏标签页（tabs）头部。该方法自版本 1.3.5 起可用。</td> 
  </tr> 
  <tr> 
   <td>exists</td> 
   <td>which</td> 
   <td>指示指定的面板是否已存在，'which' 参数可以是标签页面板（tab panel）的标题（title）或索引（index）。</td> 
  </tr> 
  <tr> 
   <td>update</td> 
   <td>param</td> 
   <td>更新指定的标签页面板（tab panel），param 参数包含两个属性：<br> tab：被更新的标签页面板（tab panel）。<br> options：面板（panel）的选项（options）。<br><br> 代码实例： <pre>&nbsp;</pre> 
    <ol> 
     <li>// update the selected panel with new title and content</li> 
     <li>var tab = $('#tt').tabs('getSelected'); // get selected panel</li> 
     <li>$('#tt').tabs('update', { </li> 
     <li>tab: tab,</li> 
     <li>options: { </li> 
     <li>title: 'New Title',</li> 
     <li>href: 'get_content.php' // the new content URL</li> 
     <li>}</li> 
     <li>});</li> 
     <li>&nbsp;</li> 
     <li>// call 'refresh' method for tab panel to update its content</li> 
     <li>var tab = $('#tt').tabs('getSelected'); // get selected panel</li> 
     <li>tab.panel('refresh', 'get_content.php');</li> 
    </ol></td> 
  </tr> 
  <tr> 
   <td>enableTab</td> 
   <td>which</td> 
   <td>启用指定的标签页面板（tab panel），'which' 参数可以是标签页面板（tab panel）的标题（title）或索引（index）。该方法自版本 1.3 起可用。<br><br> 代码实例： <pre>&nbsp;</pre> 
    <ol> 
     <li>$('#tt').tabs('enableTab', 1); // enable the second tab panel</li> 
     <li>$('#tt').tabs('enableTab', 'Tab2'); enable the tab panel that has 'Tab2' title</li> 
    </ol></td> 
  </tr> 
  <tr> 
   <td>disableTab</td> 
   <td>which</td> 
   <td>禁用指定的标签页面板（tab panel），'which' 参数可以是标签页面板（tab panel）的标题（title）或索引（index）。该方法自版本 1.3 起可用。<br><br> 代码实例： <pre>&nbsp;</pre> 
    <ol> 
     <li>$('#tt').tabs('disableTab', 1); // disable the second tab panel.</li> 
    </ol></td> 
  </tr> 
  <tr> 
   <td>scrollBy</td> 
   <td>deltaX</td> 
   <td>通过指定的像素数滚动标签页（tab）头部，负值表示滚动到右边，正值表示滚动到左边。该方法自版本 1.3.2 起可用。<br><br> 代码实例： <pre>&nbsp;</pre> 
    <ol> 
     <li>// scroll the tab header to left</li> 
     <li>$('#tt').tabs('scroll', 10);</li> 
    </ol></td> 
  </tr> 
 </tbody> 
</table>

### 标签页面板（Tab Panel） ###

标签页面板（tab panel）属性被定义在面板（panel）组件里，下面是一些常用的属性。

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>类型</th> 
   <th>描述</th> 
   <th>默认值</th> 
  </tr> 
  <tr> 
   <td>id</td> 
   <td>string</td> 
   <td>标签页面板（tab panel）的 id 属性。</td> 
   <td>null</td> 
  </tr> 
  <tr> 
   <td>title</td> 
   <td>string</td> 
   <td>标签页面板（tab panel）的标题文字。</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>content</td> 
   <td>string</td> 
   <td>标签页面板（tab panel）的内容。</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>href</td> 
   <td>string</td> 
   <td>加载远程内容来填充标签页面板（tab panel）的 URL。</td> 
   <td>null</td> 
  </tr> 
  <tr> 
   <td>cache</td> 
   <td>boolean</td> 
   <td>当设置为 true 时，在设定了有效的 href 特性时缓存这个标签页面板（tab panel）。</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>iconCls</td> 
   <td>string</td> 
   <td>显示在标签页面板（tab panel）标题上的图标的 CSS class。</td> 
   <td>null</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>number</td> 
   <td>标签页面板（tab panel）的宽度。</td> 
   <td>auto</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td>number</td> 
   <td>标签页面板（tab panel）的高度。</td> 
   <td>auto</td> 
  </tr> 
  <tr> 
   <td>collapsible</td> 
   <td>boolean</td> 
   <td>当设置为 true 时，允许标签页面板（tab panel）可折叠。</td> 
   <td>false</td> 
  </tr> 
 </tbody> 
</table>

一些附加的属性。

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>类型</th> 
   <th>描述</th> 
   <th>默认值</th> 
  </tr> 
  <tr> 
   <td>closable</td> 
   <td>boolean</td> 
   <td>当设置为 true 时，标签页面板（tab panel）将显示一个关闭按钮，点击它就能关闭这个标签页面板（tab panel）。</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>selected</td> 
   <td>boolean</td> 
   <td>当设置为 true 时，标签页面板（tab panel）将被选中。</td> 
   <td>false</td> 
  </tr> 
 </tbody> 
</table>

## 实现 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
        <link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
        <script type="text/javascript" src="/easyui/jquery.min.js"></script>
        <script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
    </head>
    <body>
    <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>
    </body>
    </html>

[Image 1]: 
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190618213106992.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70