<div class="card card-custom"> <div class="card-header"> <h3 class="card-title"> Bootstrap Switch Examples </h3> </div> <!--begin::Form--> <form class="form"> <div class="card-body"> <div class="form-group row"> <label class="col-form-label text-right col-lg-3 col-sm-12">Basic Example</label> <div class="col-lg-9 col-md-9 col-sm-12"> <input data-switch="true" type="checkbox" checked="checked" /> <input data-switch="true" type="checkbox" /> </div> </div> <div class="form-group row"> <label class="col-form-label text-right col-lg-3 col-sm-12">State Colors</label> <div class="col-lg-9 col-md-9 col-sm-12"> <input data-switch="true" type="checkbox" checked="checked" data-on-color="success" data-off-color="warning"/> <input data-switch="true" type="checkbox" checked="checked" data-on-color="primary"/> <input data-switch="true" type="checkbox" checked="checked" data-on-color="danger"/> <input data-switch="true" type="checkbox" checked="checked" data-on-color="info"/> </div> </div> <div class="form-group row"> <label class="col-form-label text-right col-lg-3 col-sm-12">Custom Label</label> <div class="col-lg-9 col-md-9 col-sm-12"> <input data-switch="true" type="checkbox" checked="checked" data-on-text="True" data-handle-width="50" data-off-text="False" data-on-color="success"/> <input data-switch="true" type="checkbox" checked="checked" data-on-text="1" data-handle-width="30" data-off-text="0" data-on-color="info" /> <input data-switch="true" type="checkbox" checked="checked" data-on-text="Enabled" data-handle-width="70" data-off-text="Disabled" data-on-color="primary" /> </div> </div> <div class="form-group row"> <label class="col-form-label text-right col-lg-3 col-sm-12">Disabled State</label> <div class="col-lg-9 col-md-9 col-sm-12"> <input data-switch="true" type="checkbox" checked="checked" disabled="disabled"/> <input data-switch="true" type="checkbox" disabled="disabled"/> </div> </div> <div class="form-group row"> <label class="col-form-label text-right col-lg-3 col-sm-12">Sizing</label> <div class="col-lg-9 col-md-9 col-sm-12"> <input data-switch="true" data-size="small" type="checkbox" checked="checked" /> <input data-switch="true" type="checkbox" checked="checked" /> <input data-switch="true" data-size="large" type="checkbox" checked="checked" /> </div> </div> <div class="form-group row"> <label class="col-form-label text-right col-lg-3 col-sm-12">Modal Demos</label> <div class="col-lg-9 col-md-9 col-sm-12"> <a href="" class="btn btn-light-danger font-weight-bold" data-toggle="modal" data-target="#kt_switch_modal">Launch switches on modal</a> </div> </div> </div> <div class="card-footer"> <div class="row"> <div class="col-lg-9 ml-lg-auto"> <button type="reset" class="btn btn-primary mr-2">Submit</button> <button type="reset" class="btn btn-secondary">Cancel</button> </div> </div> </div> </form> <!--end::Form--> </div>
// Class definition var KTBootstrapSwitch = function() { // Private functions var demos = function() { // minimum setup $('[data-switch=true]').bootstrapSwitch(); }; return { // public functions init: function() { demos(); }, }; }(); jQuery(document).ready(function() { KTBootstrapSwitch.init(); });
