<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>bootstrapSwitch</title>
<link rel="stylesheet" href="../YIQI-UI.min.css">
<link rel="stylesheet" href="YIQI-UI-bootstrapSwitch.css">
<link href="../font/YIQI-UI-iconfont.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="YIQI-UI">
<h3>尺寸（Size）</h3>
<div class="bs-docs-example">
<div class="switch size-L">
<input type="checkbox" checked />
</div>
<div class="switch">
<input type="checkbox" checked />
</div>
<div class="switch size-S">
<input type="checkbox" checked />
</div>
<div class="switch size-MINI">
<input type="checkbox" checked />
</div>
</div>
<h3>颜色（Colors）</h3>
<div class="bs-docs-example">
<div class="switch" data-on="primary" data-off="info">
<input type="checkbox" checked />
</div>
<div class="switch" data-on="info" data-off="success">
<input type="checkbox" checked />
</div>
<div class="switch" data-on="success" data-off="warning">
<input type="checkbox" checked />
</div>
<div class="switch" data-on="warning" data-off="danger">
<input type="checkbox" checked />
</div>
<div class="switch" data-on="danger" data-off="primary">
<input type="checkbox" checked />
</div>
</div>
<h3>动画（Animation）</h3>
<div class="bs-docs-example">
<div class="switch" data-animated="false">
<input type="checkbox" checked />
</div>
</div>
<h3>禁用（Disabled）</h3>
<div class="bs-docs-example">
<div class="switch">
<input type="checkbox" checked disabled />
</div>
</div>
<h3>文本（Text）</h3>
<div class="bs-docs-example">
<div class="switch" data-on-label="开" data-off-label="关">
<input type="checkbox" checked />
</div>
</div>
<h3>HTML文本（HTML text）</h3>
<div class="bs-docs-example">
<div class="switch" data-on-label="<i class='iconfont'>󰂲</i>" data-off-label="<i class='iconfont'>󰂳</i>">
<input type="checkbox" checked />
</div>
</div>
<pre class="prettyprint linenums"><div class="switch" data-on-label="<i class='icon-ok icon-white'></i>" data-off-label="<i class='icon-remove'></i>">
<input type="checkbox" checked />
</div></pre>
<h3>事件处理（Event handler） <small>javascript</small></h3>
<div class="bs-docs-example">
<div id="mySwitch" class="switch">
<input type="checkbox" checked />
</div>
</div>
<pre class="prettyprint linenums">$('#mySwitch').on('switch-change', function (e, data) {<br> var $el = $(data.el)<br> , value = data.value;<br> console.log(e, $el, value);<br>});</pre>
<h3>Toggle State <small>javascript</small></h3>
<div class="bs-docs-example">
<div id="toggle-state-switch" class="switch">
<input type="checkbox" checked />
</div>
<br>
<br>
<div id="toggle-state-switch-button-on" class="btn btn-primary radius">ON!</div>
<div id="toggle-state-switch-button" class="btn btn-primary radius">Toggle me!</div>
<div id="toggle-state-switch-button-off" class="btn btn-primary radius">OFF!</div>
</div>
<pre class="prettyprint linenums">
$('#toggle-state-switch').bootstrapSwitch('toggleState');
$('#toggle-state-switch').bootstrapSwitch('setState', false); // true || false
</pre>
<h3>销毁（Destroy） <small>javascript</small></h3>
<div class="bs-docs-example">
<div id="destroy-switch" class="switch">
<input type="checkbox" checked />
</div>
<br>
<br>
<button id="btn-destroy-switch" class="btn btn-danger radius"> Destroy me! </button>
</div>
<pre class="prettyprint linenums">
$('#destroy-switch').bootstrapSwitch('destroy');
</pre>
<h3>创建（Create） <small>javascript</small></h3>
<div class="bs-docs-example">
<input id="create-switch" type="checkbox" checked />
<br>
<br>
<div id="btn-create" class="btn btn-default radius">Create</div>
</div>
<pre class="prettyprint linenums">$('#create-switch').wrap('<div class="switch" />').parent().bootstrapSwitch();</pre>
<h3>禁用（Disabled） <small>javascript</small></h3>
<div class="bs-docs-example">
<div id="disable-switch" class="switch">
<input type="checkbox" checked />
</div>
<br>
<br>
<button id="btn-is-active-switch" class="btn btn-default radius"> Is active? </button>
<button id="btn-toggle-activation-switch" class="btn btn-default radius"> Toggle activation! </button>
<button id="btn-disable-switch" class="btn btn-default radius"> Disable! </button>
<button id="btn-activate-switch" class="btn btn-default radius"> Activate! </button>
</div>
</div>
<pre class="prettyprint linenums">
$('#disable-switch').bootstrapSwitch('isActive');
$('#disable-switch').bootstrapSwitch('toggleActivation');
$('#disable-switch').bootstrapSwitch('setActive', false); // true || false
</pre>
<script type="text/javascript" src="../jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="YIQI-UI-bootstrapSwitch.js"></script>
<script>
$('.code').laycode();
$('#mySwitch').on('switch-change', function (e, data) {
var $el = $(data.el)
, value = data.value;
console.log(e, $el, value);
});
$('#toggle-state-switch-button').on('click', function () {
$('#toggle-state-switch').bootstrapSwitch('toggleState');
});
$('#toggle-state-switch-button-on').on('click', function () {
$('#toggle-state-switch').bootstrapSwitch('setState', true);
});
$('#toggle-state-switch-button-off').on('click', function () {
$('#toggle-state-switch').bootstrapSwitch('setState', false);
});
$('#btn-destroy-switch').on('click', function () {
$('#destroy-switch').bootstrapSwitch('destroy');
$(this).remove();
});
$('#btn-create').on('click', function () {
$('#create-switch').wrap('<div class="switch" />').parent().bootstrapSwitch();
$(this).remove()
});
$('#btn-is-active-switch').on('click', function () {
alert($('#disable-switch').bootstrapSwitch('isActive'));
});
$('#btn-toggle-activation-switch').on('click', function () {
$('#disable-switch').bootstrapSwitch('toggleActivation');
});
$('#btn-disable-switch').on('click', function () {
$('#disable-switch').bootstrapSwitch('setActive', false);
});
$('#btn-activate-switch').on('click', function () {
$('#disable-switch').bootstrapSwitch('setActive', true);
});
</script>
</body>
</html>
YIQI-UI css模板快速开发框架 v1.6.0 bulid20190905
需积分: 10 93 浏览量
2019-10-27
23:12:36
上传
评论
收藏 393KB ZIP 举报
yiqiui_v1.6.0.zip （36个子文件） 
YIQI-UI switch 
YIQI-UI-bootstrapSwitch.js 8KB
index.html 7KB YIQI-UI-bootstrapSwitch.css 14KB YIQI-UI.min.css 27KB YIQI-UI.js 781B YIQI-UI.CSS3.min.css 19KB font 
iconfont.svg 205KB iconfont.woff 79KB YIQI-UI-iconfont.min.css 18KB iconfont.eot 132KB iconfont.ttf 131KB jquery-2.1.1.min.js 82KB icheck 
pink.png 1KB yellow.png 1KB blue.png 1KB green.png 1KB YIQI-UI-icheck.min.js 4KB aero.png 1KB YIQI-UI-icheck.css 14KB Thumbs.db 30KB orange.png 1KB minimal.png 1KB purple.png 1KB grey.png 1KB red.png 1KB 说明.htm 4KB资源评论
