<div class="card card-custom"> <div class="card-header"> <h3 class="card-title"> نمونه پایه سوئیچ بوت استرپ </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">نمونه های پایه</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">وضعیت های رنگی</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">لیبل سفارشی</label> <div class="col-lg-9 col-md-9 col-sm-12"> <input data-switch="true" type="checkbox" checked="checked" data-on-text="درست" data-handle-width="50" data-off-text="غلط" 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="فعال" data-handle-width="70" data-off-text="غیرفعال" data-on-color="primary" /> </div> </div> <div class="form-group row"> <label class="col-form-label text-right col-lg-3 col-sm-12">وضعیت غیرفعال</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">اندازه های مختلف</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">مودال</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">اجرای مودال</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">ارسال</button> <button type="reset" class="btn btn-secondary">لغو</button> </div> </div> </div> </form> <!--end::Form--> </div>
// کلاس definition var KTبوت استرپسوئیچ = function() { // خصوصی functions var demos = function() { // minimum setup دلار('[data-switch=true]').bootstrapسوئیچ(); }; return { // public functions init: function() { demos(); }, }; }(); jQuery(document).ready(function() { KTبوت استرپسوئیچ.init(); });
