jquery switch
<!DOCTYPE html>
<html>
<head>
</head>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link href="https://unpkg.com/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.css" rel="stylesheet">
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script src="https://unpkg.com/bootstrap-switch"></script>
<body>
<input type="checkbox" data-value="id" class="switch" /> data-on-text="open"
ontext offtext
size null, 'mini', 'small', 'normal', 'large'
onColor offColor 'primary', 'info', 'success', 'warning', 'danger', 'default'
</body>
<script stype="javascript/text">
$(".switch").bootstrapSwitch({
onText: "Open",
offText: "Close",
onColor: "success",
offColor: "primary",
onSwitchChange: function(event, state) {
console.log(this); // DOM element
console.log(event); // jQuery event
console.log(state); // true | false
console.log($(this).data('value'));
state=false;
}
});
$(".switch").bootstrapSwitch("size" ,"large");
</script>
</html>
更多精彩
