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;">
</div>
<br/>
<div id="button1">
<input type="checkbox" checked="checked" />
</div>
</body>
</html>
分享到:
相关推荐
【HDI-V-ToggleButton】是一个关于Web开发的教程,主要关注的是利用Ajax技术来创建一个高效的、交互式的 ToggleButton 控件。在ASP.NET环境中,Ajax(Asynchronous JavaScript and XML)技术允许开发者创建部分页面...
【Ajax-ToggleButton】是一个在Web开发中广泛使用的交互组件,尤其在JavaScript库如jQuery或更专业化的Ajax库中常见。这个控件的核心功能是提供一种用户友好的方式来切换状态,通常表现为开关按钮,例如开启/关闭、...
Android安卓开发经典设计学习例程源代码-ToggleButton.rar
例如,创建一个自定义的ToggleButton类,继承自Android的ToggleButton,并在其内部添加新的方法和字段。这样,我们可以为按钮添加额外的逻辑,比如记录点击次数,或者与其他组件联动。 6. **Touch_Demo** 压缩包中...
为了查看具体的实现细节,你可以解压“ToggleButton-master”文件,阅读其中的源代码,包括XML布局文件、自定义View的Java类、动画资源文件等。通过分析这些代码,你可以深入理解如何自定义Android控件并实现复杂的...
在本教程中,我们将深入探讨`ToggleButton`的使用方法,包括其基本属性、事件监听、自定义样式以及源码分析。 首先,`ToggleButton`是`CheckBox`的一个变体,但它在视觉上提供了更明确的开/关状态。在XML布局文件中...
通过`android:layout_width`和`android:layout_height`调整`ToggleButton`的大小,或者使用`android:padding`来改变边距。 5. **自定义动画** Android允许我们自定义切换状态时的动画效果。可以创建一个`...
### ToggleButton状态开关的使用 在Android开发过程中,`ToggleButton`是一种非常实用的UI控件,它可以被用来作为状态切换的开关。用户可以通过点击该按钮来改变其状态(开或关),这种特性使得`ToggleButton`在很...
- 在 Java 代码中,可以通过 findViewById() 获取到 `ToggleButton` 对象,并使用 `setChecked()` 方法改变其状态,或者监听状态变化事件,使用 `setOnCheckedChangeListener()` 设置监听器。 2. **属性详解**: ...
包含源代码,Winform中可以使用的ToggleButton,有状态切换事件,鼠标经过、点击效果。要看效果请复制该链接https://blog.csdn.net/brzee88/article/details/80426480
在Android开发中,`ToggleButton`是一个非常实用的控件,它继承自`CheckBox`,但提供了更直观的开/关状态显示,常用于模拟物理开关的效果。本篇将深入探讨如何自定义`ToggleButton`实现一个WiFi开关的功能。 首先,...
`ToggleButton`在XML布局文件中可以像其他按钮一样使用,通过设置属性如`android:textOn`和`android:textOff`来指定开关状态的文字,`android:checked`用来初始化开关状态。默认情况下,`ToggleButton`会显示两个...
要查看并使用这个GitHub项目,你需要下载`ToggleButton-master.zip`压缩包,解压后导入到Android Studio,通过阅读源码和示例应用,了解其具体实现。同时,可以参考项目的README文件,获取详细的使用说明和示例代码...
在Android开发中,`...当然,还可以进一步扩展,比如添加动画效果、使用自定义字体等,以满足更复杂的设计需求。记住,自定义控件的关键在于理解Android资源系统和UI组件的工作原理,从而创造出符合应用特色的元素。
这篇资料主要讲解了`ToggleButton`的定义和使用方法。 1. ToggleButton的定义: `ToggleButton`是一种特殊的按钮,它的设计初衷是为了实现开关功能。在Android的视图层次结构中,`ToggleButton`继承自`Button`,但...
WCF的主体资源,整理了很多风格 项目描述: WPF Themes 是应用在WPF项目中的免费主题。...-ToggleButton -RadioButton -CheckBox -TextBox -ComboBox -ListBox -ProgressBar -Slider -TreeView -Expander
在这个名为"ToggleButton-master"的项目中,开发者通过自定义View实现了类似iOS风格的切换效果。 一、`ToggleButton`基础 `ToggleButton`继承自`CompoundButton`,它具有`Checked`属性,可以处于选中(checked)或...
ToggleButton toggleButton = findViewById(R.id.toggleButton); toggleButton.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() { @Override public void onCheckedChanged...