EasyUI中Tabs标签页的简单使用
生活随笔
收集整理的這篇文章主要介紹了
EasyUI中Tabs标签页的简单使用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
場景
效果
屬性
tabs | none | 返回全部的標簽頁面板（tab panel）。 |
| resize | none | 調整標簽頁（tabs）容器的尺寸并做布局。 |
| add | options | 添加一個新的標簽頁面板（tab panel），options 參數是一個配置對象，更多詳細信息請參見標簽頁面板（tab panel）屬性。 當添加一個新的標簽頁面板（tab panel）時，它將被選中。 如需添加一個未選中的標簽頁面板（tab panel），請記得設置 'selected' 屬性為 false。 |
| close | which | 關閉一個標簽頁面板（tab panel），'which' 參數可以是要被關閉的標簽頁面板（tab panel）的標題（title）或索引（index）。 |
| getTab | which | 獲取指定的標簽頁面板（tab panel），'which' 參數可以是標簽頁面板（tab panel）的標題（title）或索引（index）。 |
| getTabIndex | tab | 獲取指定的標簽頁面板（tab panel）索引。 |
| getSelected | none | 獲取選中的標簽頁面板（tab panel）。下面的實例演示如何獲取選中的標簽頁面板（tab panel）的索引。 |
| select | which | 選擇一個標簽頁面板（tab panel），'which' 參數可以是標簽頁面板（tab panel）的標題（title）或索引（index）。 |
| unselect | which | 選擇一個標簽頁面板（tab panel），'which' 參數可以是標簽頁面板（tab panel）的標題（title）或索引（index）。該方法自版本 1.3.5 起可用。 |
| showHeader | none | 顯示標簽頁（tabs）頭部。該方法自版本 1.3.5 起可用。 |
| hideHeader | none | 隱藏標簽頁（tabs）頭部。該方法自版本 1.3.5 起可用。 |
| exists | which | 指示指定的面板是否已存在，'which' 參數可以是標簽頁面板（tab panel）的標題（title）或索引（index）。 |
| update | param | 更新指定的標簽頁面板（tab panel），param 參數包含兩個屬性： tab：被更新的標簽頁面板（tab panel）。 options：面板（panel）的選項（options）。 代碼實例： |
| enableTab | which | 啟用指定的標簽頁面板（tab panel），'which' 參數可以是標簽頁面板（tab panel）的標題（title）或索引（index）。該方法自版本 1.3 起可用。 代碼實例： |
| disableTab | which | 禁用指定的標簽頁面板（tab panel），'which' 參數可以是標簽頁面板（tab panel）的標題（title）或索引（index）。該方法自版本 1.3 起可用。 代碼實例： |
| scrollBy | deltaX | 通過指定的像素數滾動標簽頁（tab）頭部，負值表示滾動到右邊，正值表示滾動到左邊。該方法自版本 1.3.2 起可用。 代碼實例： |
標簽頁面板（Tab Panel）
標簽頁面板（tab panel）屬性被定義在面板（panel）組件里，下面是一些常用的屬性。
| id | string | 標簽頁面板（tab panel）的 id 屬性。 | null |
| title | string | 標簽頁面板（tab panel）的標題文字。 | ? |
| content | string | 標簽頁面板（tab panel）的內容。 | ? |
| href | string | 加載遠程內容來填充標簽頁面板（tab panel）的 URL。 | null |
| cache | boolean | 當設置為 true 時，在設定了有效的 href 特性時緩存這個標簽頁面板（tab panel）。 | true |
| iconCls | string | 顯示在標簽頁面板（tab panel）標題上的圖標的 CSS class。 | null |
| width | number | 標簽頁面板（tab panel）的寬度。 | auto |
| height | number | 標簽頁面板（tab panel）的高度。 | auto |
| collapsible | boolean | 當設置為 true 時，允許標簽頁面板（tab panel）可折疊。 | false |
一些附加的屬性。
| closable | boolean | 當設置為 true 時，標簽頁面板（tab panel）將顯示一個關閉按鈕，點擊它就能關閉這個標簽頁面板（tab panel）。 | false |
| selected | boolean | 當設置為 true 時，標簽頁面板（tab panel）將被選中。 | false |
實現
<!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>?
總結
以上是生活随笔為你收集整理的EasyUI中Tabs标签页的简单使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： EasyUI中layout布局的简单使用
- 下一篇： EasyUI中菜单Menu的简单使用