前端插件之Bootstrap Switch 选择框开关控制

简介

Bootstrap Switch是一款轻量级插件,可以给选择框设置类似于开关的样式

它是依赖于Bootstrap的一款插件

下载

下载地址

在线引用

导入

因为它是依赖于Bootstrap的一款插件,所以,在引入之前要先引入Bootstrap样式

<link rel="stylesheet" type="text/css" href="/static/plugin/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/plugin/switch/bootstrap-switch.min.css">
<script src="/static/plugin/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/plugin/switch/bootstrap-switch.min.js"></script>

使用

# 定义一个选择框
<input type="checkbox" name="test">
# 给选择框应用样式
<script type="text/javascript">
        $("[name=‘test‘]").bootstrapSwitch();
</script>

属性

除了默认的样式,还可以通过给input框设置属性的方式给它自定义一些样式

按钮大小

data-size="..."

  1. Mini  迷你
  2. Small 小号
  3. Normal 正常
  4. Large 大号

按钮颜色

data-on-color="..."

data-off-color="..."

  1. primary 深蓝
  2. info   浅蓝
  3. success 绿色
  4. warning 黄色
  5. danger 红色

按钮文字

data-on-text="..."(str类型)

data-off-text="..."

按钮宽度

data-handle-width=".."(int类型)

label宽度

data-label-width="..."(int类型)

只可读

readonly=""

禁用

disabled=""

更多

原文地址:https://www.cnblogs.com/fu-yong/p/8794457.html

时间: 2024-10-08 12:52:41

前端插件之Bootstrap Switch 选择框开关控制的相关文章

WebUploader 上传插件结合bootstrap的模态框使用时选择上传文件按钮无效问题的解决方法

由于种种原因(工作忙,要锻炼健身,要看书,要学习其他兴趣爱好,谈恋爱等),博客已经好久没有更新,为这个内心一直感觉很愧疚,今天开始决定继续更新博客,每周至少一篇,最多不限篇幅. 今天说一下,下午在工作中遇到的一个问题:公司的后端同事用bootstrap的模态框,结合WebUploadder做后台上传文件的功能的时候,发现上传按钮点击无效.同事过来请求我支援,我研究了下,发现了三种解决方案,下面具体说说是这三种方法是怎么解决的. 我们先来分析一下解决这个问题的思路: 为什么上传控件放到模态框里面就

左右选择框 js插件

随着项目的进展,测试工程师在更多的浏览器中兼容性测试中,发现有些浏览器不支持option的触发事件,这就造成了先前一篇博文bootstrap 左右框多项选择示例 中左右选择框的失效,于是我就由原先的select-option结构 改成了 现在的 ul-li 结构,并写成了js插件的形式,方便以后调用和修改,并在多个浏览器测试中得到验证: 实现的页面如下: jsp页面的修改如下: 1 <div id="province_dchannel"> 2 <div class=&

原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间

原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!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

jquery.chosen.js下拉选择框美化插件项目实例

由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生变化.为了界面的美观,不得已查资料寻找另外的插件. 使用jquery.chosen.js下拉选择框美化插件同样也能达到类似效果 完成效果如下 实现步骤如下 1.导入相关文件 <link rel="stylesheet" href="${ctxStatic}/css/chos

Bootstrap switch 开关事件处理

需要使用Bootstrap switch,实现通过.拒绝功能并且在开关至拒绝时,显示textarea框输入原因. 1.css引用 <link href="switch/css/bootstrap-switch.min.css" rel="stylesheet"> 2.js引用 <script src="switch/js/bootstrap-switch.min.js"></script> 3.页面(使用mod

Bootstrap 弹出框(Popover)插件

Bootstrap 弹出框(Popover)插件与Bootstrap 提示工具(Tooltip)插件类似,提供了一个扩展的视图,用户只需要把鼠标指针悬停到元素上面即可.弹出框的内容完全由Bootstrap Data API来填充. 用法 弹出框插件根据需要生成内容或标记,默认情况下把弹出框(Popover)放在它们触发元素的后面,您可以有两种方法来启动弹出框 1.通过data属性:如需要添加一个弹出框,只需要向锚或按钮添加一个data-toggle="popover"即可.锚的 tit

Bootstrap系列 -- 15. 下拉选择框select

Bootstrap框架中的下拉选择框使用和原始的一致,多行选择设置multiple属性的值为multiple.Bootstrap框架会为这些元素提供统一的样式风格 <form role="form"> <div class="form-group"> <select class="form-control"> <option>1</option> <option>2</

Bootstrap 实例 - 模态框(Modal)插件

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 模态框(Modal)插件</title> <link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.m

[jQueryUI] - Chosen:select下拉选择框美化插件及问题【转】

hosen 是一个支持jquery的select下拉框美化插件,它能让丑陋的.很长的select选择框变的更好看.更方便.不仅如此,它更扩展了select,增加了自动筛选的功能.它可对列表进行分组,同时也可禁用某些选择项. 先来看下插件的效果:   跟这个比起来,原来的select样式是不是弱爆了! 马上来武装我们的select吧: 1.先把js和css文件引用到网页里面去: ? 1 2 3 <link href="js/jqueryUI/chosen/chosen.css" t