Demo Switcher | YFjs Library

开关（Switcher）控件示例

尺寸（Size）

<label class="checkbox-inline">
  <input type="checkbox" checked="checked" data-size="large" />
</label>

<label class="checkbox-inline">
  <input type="checkbox" checked="checked" data-size="normal" />
</label>

<label class="checkbox-inline">
  <input type="checkbox" checked="checked" data-size="small" />
</label>

<label class="checkbox-inline">
  <input type="checkbox" checked="checked" data-size="mini" />
</label>

颜色（Colors）

<label class="checkbox-inline">
  <input type="checkbox" checked="checked" data-on-color="primary" data-off-color="info" />
</label>

<label class="checkbox-inline">
  <input type="checkbox" checked="checked" data-on-color="info" data-off-color="success" />
</label>

<label class="checkbox-inline">
  <input type="checkbox" checked="checked" data-on-color="success" data-off-color="warning" />
</label>

<label class="checkbox-inline">
  <input type="checkbox" checked="checked" data-on-color="warning" data-off-color="danger" />
</label>

<label class="checkbox-inline">
  <input type="checkbox" checked="checked" data-on-color="danger" data-off-color="primary" />
</label>

动画（Animation）

<label class="checkbox-inline">
  <input type="checkbox" checked="checked" data-animate="false" />
</label>

禁用（Disabled）

<label class="checkbox-inline">
  <input type="checkbox" checked="checked" disabled="disabled" />
</label>

文本（Text）

<label class="checkbox-inline">
  <input type="checkbox" checked="checked" data-on-text="SI" data-off-text="NO" />
</label>

HTML文本（HTML text）

<label class="checkbox-inline">
  <input type="checkbox" checked="checked" data-on-text="<i class='fa fa-check fa-inverse'></i>" data-off-text="<i class='fa fa-remove'></i>" />
</label>

逆向显示

<label class="checkbox-inline">
  <input type="checkbox" checked="checked" data-inverse="true" />
</label>

不确定状态

<label class="checkbox-inline">
  <input type="checkbox" checked="checked" data-indeterminate="true" />
</label>

事件处理（Event handler） javascript

$('#mySwitch').on('switchChange.bs.switcher', function (e, data) {
  var $el = $(this);
  console.log(e, $el, data);
});

Toggle State javascript

$('#toggle-state-switch').switcher('toggleState');
$('#toggle-state-switch').switcher('state', false); // true || false

销毁（Destroy） javascript

$('#destroy-switch').switcher('destroy');

创建（Create） javascript

Create

$('#create-switch').wrap('<label class="checkbox-inline" />').switcher();

禁用（Disabled） javascript

$('#disable-switch').switcher('disabled');
$('#disable-switch').switcher('toggleDisabled');
$('#disable-switch').switcher('disabled', true);  // true || false

一组单选按钮

radioAllOff: false

$('input[name="radio"]').switcher({
    radioAllOff: true
});

表单（Form） - try to use tab and space

<form class="form-horizontal">
  <div class="form-group">
    <label class="control-label col-md-2" for="inputEmail">Email</label>
    <div class="col-md-6">
      <input class="form-control" id="inputEmail" type="text" placeholder="Email">
    </div>
  </div>

  <div class="form-group">
    <label class="control-label col-md-2" for="notification1">Notification 1</label>
    <div class="col-md-6">
      <label class="checkbox">
        <input id="notification1" type="checkbox" />
      </label>
    </div>
  </div>

  <div class="form-group">
    <label class="control-label col-md-2" for="notification2">Notification 2</label>
    <div class="col-md-6">
      <label class="checkbox">
        <input id="notification2" type="checkbox" />
      </label>
    </div>
  </div>
</form>

在模态框内（Modal）

<a class="btn btn-default" id="btn-modal">Open Modal</a>

<script type="text/javascript">
$('#btn-modal').click(function() {
  Modal.show({
      title: "Switcher in Modal",
      message: (
          '<div class="text-center">' + 
            '<label class="checkbox-inline">' +
              '<input type="checkbox" checked="checked" />' +
            '</label>' +
          '</div>'
      ),
      onshow: function(dialog) {
          var $dialog = dialog.getModalDialog();
          $('input[type="checkbox"]', $dialog).switcher();
      }
  });
});
</script>