Bootstarp-switch(動畫開關插件)

時間 2019-11-21

標籤 bootstarp switch 動畫開關插件简体版

原文原文鏈接

bootstarp-switch（動畫開關插件）

廢話很少說簡單，方便仍是挺不錯的，代碼以下：javascript

　　1.引入必要 css/js 文件

1     <!--引入 bootstrap 樣式-->
2     <link href="static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" />
3     <!--引入 bootstrap-switch 插件樣式-->
4     <link href="static/bootstrap-3.3.7-dist/switch/bootstrap-switch.min.css" rel="stylesheet" />
5     <script src="static/js/jquery.min.js"></script>
6     <!--引入 bootstrap 腳本-->
7     <script src="static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
8     <!--引入 bootstrap-switch 插件腳本-->
9     <script src="static/bootstrap-3.3.7-dist/switch/bootstrap-switch.min.js"></script>

　　2.html代碼

1 <body>
2     <form id="form1" runat="server">
3         <div class="container">
4             <input name="status" type="checkbox" data-size="small" />
5         </div>
6     </form>
7 </body>

　　3.js實現開關控件的初始化

 1     <script type="text/javascript">
 2         $(document).ready(function () {
 3             $('[name="status"]').bootstrapSwitch({
 4                 onText: "ON",
 5                 offText: "OFF",
 6                 onColor: "success",
 7                 offColor: "info",
 8                 size: "small",
 9                 onSwitchChange: function (event, state) {
10                     if (state == true) {
11                         //成功
12                     } else {
13                         //失敗
14                     }
15                 }
16             })
17         });
18     </script>

　　4.效果圖

bootstrap-switch屬性

js屬性名	html屬性名	類型	描述	取值範圍	默認值
state	checked	Boolean	選中狀態	true、false	true
size	data-size	String	開關大小	null、mini、small、normal、large	null
animate	data-animate	Boolean	動畫效果	true、false	true
disabled	disabled	Boolean	禁用開關	ture、false	false
readonly	readonly	Boolean	開關狀態只讀，不能修改	true、false	false
indeterminate	data-indeterminate	Boolean	模態	true、false	false
inverse	data-inverse	Boolean	顛倒開關順序	true、false	false
radioAllOff	data-radio-all-off	Boolean	容許單選按鈕被用戶取消選中	true、false	false
onColor	data-on-color	String	左側開關顏色	primary、info、success、warning、danger、default	primary
offColor	data-off-color	String	右側開關顏色	primary、info、success、warning、danger、default	default
onText	data-on-text	String	左側開關顯示文本	String	ON
offText	data-off-text	String	右側開關顯示文本	String	OFF
labelText	data-label-text	String	開關中間顯示文本	String
handleWidth	data-handle-width	String\|Number	開關左右2側的寬度	String\|Number	auto
labelWidth	data-label-width	String\|Number	開關中間的寬度	String\|Number	auto
baseClass	data-base-class	String	開關基礎樣式	String	bootstrap-switch
wrapperClass	data-wrapper-class	String \| Array	元素樣式容器	String \| Array	wrapper
onInit		function	初始化開關	Function	function（event，state）｛｝
onSwitchChange		function	當開關狀態改變時觸發	Function	function（event，state）｛｝

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。