bootstrap开关切换

2024-11-01

Bootstrap 开关（switch）使用整理

1.在JS里根据指定的 1或者0 或者其它值让按钮变成 on 或者 off (通常需要根据数据库查询的结果初始化开关的状态) (--开关插件包 bootstrap-switch.min.js) <div class="make-switch" data-on-label="开" data-off-label="关" id="toggle-state-switch" data-on="success"

bootstrap tab切换如何让鼠标移动自动切换内容

bootstrap集成了很多功能,比如nav-tabs组件,可以将相似的内容集中在一个区块中展示.bootstrap tab切换默认是要点击才会切换的,如何实现鼠标移动就自动切换呢?如下图所示,光标移动到“资讯中心”不用鼠标单击就马上显示相应的文章列表. 这个案例中用两次调用nav-tabs切换,如果不需要可以删除第二次调用,并删除javascript语句中的tabs-4.5.6就可以了 <!DOCTYPE html> <html lang="zh-CN"> &

纯css实现checkbox开关切换按钮

我们都知道 checkbox 标签默认样式实在是太low了,故对CheckBox美化很有必要. 现提供两种方式对其进行美化. 方法一 <div class="switch-wrap active"> <span></span> </div> .switch-wrap{ position: relative; display: inline-block; width: 52px; height: 32px; border: 1px sol

尝试用React写几个通用组件 - 带搜索功能的下拉列表，开关切换按钮，弹出框

尝试用React写几个通用组件 - 带搜索功能的下拉列表,开关切换按钮,弹出框近期正在逐步摸索学习React的用法,尝试着写几个通用型的组件,整体项目还是根据webpack+react+css-medules构建, 项目代码 https://github.com/sunrun93/react-custom-components 启动项目: git clone git@github.com:sunrun93/react-blog-app.git npm i npm start 启动项目后,如若发

Cocos2d—X游戏开发之CCToggle（菜单标签切换）CCControlSwitch（开关切换）

Cocos2d—X游戏开发之CCToggle(菜单标签切换) 首先继承子CCMenu,是菜单标签中的一种.‘ class CC_DLL CCMenuItemToggle : public CCMenuItem { /** returns the selected item */ CC_PROPERTY(unsigned int, m_uSelectedIndex, SelectedIndex); /** CCMutableArray that contains the subitems. You

Bootstrap —— tab切换

tab切换 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible&quo

android自定义控件(2)-拖拽实现开关切换

在这里,我们的主要工作就是在原有代码的基础上,增加一个重写的onTouchEvent方法,刚添加上来的时候是这个样子的: @Override public boolean onTouchEvent(MotionEvent event) { return super.onTouchEvent(event); } 对于触摸事件来说,一般返回值为true的话,那么就代表在这里消费掉本次触摸,而返回false的话,就在当前位置对本次触摸不做处理或者不能完全处理,还需要继续将本次事件分发给后续view或者

Bootstrap 开关（switch）控件需要注意的问题

远程文档地址:http://www.bootcss.com/p/bootstrap-switch/ 先上lz遇到的小坑:自古无图无真相的原则上面代码注释掉后就是下面这个图片效果!然后加载顺序也要注意以下两个问题一个是需要提前把值赋好然后加载数据需要先加载数据然后在初始化这个值突然发现有些小问题:这样处理就好了 /** * 初始化切换按钮 */ PA.resetCheckbox = function(){ setTimeout(function(){ $("input[name =

Bootstrap switch 切换状态踩坑

Boostrap switch 下载地址(http://www.bootcss.com/p/bootstrap-switch/),同时配有一些简单的用例. 其中写到 Toggle State切换状态的方法如下: 然而这句代码拿到项目中却并不能切换按钮状态,并且控制台报错:Uncaught TypeError: Cannot read property 'apply' of undefined. 经查询发现正确的方法如下: $('#toggle-state-switch').boots

bootstrap 图片切换

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="css/bootstrap.css" /> <script type="text/javascript" src="js/jquer

bootstrap图片切换效果

<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, i

label+input实现开关切换效果

Document 主要使用label+input来实现改变left的值,下面是核心代码,意思就是选中的input的兄弟节点.box下的.switch-btn元素的left会变成0px(原来是-37px); .ipt:checked + .box .switch-btn { left: 0; } 当然要配合transition来实现下面是效果 ON OFF 全部css代码 .ipt { display: none; } .box { width: 74px; height: 30px; line

Bootstrap相关优质项目推荐

Bootstrap 编码规范by @mdo Bootstrap 编码规范:编写灵活.稳定.高质量的 HTML 和 CSS 代码的规范. jQuery API 中文手册根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册. w3schools原版国内镜像 w3schools.com 是最受欢迎的前端技术教程网站,但是国内用户一直不能访问,并且国内的中文翻译版本十分陈旧.因此做了个镜像,希望英文好的同学直接去看原版教程吧! 优站精选Bootstr

【Bootstrap】优秀小插件收集

Bootstrap中不乏很多优秀的小插件来让界面更加漂亮.比如之前做过笔记的bootstrap-fileinput,select2,datetimepicker等都是属于这一系列的.这些相对而言比较大一点.其他还有一些比较轻比较小的插件,也很好,特此开篇来记录一下. 由于是基于bootstrap的插件,所以基本上所有插件都是需要bootstrap和jquery相关文件的.也就是说下面的说明中我们默认页面上已经有了: <link href="/static/css/bootstrap.min

基于Metronic4.1的Bootstrap脚本样式说明

虽说Bootstrap作为当下最流行的响应式的UI,但是对于一些在Bootstrap基础上扩展的UI的资料算是少之又少.这里楼主结合这一个月的辛酸把那些脚本跟样式整理一下下... 关于Metronic4.1的相关信息也只能从Metronic4.1的Demo中扣出来,首先看下如下样式:  <link href="@Url.StaticFile("/assets/global/plugins/fo

一种全新的MEMS开关——高性能、快速、低能耗以及双稳态

这种开关最早由申军教授和研究生阮梅春发明,研究生埃里克·朗格卢瓦在简化结构和缩小尺寸上作了探索,黄志林用相同原理做出了MEMS光学镜子开关,曹志良改变设计.材料和工艺后制作出了能同步开关的矩阵.这种MEMS开关的悬臂镀有软磁材料,在外磁场中趋向磁场方向排列从而稳定住开或关的状态,衬底上的平面线圈在需要开关切换时瞬间通电,产生的电磁场将改变悬臂的磁化方向,从而使悬臂在外磁场作用下旋转,改变开关状态. 一.软磁悬臂在外磁场中的双稳态用软磁材料制造的悬臂在外磁场中总是趋向于跟外磁场平行.图一显示了软

Bootstrap相关优质项目必备网址

1:文档全集:这里收集了Bootstrap从V1.0.0版本到现在,整个文档的历史.Bootstrap本身就是一个传奇,而这些文档就是传奇的见证! 官方网址:http://docs.bootcss.com/Bootstrap 2:jQuery UI Bootstrap:基于Bootstrap样式的 jQuery UI 控件 (v0.5). 官方网址:http://www.bootcss.com/p/jquery-ui-bootstrap/ 3:WEB安全色官方网址:http://www.boo

如何优雅阻止view UI 的 Switch 切换？

一.官方文档提供的方法个人觉得官方提供的方法有时候不能够满足现实需求,第二点是view UI版本必须是4.0.0版本及以上才能使用这个开关组件. 二.自定义方法解决 ①将开关禁用掉加一个 disabled 属性,不用框架的默认行为. ②将开关禁用状态下的手势样式去除. .ivu-switch-disabled:after { cursor: not-allowed; } ③将以上禁用时的样式改为一下样式 .ivu-switch-disabled:after{ cursor: pointer

jquery+bootstrap学习笔记

最近小颖接了个私活,客户要求用jquery和bootstrap来实现业务需求,小颖总结了下在写的过程中的一下坑,来记录一下 1.动态加载html文件 switch (_domName) { case 'firstMenu': // 首页 $("main").load('home.html'); break case 'secondMenu': // 下拉菜单 $("main").load("dropdown.html"); break case

metronic后台模板学习 -- 所用外部插件列表

插件名称描述 URL jQuery 1.11.0 js库,不用介绍了 http://www.jquery.com jQuery Migrate plugin 1.2.1 jQuery 老版本过渡迁移插件 http://www.jquery.com Twitter Bootstrap v3.3.4 Bootstrap, 不用介绍了 http://getbootstrap.com Select2 v3.4.6 Select2, 基于jQuery的一个插件,支持搜索,远程搜索,以及结果翻页. htt

bootstrap开关切换

热门专题