第3.1.7章 WEB系统最佳实践 js控件之bootstrap switch

最新推荐文章于 2024-09-13 21:42:32 发布

原创最新推荐文章于 2024-09-13 21:42:32 发布 · 502 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#switch

岁月云——Web系统最佳实践专栏收录该内容

118 篇文章

订阅专栏

bootstrap switch,效果如下：

虽然官网有很多例子，但是实际运用到项目中，就需要稍作处理。

<div class="panel panel-default">
                            <div class="panel-heading">
                                <h3 class="panel-title">迂回站/驱动站信息</h3>
                            </div>
                            <div class="panel-body">
                                <form role="form" id="updownForm" class="form-horizontal" action="${ctx}/ccsDataDictionary/edit">
                                    <div class="form-group">
                                        <label class="col-xs-3 text-right control-label">机房:</label>
                                        <div class="col-xs-9">
                                            <input type="hidden" name="id" value="${updownData.id }"/>
                                            <input type="checkbox" class="form-control no-padding" id="isUp"
                                                name="valueField" checked="${updownData.valueField}" />
                                            <span class="help-block">每个索道系统一个迂回房，一个驱动站</span>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="panel-footer text-right">
                                <div class="btn-group-sm">
                                    <button class="btn btn-primary ladda-button" data-style="expand-left" data-size="1" type="button" id="btnSetUpDown" ><span class="ladda-label">设置</span></button>
                                </div>
                            </div>
                        </div>

$('#isUp').bootstrapSwitch({size:'small',onText:'迂回站',offText:'驱动站',onColor:'success',offColor:'info'});
        $('#isUp').bootstrapSwitch('state',$('#isUp').data('value'));