fastadmin开关组件
开关组件常用于状态值的变更或只有两个值的切换。
常用示例
使用开关组件只需要给我们的操作按钮添加data-toggle="switcher"即可，如下：
<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 {eq name="$row.switch" value="0"}fa-flip-horizontal text-gray{/eq} 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>
发表评论 取消回复