前端知识 -- Bootstrap-Switch(开关插件)

最新推荐文章于 2024-03-21 09:35:54 发布

Hinsion

最新推荐文章于 2024-03-21 09:35:54 发布

阅读量1.3k

点赞数

分类专栏：前端页面知识

前端页面知识专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>bootstrap 开关按钮</title>
   <link rel="stylesheet" href="css/bootstrap.min.css">
   <link rel="stylesheet" href="css/bootstrap-switch.css">

</head>
<body>

   <input id="switch-size" type="checkbox" checked data-size="mini" name="status">


   <script src="js/jquery.min.js"></script>
   <script src="js/bootstrap.min.js"></script>
   <script src="js/bootstrap-switch.js"></script>
   <script type="text/javascript">
      $('[name="status"]').bootstrapSwitch({
         onSwitchChange:function(event,state){
            if(state==true){
               alert('已打开');
            }else{
               alert('已关闭');
            }
         }
      })
   </script>
</body>
</html>

bootstrap-switch属性

js属性名	html属性名	类型	描述	取值范围
state	checked	Boolean	选中状态	true、false
size	data-size	String	开关大小	null、mini、small、normal、large
animate	data-animate	Boolean	动画效果	true、false
disabled	disabled	Boolean	禁用开关	ture、false
readonly	readonly	Boolean	开关状态只读，不能修改	true、false
indeterminate	data-indeterminate	Boolean	模态	true、false
inverse	data-inverse	Boolean	颠倒开关顺序	true、false
radioAllOff	data-radio-all-off	Boolean	允许单选按钮被用户取消选中	true、false
onColor	data-on-color	String	左侧开关颜色	primary、info、success、warning、danger、default
offColor	data-off-color	String	右侧开关颜色	primary、info、success、warning、danger、default
onText	data-on-text	String	左侧开关显示文本	String
offText	data-off-text	String	右侧开关显示文本	String
labelText	data-label-text	String	开关中间显示文本	String
handleWidth	data-handle-width	String	Number	开关左右2侧的宽度
labelWidth	data-label-width	String	Number	开关中间的宽度
baseClass	data-base-class	String	开关基础样式	String
wrapperClass	data-wrapper-class	String / Array	元素样式容器	String / Array
onInit		function	初始化开关	Function
onSwitchChange		function	当开关状态改变时触发	Function

Hinsion

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端知识 -- Bootstrap-Switch(开关插件)

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt; &lt;met
复制链接

扫一扫