zoukankan      html  css  js  c++  java
  • bootstrap table 自定义checkbox样式

    //css

    <style>
            .checkbox-custom {
                position: relative;
                padding: 0 15px 0 25px;
                margin-bottom: 7px;
                margin-top: 0;
                display: inline-block;
            }
            /*
            将初始的checkbox的样式改变
            */
            .checkbox-custom input[type="checkbox"] {
                opacity: 0;/*将初始的checkbox隐藏起来*/
                position: absolute;
                cursor: pointer;
                z-index: 2;
                margin: -6px 0 0 0;
                top: 50%;
                left: 3px;
            }
            /*
            设计新的checkbox,位置
            */
            .checkbox-custom label:before {
                content: '';
                position: absolute;
                top: 50%;
                left: 0;
                margin-top: -9px;
                width: 19px;
                height: 18px;
                display: inline-block;
                border-radius: 2px;
                border: 1px solid #bbb;
                background: #fff;
            }
            /*
            点击初始的checkbox,将新的checkbox关联起来
            */
            .checkbox-custom input[type="checkbox"]:checked +label:after {
                position: absolute;
                display: inline-block;
                font-family: 'Glyphicons Halflings';
                content: "e013";
                top: 42%;
                left: 3px;
                margin-top: -5px;
                font-size: 11px;
                line-height: 1;
                width: 16px;
                height: 16px;
                color: #333;
            }
            .checkbox-custom label {
                cursor: pointer;
                line-height: 1.2;
                font-weight: normal;/*改变了rememberme的字体*/
                margin-bottom: 0;
                text-align: left;
            }
        </style>

    //js

    //在表格体渲染完成,并在 DOM 中可见后触发 替换checkbox样式
        $("#bootstrap-table").on('post-body.bs.table',function(data){
            $(this).find("input:checkbox").each(function (i) {
                var $check = $(this);
                if ($check.attr("id") && $check.next("label")) {
                    return;
                }
                $check.next().remove();
                var name = $check.attr("name");
                var id = name + "-" + i;
                var $label = $('<label for="'+ id +'"></label>');
                $check.attr("id", id).parent().addClass("checkbox-custom").append($label);
            });
        });
  • 相关阅读:
    loader加载png,并复制多份
    FLVPlayback应用
    Android自定义ExpandableListView
    Android startActivityForResult的使用
    Android中ExpandableListView的使用
    Android基础 获取手机分辨率、状态栏、标题栏高度
    Java 字符串拼接方式
    Java String字符串拼接,截取,查找及日期转换
    android中使用startActivityForResult回传数据
    android tabhost位于底部
  • 原文地址:https://www.cnblogs.com/liw66/p/10824886.html
Copyright © 2011-2022 走看看