bootstrap-switch.js,让checkbox美起来

简介: bootstrap-switch.js,让checkbox美起来

效果

image.png

image.png


材料准备


Bootstrap 开关(switch)控


开始


<link type="text/css" rel="stylesheet" href="${ctx}/components/switch/css/bootstrap3/bootstrap-switch.min.css" />
<script type="text/javascript" src="${ctx}/components/switch/js/bootstrap-switch.min.js"></script>

引入这两个文件,至于bootstrap的css和js,肯定是要的!


<div class="switch" onColor="success" offColor="warning" onText="参与" offText="不参与" labelText="大宗交易">
    <input type="checkbox" checked />
</div>



1. div完全是为了给checkbox添加式样。

2. input就很简单了,就是普通的标签。


启动


$("div[class='switch']").each(function() {
    $this = $(this);
    var onColor = $this.attr("onColor");
    var offColor = $this.attr("offColor");
    var onText = $this.attr("onText");
    var offText = $this.attr("offText");
    var labelText = $this.attr("labelText");
    var $switch_input = $(" :only-child", $this);
    $switch_input.bootstrapSwitch({
        onColor : onColor,
        offColor : offColor,
        onText : onText,
        offText : offText,
        labelText : labelText
    });
});
相关文章
|
前端开发 JavaScript 容器
|
6月前
|
JavaScript 前端开发
【Vue & JavaScript & Css】Multiple class name duplication problem(js/jq原生导致多个类名重复问题)
【Vue & JavaScript & Css】Multiple class name duplication problem(js/jq原生导致多个类名重复问题)
|
前端开发 JavaScript
|
JavaScript 前端开发
js获取input?
js获取input?
Hammer.js分析(三)——input.js
input.js是所有input文件夹中类的父类,浏览器事件绑定、初始化特定的input类、各种参数计算函数。 Input父类和其子类就是在做绑定事件,各种参数计算、整合、设置等返回自定义事件对象,交给识别器的相关对象使用。
Hammer.js分析(三)——input.js
|
JavaScript 前端开发
使用js操作checkbox
我们在项目中经常会遇到这个问题:使用js判断checkbox框是否被选中以及使用js对checkbox进行操作。 其实这些需求很简单,这里给出使用原生js和jQuery来完成这些需求。
1222 0
|
JavaScript 前端开发
js之radio应用实例
radio和checkbox还有select,可谓是前后端常用三剑客啊!特别是checkbox和select,关于这两个今天不讲,因为在下面这几篇文章,我已经比较详细的讲解了。 SpringMVC之ajax+select下拉框交互常用方式 checkbox选中并通过ajax传数组到后台接收 关于checkbox自动选中 今天主要讲解的是radio。
1185 0
|
JavaScript 数据安全/隐私保护 前端开发
记一次js之button问题
问题描述:记得某天,发现一件让我非常气愤的事情,居然因为一个按钮导致页面跳转失败或者是根本跳转不了界面,哪怕404也不给我报。 问题回现步骤: (1)正常输入url localhost:8080/test 可以看到一个登陆界面; (2)正常录入表单信息点击提交,在输入正确的用户名和密码的前提下,居然最后出现这样的情况 地址由localhost:8080/test变为localhost:8080/test/? 多了一个问号,这让我觉得非常奇怪。
1087 0