贊助者成為贊助者

切換

切換版面

版面相當簡單

<!-- Toggle element -->
<label class="toggle">
  <!-- Toggle input -->
  <input type="checkbox" />
  <!-- Toggle icon -->
  <span class="toggle-icon"></span>
</label>

在簡單清單內部

<div class="list simple-list">
  <ul>
    ...
    <li>
      <span>Text label</span>
      <label class="toggle">
        <input type="checkbox" />
        <span class="toggle-icon"></span>
      </label>
    </li>
  </ul>
</div>

在一般清單內部（建議在 item-after 中）

<div class="list">
  <ul>
    ...
    <li class="item-content">
      <div class="item-inner">
        <div class="item-title">Text label</div>
        <div class="item-after">
          <label class="toggle">
            <input type="checkbox" />
            <span class="toggle-icon"></span>
          </label>
        </div>
      </div>
    </li>
  </ul>
</div>

切換顏色

切換支援所有 預設顏色。因此，若要變更其顏色，只要將 color-[color] 類別新增至切換元素即可。

<!-- red toggle -->
<label class="toggle color-red">...</label>

<!-- orange toggle -->
<label class="toggle color-orange">...</label>

切換應用程式方法

讓我們看看相關的應用程式方法以使用切換

app.toggle.create(parameters)- 建立切換實例

  • parameters - 物件。具有切換參數的物件

方法傳回建立的切換實例

app.toggle.destroy(el)- 銷毀切換實例

  • el - HTMLElement 或 字串（含 CSS 選擇器）或 物件。要銷毀的切換元素或切換實例。

app.toggle.get(el)- 透過 HTML 元素取得切換實例

  • el - HTMLElement 或 字串（含 CSS 選擇器）。切換元素。

方法傳回切換實例

切換參數

現在讓我們看看建立切換所需的可使用參數清單

參數類型預設值說明
elHTMLElement
字串		切換元素。HTMLElement 或包含切換元素 CSS 選擇器的字串
on物件

包含事件處理常式的物件。例如

var toggle = app.toggle.create({
  el: '.toggle',
  on: {
    change: function () {
      console.log('Toggle changed')
    }
  }
})

切換方法與屬性

因此，若要建立切換，我們必須呼叫

var toggle = app.toggle.create({ /* parameters */ })

在那之後，我們有其初始化的實例（例如上面範例中的 toggle 變數），包含有用的方法和屬性

屬性
toggle.app連結至全域應用程式實例
toggle.el切換 HTML 元素
toggle.$el包含切換 HTML 元素的 Dom7 實例
toggle.inputEl切換輸入 HTML 元素
toggle.$inputEl包含切換輸入 HTML 元素的 Dom7 實例
toggle.checked布林屬性，表示輸入是否已勾選
toggle.params切換參數
方法
toggle.toggle()切換輸入狀態
toggle.on(event, handler)新增事件處理常式
toggle.once(event, handler)新增事件處理常式，該常式會在觸發後移除
toggle.off(event, handler)移除事件處理常式
toggle.off(event)移除指定事件的所有處理常式
toggle.emit(event, ...args)在實例上觸發事件

切換事件

切換元件將會在切換元件上觸發以下 DOM 事件，以及在應用程式和切換實例上觸發事件

DOM 事件

事件目標說明
toggle:change切換元件<div class="toggle">切換狀態變更時將觸發事件
toggle:beforedestroy切換元件<div class="toggle">切換實例即將被銷毀前將觸發事件

應用程式和切換實例事件

切換實例會在自身實例和應用程式實例上發出事件。應用程式實例事件具有相同的名稱，並以 toggle 為前綴。

事件引數目標說明
changetoggletoggle切換狀態變更時將觸發事件。事件處理常式會將切換實例接收為引數
toggleChangetoggleapp
beforeDestroytoggletoggle切換實例即將被銷毀前將觸發事件。事件處理常式會將切換實例接收為引數
toggleBeforeDestroytoggleapp

切換自動初始化

如果您不需要使用切換 API，且您的切換元件在頁面內部，並在頁面初始化時顯示在 DOM 中，則只需新增額外的 toggle-init 類別即可自動初始化。

<!-- Add toggle-init class -->
<label class="toggle toggle-init">
  <input type="checkbox" />
  <span class="toggle-icon"></span>
</label>

在這種情況下，如果您需要存取已建立的切換實例，可以使用 app.toggle.get 應用程式方法

var toggle = app.toggle.get('.toggle');

if (toggle.checked) {
  // do something
}

CSS 變數

以下是相關 CSS 變數 (CSS 自訂屬性) 的清單。

請注意，註解的變數預設未指定，且其值為它們在此情況下的備用值。

.ios {
  --f7-toggle-width: 52px;
  --f7-toggle-height: 32px;
  /*
  --f7-toggle-active-bg-color: var(--f7-theme-color);
  */
  --f7-toggle-inactive-knob-bg-color: #fff;
  --f7-toggle-active-knob-bg-color: #fff;
  --f7-toggle-inactive-border-color: #e5e5e5;
  --f7-toggle-inactive-bg-color: #fff;
}
.ios .dark,
.ios.dark {
  --f7-toggle-inactive-border-color: #555;
  --f7-toggle-inactive-bg-color: #555;
}
.md {
  --f7-toggle-width: 52px;
  --f7-toggle-height: 32px;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-toggle-inactive-bg-color: var(--f7-md-surface-variant);
  --f7-toggle-active-bg-color: var(--f7-theme-color);
  --f7-toggle-inactive-knob-bg-color: var(--f7-md-outline);
  --f7-toggle-active-knob-bg-color: var(--f7-md-on-primary);
  --f7-toggle-inactive-border-color: var(--f7-md-outline);
  --f7-toggle-active-border-color: var(--f7-theme-color);
}

範例

toggle.html
<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Toggle</div>
    </div>
  </div>
  <div class="page-content">
    <div class="block-title">Super Heroes</div>
    <div class="list list-strong list-outline-ios list-dividers-ios">
      <ul>
        <li>
          <label class="item-content">
            <div class="item-inner">
              <div class="item-title">Batman</div>
              <div class="item-after">
                <div class="toggle toggle-init">
                  <input type="checkbox" checked>
                  <span class="toggle-icon"></span>
                </div>
              </div>
            </div>
          </label>
        </li>
        <li>
          <label class="item-content">
            <div class="item-inner">
              <div class="item-title">Aquaman</div>
              <div class="item-after">
                <div class="toggle toggle-init color-blue">
                  <input type="checkbox" checked>
                  <span class="toggle-icon"></span>
                </div>
              </div>
            </div>
          </label>
        </li>
        <li>
          <label class="item-content">
            <div class="item-inner">
              <div class="item-title">Superman</div>
              <div class="item-after">
                <div class="toggle toggle-init color-red">
                  <input type="checkbox" checked>
                  <span class="toggle-icon"></span>
                </div>
              </div>
            </div>
          </label>
        </li>
        <li>
          <label class="item-content">
            <div class="item-inner">
              <div class="item-title">Hulk</div>
              <div class="item-after">
                <div class="toggle toggle-init color-green">
                  <input type="checkbox">
                  <span class="toggle-icon"></span>
                </div>
              </div>
            </div>
          </label>
        </li>
        <li>
          <label class="item-content">
            <div class="item-inner">
              <div class="item-title">Spiderman</div>
              <div class="item-after">
                <div class="toggle toggle-init disabled">
                  <input type="checkbox">
                  <span class="toggle-icon"></span>
                </div>
              </div>
            </div>
          </label>
        </li>
        <li>
          <label class="item-content">
            <div class="item-inner">
              <div class="item-title">Ironman</div>
              <div class="item-after">
                <div class="toggle toggle-init toggle-init">
                  <input type="checkbox" checked disabled>
                  <span class="toggle-icon"></span>
                </div>
              </div>
            </div>
          </label>
        </li>
        <li>
          <label class="item-content">
            <div class="item-inner">
              <div class="item-title">Thor</div>
              <div class="item-after">
                <div class="toggle toggle-init color-orange">
                  <input type="checkbox" checked>
                  <span class="toggle-icon"></span>
                </div>
              </div>
            </div>
          </label>
        </li>
        <li>
          <label class="item-content">
            <div class="item-inner">
              <div class="item-title">Wonder</div>
              <div class="item-after">
                <div class="toggle toggle-init color-pink">
                  <input type="checkbox">
                  <span class="toggle-icon"></span>
                </div>
              </div>
            </div>
          </label>
        </li>
      </ul>
    </div>
  </div>
</div>
改善此文件
在此頁面上