BootstrapPlugin - toggleButton 使用笔记 - 马勒・格・彼得

yingzhor

浏览: 563908 次
性别:
来自: 长沙

最近访客更多访客>>

zjut_wyj

subchen

a1002323289

pangpanlong

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

BootstrapPlugin - toggleButton 使用笔记

博客分类：

bootstrap

bootstrap toggle-buttons plugin checkbox

BootstrapPlugin - toggleButton 使用笔记

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

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

3) 截图

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;">
    		&nbsp;
    	</div>
    	<br/>
	<div id="button1">
		<input type="checkbox" checked="checked" />
	</div>
    </body>
</html>

bootstrap-toggleButtons.zip (195.8 KB)
下载次数: 48

分享到：

Spring集成junit | BootstrapPlugin - typeahead-ex 使用笔记

2012-12-19 10:10
浏览 4094
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

BootstrapPlugin - toggleButton 使用笔记

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

BootstrapPlugin - toggleButton 使用笔记

评论

发表评论

相关推荐

BootstrapPlugin - typeahead-ex 使用笔记

BootstrapPlugin - prettyCheckable 使用笔记

BootstrapPlugin - editable 使用笔记

BootstrapPlugin - tags 插件编写 (原创bootstrap插件)

BootstrapPlugin - notify 使用笔记

BootstrapPlugin - wysihtml5 使用笔记

BootstrapPlugin - datepicker 使用笔记

BootstrapPlugin - daterangepicker 使用笔记

Bootstrap相关资料整理

最近访客更多访客>>