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


<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

你可能感兴趣的:(前端页面知识)