赞助商成为赞助商

切换

切换布局

布局非常简单

<!-- 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 方法来使用切换

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		切换元素。具有切换元素 CSS 选择器的 HTMLElement 或字符串
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在 Toggle 实例被销毁之前将触发事件。作为参数，事件处理程序接收切换实例
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>
改进此文档
在此页面