`

BootstrapPlugin - toggleButton 使用笔记

阅读更多
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>


分享到:
评论

相关推荐

    HDI-V-ToggleButton

    【HDI-V-ToggleButton】是一个关于Web开发的教程,主要关注的是利用Ajax技术来创建一个高效的、交互式的 ToggleButton 控件。在ASP.NET环境中,Ajax(Asynchronous JavaScript and XML)技术允许开发者创建部分页面...

    ajax-ToggleButton

    【Ajax-ToggleButton】是一个在Web开发中广泛使用的交互组件,尤其在JavaScript库如jQuery或更专业化的Ajax库中常见。这个控件的核心功能是提供一种用户友好的方式来切换状态,通常表现为开关按钮,例如开启/关闭、...

    Android安卓开发经典设计学习例程源代码-ToggleButton.rar

    Android安卓开发经典设计学习例程源代码-ToggleButton.rar

    自定义按钮 - ToggleButton

    例如,创建一个自定义的ToggleButton类,继承自Android的ToggleButton,并在其内部添加新的方法和字段。这样,我们可以为按钮添加额外的逻辑,比如记录点击次数,或者与其他组件联动。 6. **Touch_Demo** 压缩包中...

    ToggleButton -master实现ToggleButton的滑动动画效果

    为了查看具体的实现细节,你可以解压“ToggleButton-master”文件,阅读其中的源代码,包括XML布局文件、自定义View的Java类、动画资源文件等。通过分析这些代码,你可以深入理解如何自定义Android控件并实现复杂的...

    ToggleButton使用方法源码

    在本教程中,我们将深入探讨`ToggleButton`的使用方法,包括其基本属性、事件监听、自定义样式以及源码分析。 首先,`ToggleButton`是`CheckBox`的一个变体,但它在视觉上提供了更明确的开/关状态。在XML布局文件中...

    Android之自定义ToggleButton使用

    通过`android:layout_width`和`android:layout_height`调整`ToggleButton`的大小,或者使用`android:padding`来改变边距。 5. **自定义动画** Android允许我们自定义切换状态时的动画效果。可以创建一个`...

    ToggleButton状态开关的使用

    ### ToggleButton状态开关的使用 在Android开发过程中,`ToggleButton`是一种非常实用的UI控件,它可以被用来作为状态切换的开关。用户可以通过点击该按钮来改变其状态(开或关),这种特性使得`ToggleButton`在很...

    C#版winform中使用的ToggleButton

    包含源代码,Winform中可以使用的ToggleButton,有状态切换事件,鼠标经过、点击效果。要看效果请复制该链接https://blog.csdn.net/brzee88/article/details/80426480

    安卓Android源码——ToggleButton.rar

    - 在 Java 代码中,可以通过 findViewById() 获取到 `ToggleButton` 对象,并使用 `setChecked()` 方法改变其状态,或者监听状态变化事件,使用 `setOnCheckedChangeListener()` 设置监听器。 2. **属性详解**: ...

    ToggleButton

    在Android开发中,`ToggleButton`是一个非常实用的控件,它继承自`CheckBox`,但提供了更直观的开/关状态显示,常用于模拟物理开关的效果。本篇将深入探讨如何自定义`ToggleButton`实现一个WiFi开关的功能。 首先,...

    自定义ToggleButton

    `ToggleButton`在XML布局文件中可以像其他按钮一样使用,通过设置属性如`android:textOn`和`android:textOff`来指定开关状态的文字,`android:checked`用来初始化开关状态。默认情况下,`ToggleButton`会显示两个...

    Github:Android自定义ToggleButton(模仿ios风格)

    要查看并使用这个GitHub项目,你需要下载`ToggleButton-master.zip`压缩包,解压后导入到Android Studio,通过阅读源码和示例应用,了解其具体实现。同时,可以参考项目的README文件,获取详细的使用说明和示例代码...

    android自定义开关ToggleButton

    在Android开发中,`...当然,还可以进一步扩展,比如添加动画效果、使用自定义字体等,以满足更复杂的设计需求。记住,自定义控件的关键在于理解Android资源系统和UI组件的工作原理,从而创造出符合应用特色的元素。

    Android中ToggleButton的作用与定义.pdf

    这篇资料主要讲解了`ToggleButton`的定义和使用方法。 1. ToggleButton的定义: `ToggleButton`是一种特殊的按钮,它的设计初衷是为了实现开关功能。在Android的视图层次结构中,`ToggleButton`继承自`Button`,但...

    WPF Themes 主体风格 样式

    WCF的主体资源,整理了很多风格 项目描述: WPF Themes 是应用在WPF项目中的免费主题。...-ToggleButton -RadioButton -CheckBox -TextBox -ComboBox -ListBox -ProgressBar -Slider -TreeView -Expander

    ToggleButton-master

    在这个名为"ToggleButton-master"的项目中,开发者通过自定义View实现了类似iOS风格的切换效果。 一、`ToggleButton`基础 `ToggleButton`继承自`CompoundButton`,它具有`Checked`属性,可以处于选中(checked)或...

    自定义个性化togglebutton

    ToggleButton toggleButton = findViewById(R.id.toggleButton); toggleButton.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() { @Override public void onCheckedChanged...

Global site tag (gtag.js) - Google Analytics