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);
            });
        });
  • 相关阅读:
    权限认证机制
    在线工具统计
    Redis内存模型
    Redis数据结构
    开发工具清单
    MySql数据库优化、备份和恢复
    MySql 性能优化神器 Explain
    ASP.NET Core 3.1 迁移到 NET 5.0
    MySql Sql语句
    DTU的通讯工作模式有哪些
  • 原文地址:https://www.cnblogs.com/liw66/p/10824886.html
Copyright © 2011-2022 走看看