开关组件

开关组件常用于状态值的变更或只有两个值的切换。

常用示例

使用开关组件只需要给我们的操作按钮添加data-toggle="switcher"即可，如下：

<!-- 根据变量值判断 -->
<input  id="c-switch" name="row[switch]" type="hidden" value="{$row.switch}">
<a href="javascript:;" data-toggle="switcher" class="btn-switcher" data-input-id="c-switch" data-yes="1" data-no="0" >
<i class="fa fa-toggle-on text-success {eq name="$row.switch" value="0"}fa-flip-horizontal text-gray{/eq} fa-2x"></i>
</a>

<!-- 默认开 -->
<input  id="c-switch" name="row[switch]" type="hidden" value="1">
<a href="javascript:;" data-toggle="switcher" class="btn-switcher" data-input-id="c-switch" data-yes="1" data-no="0" >
<i class="fa fa-toggle-on text-success fa-2x"></i>
</a>

<!-- 默认关 -->
<input  id="c-switch" name="row[switch]" type="hidden" value="0">
<a href="javascript:;" data-toggle="switcher" class="btn-switcher" data-input-id="c-switch" data-yes="1" data-no="0" >
<i class="fa fa-toggle-on text-success fa-flip-horizontal text-gray fa-2x"></i>
</a>

自定义值

如果你的开关的值不是1和0，则可以通过data-yes和data-no属性来指定开关的值，如下：

<input  id="c-switch" name="row[switch]" type="hidden" value="open">
<a href="javascript:;" data-toggle="switcher" class="btn-switcher" data-input-id="c-switch" data-yes="open" data-no="closed" >
<i class="fa fa-toggle-on text-success {eq name="$row.switch" value="closed"}fa-flip-horizontal text-gray{/eq} fa-2x"></i>
</a>

开关提示

从1.2.0版本开始，开关组件支持切换前提示，请尝试给a标签添加一个data-confirm属性即可，如下：

<input  id="c-switch" name="row[switch]" type="hidden" value="0">
<a href="javascript:;" data-toggle="switcher" class="btn-switcher" data-confirm="确认切换开关？" data-input-id="c-switch" data-yes="1" data-no="0" >
<i class="fa fa-toggle-on text-success {eq name="$row.switch" value="0"}fa-flip-horizontal text-gray{/eq} fa-2x"></i>
</a>

开关事件

如果你需要监听开关切换后的事件，可以在JS中给隐藏的input文本框添加一个change事件，如下：

$(document).on("change", "#c-switch", function(){
    //开关切换后的回调事件
});

开关禁用

如果需要禁用开关组件，只需要给a添加一个disabled的class即可，如下：

<input  id="c-switch" name="row[switch]" type="hidden" value="0">
<a href="javascript:;" data-toggle="switcher" class="btn-switcher disabled" data-input-id="c-switch" data-yes="1" data-no="0" >
<i class="fa fa-toggle-on text-success {eq name="$row.switch" value="0"}fa-flip-horizontal text-gray{/eq} fa-2x"></i>
</a>