BootstrapPlugin - toggleButton 使用笔记

最新推荐文章于 2024-11-06 03:16:51 发布

Outaku

最新推荐文章于 2024-11-06 03:16:51 发布

阅读量225

点赞数

分类专栏： bootstrap 文章标签： bootstrap toggle-buttons plugin checkbox ViewUI

bootstrap 专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何将Bootstrap中的checkbox转换为美观的开关按钮样式，并提供了详细的代码实现及配置选项说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

BootstrapPlugin - toggleButton 使用笔记

1) checkbox 转换为开关的样式，很有趣。
留档备份

2) 官方文档 & 官方DEMO
[url]http://www.larentis.eu/bootstrap_toggle_buttons/[/url]

3) 截图
[img]http://dl.iteye.com/upload/picture/pic/121707/0936a74f-77bb-3831-a5f5-6d6c35a23f87.png[/img]
[img]http://dl.iteye.com/upload/picture/pic/121709/78117f97-c5a8-3036-a6e0-daa7ca7dced5.png[/img]

4) 代码


<!DOCTYPE HTML>
<html lang="zh">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Bootstrap Base</title>
        <link type="text/css" rel="stylesheet" href="css/bootstrap.css" />
        <link type="text/css" rel="stylesheet" href="css/bootstrap-toggle-buttons.css" />

        <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script>
        <script type="text/javascript" src="js/bootstrap-toggleButtons.js"></script>
        <script type="text/javascript">
        	$(document).ready(function() {
        		$("[rel='tooltip']").tooltip({placement: "right"});

        		$("#button1").toggleButtons({
        			onChange: function($el, status, e) {
        				$("#log").text("status = " + status);
        			},
        			label: {
        				enabled: "开启",
        				disabled: "关闭"
        			},
        			style: {
        				enabled: "info",
        				disabled: "danger"
        			},
        			animated: true,
        			transitionspeed: 0.10,
        			width: 100,
        			height: 50
        		});
        	});
        </script>

    </head>
    <body>
    	<div id="log" style="border: 1px solid #000;">
    		 
    	</div>
    	<br/>
	<div id="button1">
		<input type="checkbox" checked="checked" />
	</div>
    </body>
</html>