スポンサースポンサーになる

トグル

トグルレイアウト

レイアウトは非常にシンプルです

<!-- 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>

トグルカラー

トグルはすべてのデフォルトカラーをサポートしています。したがって、色を変更するには、トグル要素にclass="color-[color]"を追加するだけです。

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

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

トグルアプリメソッド

トグルを操作するための関連アプリメソッドを見てみましょう

app.toggle.create(parameters)- トグルインスタンスを作成

  • parameters - object。トグルパラメータを持つオブジェクト

メソッドは、作成されたトグルのインスタンスを返します。

app.toggle.destroy(el)- トグルインスタンスを破棄

  • el - HTMLElement または string （CSSセレクタ付き）または object。破棄するトグル要素またはトグルインスタンス。

app.toggle.get(el)- HTML要素でトグルインスタンスを取得

  • el - HTMLElement または string （CSSセレクタ付き）。トグル要素。

メソッドは、トグルのインスタンスを返します。

トグルパラメータ

次に、トグルを作成するために必要な利用可能なパラメータのリストを見てみましょう

パラメータタイプデフォルト説明
elHTMLElement
string		トグル要素。トグル要素のHTMLElementまたはCSSセレクターを含む文字列
onobject

イベントハンドラを持つオブジェクト。例：

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>
このドキュメントを改善
このページで