<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>
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 pink@2x.png 1KB purple@2x.png 1KB blue.png 1KB aero@2x.png 1KB red@2x.png 1KB green.png 1KB YIQI-UI-icheck.min.js 4KB orange@2x.png 1KB grey@2x.png 1KB yellow@2x.png 1KB minimal@2x.png 1KB aero.png 1KB YIQI-UI-icheck.css 14KB Thumbs.db 30KB orange.png 1KB blue@2x.png 1KB minimal.png 1KB green@2x.png 1KB purple.png 1KB grey.png 1KB red.png 1KB 说明.htm 4KB资源评论
weixin_38744270
- 粉丝: 329
- 资源: 2万+
最新资源
- 拳皇97.exe拳皇972.exe拳皇973.exe
- Matlab根据flac、pfc或其他软件导出的坐标及应力、位移数据再现云图 案例包括导出在flac6.0中导出位移的fish代码（也可以自己先准备软件导出的坐标数据及对应点的位移或应力数据，可根据需
- python-geohash-0.8.5-cp38-cp38-win-amd64
- 法码滋.exe法码滋2.exe法码滋3.exe
- 串联式、并联式、混联式混合动力系统simulink控制策略模型(串联式、并联式、混联式每个都是独立的需要单独说拿哪个，默认是混联式RB) 有基于逻辑门限值、状态机的规则控制策略(RB)、基于等效燃油
- 医药用品检测21-YOLO（v5至v11）、COCO、Paligemma、VOC数据集合集.rar
- 数据恢复软件 Apeaksoft Data Recovery for Mac v1.6.16
- 阅读工具 OmniReader Pro for Mac v3.0.3
- 数据恢复 Disk Drill Enterprise for Mac v5.7.1704
- 全自动批量建站快速养权重站系统【纯静态html站群版】：(GPT4.0自动根据关键词写文章+自动发布+自定义友链+自动文章内链+20%页面加提权词)
- 医药用品检测53-YOLO（v5至v11）、COCO、CreateML、Paligemma数据集合集.rar
- req-sign、bd-ticket-ree-public加密算法（JS）
- 船舶燃料消耗和二氧化碳排放分析数据集，燃料消耗和碳排放关联分析数据
- KUKA机器人安装包，与PROFINET软件包
- 非wine、原生Linux迅雷安装包deb文件，支持Ubuntu、UOS统信、深度Deepin、LinuxMint、Debain系通用
- VScode最新安装包macos版本
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
