arozos/web/NotepadA/utils/tocasdoc/modules/tab.yml

Title      : 分頁籤
Description: 不換網頁卻能在多個內容之間作切換的好選擇。

Definitions:

  - Title      : 種類
    Description: 分頁籤有不同種類。
    Sections   :

      - Title      : 基本
        Description: 一個最基本的分頁籤組，但在沒有啟用之前頁籤內容會被隱藏。
        Since      : 2.3.3
        HTML       : |
          <div class="ts top attached tabbed menu">
              <a class="item">分頁</a>
          </div>
          <div class="ts bottom attached tab segment">
              這是分頁內容。
          </div>

  - Title      : 狀態
    Description: 分頁籤有不同的呈現狀態。
    Sections   :

      - Title      : 已啟用
        Description: 一個已啟用的分頁籤會顯示在頁面上。
        Since      : 2.3.3
        HTML       : |
          <div class="ts top attached tabbed menu">
              <a class="active item">分頁</a>
          </div>
          <div class="ts [[active]] bottom attached tab segment">
              這是分頁內容。
          </div>

      - Title      : 讀取中
        Description: 一個分頁籤可以呈現正在讀取的狀態。
        Since      : 2.3.3
        HTML       : |
          <div class="ts top attached tabbed menu">
              <a class="active item">分頁</a>
          </div>
          <div class="ts active [[loading]] bottom attached tab segment">
              <p>&nbsp;</p>
              <p>&nbsp;</p>
              <p>&nbsp;</p>
          </div>

Modules:

  - Title      : JavaScript
    Description: 分頁籤有提供可用的 JavaScript 模塊。
    Sections   :

      - Title      : 初始化
        Description: |
          <p>你需要透過 JavaScript 初始化分頁籤功能，初始化時有這些參數選項可供使用。透過 `[data-tab]` 替每個分頁命名，並記得在選單的項目中也加上相同的名稱，這樣才能夠令項目點擊時切換到指定分頁。</p>
          <p>有趣的是分頁名稱不一定要是英文，這讓你能夠使用自己國家的語言進行命名且更易於近人。</p>
          <table class="ts small celled stackable definition table">
              <thead>
                  <tr>
                      <th></th>
                      <th>參數</th>
                      <th>註釋</th>
                  </tr>
              </thead>
              <tbody>
                  <tr>
                      <td>onSwitch</td>
                      <td>tabName[<em>string</em>], groupName[<em>string|null</em>]</td>
                      <td>當分頁籤切換時所會呼叫的函式，函式會傳入兩個參數，分別是欲切換至的分頁與群組名稱。</td>
                  </tr>
              </tbody>
          </table>
        Since      : 2.3.3
        HTML       : |
          <div id="first" class="ts top attached tabbed menu">
              <a class="active item" [[data-tab]]="首要分頁">首要</a>
              <a class="item" [[data-tab]]="次要分頁">次要</a>
          </div>
          <div [[data-tab]]="首要分頁" class="ts active bottom attached tab segment">
              第一個分頁內容！
          </div>
          <div [[data-tab]]="次要分頁" class="ts bottom attached tab segment">
              然後這是第二個。
          </div>
        JavaScript: |
          ts('#first.tabbed.menu .item').tab({
              onSwitch: (tabName, groupName) => {
                  alert("你切換到了「" + tabName + "」分頁，而群組是「" + groupName + "」。");
              }
          });
        AutoExecute: true

      - Title      : 分頁群組
        Description: |
          你能夠在網頁中放入多層分頁，透過 `[data-tab-group]` 將有關連的分頁牽連起來成為群組並為其命名，一但依照群組區分之後，分頁的名稱可以和另一個群組的分頁相互重複而不起衝突。

          而分頁群組的名稱不一定要是英文，甚至也可以帶有符號。
        Since      : 2.3.3
        HTML       : |
          <div class="ts secondary menu">
              <a class="active item" data-tab="首要" [[data-tab-group]]="群組">首要</a>
              <a class="item" data-tab="次要" [[data-tab-group]]="群組">次要</a>
          </div>
          <div data-tab="首要" [[data-tab-group]]="群組" class="ts active tab segment">
              <p>第一個分頁。</p>
              <div class="ts top attached tabbed menu">
                  <a class="active item" data-tab="首要" [[data-tab-group]]="群組/分頁1">首要</a>
                  <a class="item" data-tab="次要" [[data-tab-group]]="群組/分頁1">次要</a>
              </div>
              <div data-tab="首要" [[data-tab-group]]="群組/分頁1" class="ts active bottom attached tab segment">
                  第一個分頁群組的第一個分頁。
              </div>
              <div data-tab="次要" [[data-tab-group]]="群組/分頁1" class="ts bottom attached tab segment">
                  第一個分頁群組的第二個分頁。
              </div>
          </div>
          <div data-tab="次要" [[data-tab-group]]="群組" class="ts tab segment">
              <p>第二個分頁。</p>
              <div class="ts top attached tabbed menu">
                  <a class="active item" data-tab="首要" [[data-tab-group]]="群組/分頁2">首要</a>
                  <a class="item" data-tab="次要" [[data-tab-group]]="群組/分頁2">次要</a>
              </div>
              <div data-tab="首要" [[data-tab-group]]="群組/分頁2" class="ts active bottom attached tab segment">
                  第二個分頁群組的第一個分頁。
              </div>
              <div data-tab="次要" [[data-tab-group]]="群組/分頁2" class="ts bottom attached tab segment">
                  第二個分頁群組的第二個分頁。
              </div>
          </div>
        JavaScript: |
          ts('.secondary.menu .item').tab();
          ts('.tabbed.menu .item').tab();
        AutoExecute: true