bootstrapSwitch 使用

动态设置bootstrapswitch状态

checkbox的html <input type="checkbox" name="mySwitch" id="mySwitch"> 引用bootstrap-switch的css和js <link href="~/Content/bootstrap-switsh/bootstrap-switch.css" rel="stylesheet" /> <script src=&qu…

datatables隐藏列与createdRow渲染bootstrapSwitch形成的BUG

背景: 昨天写了一个页面用于规则库的增删改查. 数据使用datatables渲染,后端返回数据由前端进行一次性渲染和分页. 隐藏列: 排序的ID不展示,但是排序又想按照ID来排,所以把ID单独作为一列,按照ID列排序,再隐藏掉. //排序部分 "order": [[0, "asc"]], //隐藏部分 "columnDefs": [ { "visible": false, "targets": 0 } ]…

bootstrap-switch 使用

网址:http://www.bootcss.com/p/bootstrap-switch/ 界面设置不调用方法没成功,事件也不起作用不知道是jquery版本原因还是什么原因!,下面亲测试可以使用 $('#switch-size').bootstrapSwitch({ onText: "开", offText: "关", onColor: "info", //offColor: "info", size: "small…

AngularJS+bootstrap-switch 实现开关控件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta h…

tips：解决bootstrap-switch 在jqgrid中动态加载不显示的问题

bootstrapo-switch 是一个十分好用的插件,用来关闭开启再好不过了,适合状态类型只有两种的情况下可以进行切换在使用中,在jqgrid动态加载的时候出现不能加载的问题原因是html代码没有得到渲染,那么只要在jqgrid加载完毕后再次渲染即可~ function renderSwitch() { $('.make-switch').bootstrapSwitch(); return(true); } function renderSwitch() { $('.make-switc…

bootstrap 多选款样式：bootstrap-switch

有时候,为了美化checkbox后者radio的时候,让用户体验起来更好,jquery里有icheck. bootstrap里有bootstrap-switch,就简单介绍下bootstrap-switch. 官网地址:http://www.bootcss.com/p/bootstrap-switch/ GitHub:https://github.com/Bttstrp/bootstrap-switch js引入: <script src="/static/js/jquery-2.1.1.…

bootstrap-switch与angularjs结合使用

bootstrap-switch和angularjs结合使用由于angularjs的dom操作总是先执行,导致$(input[name="switch"])找不到元素,所以使用directive自定义指令,有两种方法: html部分: <my-input power="{{x.power}}" did="{{x.id}}"></my-input> directive指令部分: 1.通过插入元素的方法 app.direct…

bootstrap-switch

首先需要引入bootstrap的css和js文件,再引入bootstrap-switch.css和bootstrap-switch.js文件 <script type="text/javascript" src="bootstrap-switch.min.js"></script> <link rel="stylesheet" type="text/css" href="bootstra…

1.bootstrapSwitch 默认选项,加上checked表示true,不加表示false <input type="checkbox" id="" name="status" checked data-size="small" value="1"> 2.swich配置 $('[name="status"]').bootstrapSwitch({ onText: &qu…

改变bootstrapSwitch按钮状态

$('.switch-state').bootstrapSwitch('state',true);…

amazeui的表单开关插件的自定义事件必须添加.bootstrapSwitch 命名空间，给了我们什么启示

amazeui的表单开关插件的自定义事件必须添加.bootstrapSwitch 命名空间,给了我们什么启示一.总结一句话总结:详细看使用文档(说明文档说的真的是非常详细呢,不过循序渐进,不同阶段看懂的内容不同) a.使用插件的时候必须非常详细的看使用文档 b.一些插件的自定义事件是有命名空间的,插件无法使用的时候可以往这上面想 c.on方法绑定事件可以带命名空间 d.amazeui给的插件扩展库还挺有用的 1.amazeui除了插件还有插件扩展库给我们什么启示? 别的前端框架也很有可能有插…

bootstrap-switch使用

bootstrap 的开关. 引入相关文件: <link href="https://cdn.bootcss.com/bootstrap-switch/4.0.0-alpha.1/css/bootstrap-switch.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></scrip…

bootstrap-switch使用，small、mini设置

1.首先需要引用https://www.bootcss.com/p/bootstrap-switch/. bootstrap-switch插件库 2.先引用jquery文件,在引用bootstrap.css样式 .bootstrap-switch.css样式 .bootstrap-switch.js样式 3.代码编码单选控件 <input name="status" data-size="mini" type="checkbox" …

bootstrap-table和bootstrap-switch

{% load staticfiles %} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>项目列表</title> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></scrip…

bootstrap-switch：记一次很坑的问题（连续相同状态的多行数据只有第一个显示按钮，其他行没有开关初始化）

先上截图,第234行都是禁用状态,但是只有第2行显示了禁用开关,后面的都没有开关初始化检查下代码: onLoadSuccess: function(data){ {#获取行数据的状态#} console.log('渲染数据完成后,打印所有数据') console.log(data); var data=$("#mytab").bootstrapTable("getData"); console.log('已获取全部数据%s',data); for (var i=0…

bootstrap-table中使用bootstrap-switch开关按钮

先上图准备工作: 添加css和js文件 #bootstrap开关按钮#} <link href="https://cdn.bootcss.com/bootstrap-switch/3.3.4/css/bootstrap3/bootstrap-switch.min.css" rel="stylesheet"><script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js&q…

JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）

前言:上篇 JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐分享了几个项目中比较常用的组件,引起了许多园友的关注.这篇还是继续,因为博主觉得还有几个非常简单.实用的组件,实在不愿自己一人独享,没办法,谁让博主这么爱分享呢~~ 本文原创地址:http://www.cnblogs.com/landeanfen/p/5603790.html 七.多值输入组件manifest 关于文本框的多值输入,一直是一个比较常见的需求,今天博主推荐一款好用的多值输入组件给大家,不要谢我,请叫我“红…

Bootstrap Metronic 学习记录（二）菜单栏

1.简介 1) .环境配置 2) .提取页面 2).动态生成菜单(无限级别树) 2.系统环境配置项目需要程序数据支撑,这里选择MVC5.0+EF6.0[SQLSERVER](不对MVC架构和SQLServer做出解读) 运行环境:VS2013+MVC5.0+EF6.1+SQLServer2012 解决方案名称:AppSolution 项目名称:App.Web(UI层)与App.Models(数据访问层) -直接访问模式提取theme下的所有文件到MVC的Content,提取admin的i…

基于Metronic的Bootstrap开发框架经验总结（11）--页面菜单的几种呈现方式

在常规的后台管理系统或者前端界面中,一般都有一个导航菜单提供给用户,方便选择所需的内容.基于Metronic的Bootstrap开发框架,是整合了Metroinc样式,以及Boostrap组件模块的内容,因此菜单的效果自然也是和Bootstrap一脉相承的.基于经常使用的几种菜单样式,本文进行了相关的介绍和展示. 1.菜单展示的三种方式菜单的展示可以做成各种各样的效果,本文只是针对性的介绍其中的三种,两种左侧竖放的菜单,一种是水平横放的菜单. 样式1: 菜单收缩后界面如下所示. 样式2: 样式…

用最基本的EF+MVC+JQ+AJAX+bootstrap实现权限管理的简单实例之登陆和操作权限

先来一堆关于上篇文章的废话(不喜者点此隐藏) 今天把博客加了个小功能,就是点标题可以隐藏或展示相关内容,做法很傻,就是引用了bootstrap的两个css类和全部的js文件,其实这样的小功能完全应该自己做的,主要还是因为前端差,还有就是懒.请大家不要太过在意命名和前端样式,我并没有进入公司工作,命名没有具体规范,都是随心所欲.前端实在太差,如果你觉得颜色样式太差,只能说明我的审美有问题,咱们主要看功能实现. 上篇文章发布后有一定的推荐量和浏量,对一个初学者来说,自认为还是挺不错的.最主要的是收到…

Metronic学习之路

简介 1.Metronic 是一个基于 Bootstrap 3.* 设计的自适应.多用途的管理后台模板. 2.HTML页面开头都有着下面一段代码来检测 ie 浏览器的版本,并根据不同版本应用特定的类到显示页面.  <!--[if IE 9]> <html lang="en"…

Web 前端

全栈的定义是什么? 如果前端开发/后端开发/部署/运维都能hold住就算full stack, 我现在都overflow stack了, 需求/架构/开发/项目管理/运维都做. 单开发这块, DWBI项目也做, C/S项目也开发, B/S项目也开发, 最没有想到的是最近1年B/S的前端居然也做了不少. 当前流行的前端技术, 大都有些许了解, 但比较熟悉的还是 bootstap + JQuery 这一套. 本文总结一些我认为不错的组件. ==============组件包=========…

[Tips] Useful link ... on going

1. CSS Bootstrap http://getbootstrap.com/ Bootstrap 中文文档 http://getbootstrap.com/2.3.2/ 最全的 Twitter Bootstrap 开发资源清单 http://www.iteye.com/news/26653 http://wrongwaycn.github.io/bootstrap/docs/index.html Fontawesome http://fortawesome.github.io/Font-A…

基于Bootstrap的jQuery开关按钮插件

按钮下载使用方法首先要在页面中引入依赖文件: jquery.Bootstrap.Bootstrap Switch CSS和Bootstrap Switch JS.这里用的是bootstrap2 <link href="bootstrap.css" rel="stylesheet"> <link href="bootstrap-switch.css" rel="stylesheet"> &l…

后台框架--HUI 的学习跟使用1

下载跟查看说明文档:官方 https://github.com/jackying/ 官网:http://www.h-ui.net/H-ui.admin.shtml 后台,http://www.h-ui.net/ 前台简单介绍下: H-ui前端框架是在bootstrap的思想基础上基于 HTML.CSS.JAVASCRIPT开发的轻量级web前端框架,开源免费,简单灵活,兼容性好,满足大多数中国网站.分了前端UI与后端UI. 国人生产! 符合国人! 先看下官网的一些常见问题: 先知道下 ===…

基于Bootstrap的超酷jQuery开关按钮插件

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJgAAAA2CAIAAAC0tsfoAAAB/0lEQVR4nO3bQWrCQBTGcc/mbVz0DD…

ASP.NET MVC 4 中Jquery上传插件Uploadify简单使用-版本:3.2.1

1.官网下载开发包:http://www.uploadify.com/download/,选择免费的Flash版本: 2.解压后,需要用到以下几个文件: 需要修改uploadify.css中取消上传按钮的背景图片路径: .uploadify-queue-item .cancel a { background: url('../img/uploadify-cancel.png') 0 0 no-repeat; float: right; height: 16px; text-indent: -99…

使用jQuery获取Bootstrap Switch的值

$('#switcher').bootstrapSwitch('state'); // true || false $('#switcher').bootstrapSwitch('toggleState'); $('#switcher').bootstrapSwitch('setState', false); // true || false 访问这个链接获取更多的方法博文参考自:How to get twitter bootstrap toggle switch values using j…

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

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

flat ui switch 改变状态而不响应事件

Flat UI是一套精美的扁平风格 UI 工具包,基于 Twitter Bootstrap实现.这套界面工具包含许多基本的和复杂的 UI 部件,例如按钮,输入框,组合按钮,复选框,单选按钮,标签,菜单,进度条和滑块,导航元素等等. 对于我们这些不会前端的小码农来说,是绝对的神器. 但也正是因为不了解前端,所以哪怕是丁点的问题,对我们来说都是痛不欲生. 这次让我痛不欲生的便是flat ui的switch组件. 该组件是用来替代 checkbox 的组件, 关于它的用法,可以参见这里. switch…

【bootstrapSwitch 使用】的更多相关文章