layui  checkbox扩展插件:

 一、新建  checkbox.css 样式文件

.checkBox .block{float:left; margin:5px;padding:6px 6px;width:80px;height:18px;text-align:center; border:1px solid #ccc;position:relative;cursor:pointer;overflow:hidden;}
.checkBox .block .choice{position:absolute;right:0px;bottom:0px;display:none;}
.checkBox .block.on{border:1px solid #1E9FFF;}
.checkBox .block.on .choice{position:absolute;right:0px;bottom:0px;display:block;}
.checkBox .block.on .choice .triangle{position:absolute;right:0px;bottom:0px;border-bottom:18px solid #1E9FFF;border-left: 18px solid transparent;}
.checkBox .block.on .choice .right{position:absolute;right:5px;bottom:5px;width:10px;height:10px;}
.checkBox .block .del{width:18px; height:18px; background:#fff; border:0px solid #ccc; border-radius:3px; overflow:hidden; cursor:pointer; position:absolute; bottom:-20px; right:0px; transition: background .3s ease, border .2s ease, bottom .2s ease;display:block;}
.checkBox .block .del:hover{background:#FF5722; border:1px solid #FF5722;}
.checkBox .block:hover .del{bottom:0px;}
.checkBox .block.on .del{display:none}

 二、新建  checkbox.js 文件

layui.define('jquery', function(exports){
"use strict";
var $ = layui.$
,hint = layui.hint();
var CheckBox = function(options){
this.options = options;
};
//初始化
CheckBox.prototype.init = function(elem){
var that = this;
elem.addClass('checkBox'); //添加checkBox样式
that.checkbox(elem);
};
//树节点解析
CheckBox.prototype.checkbox = function(elem,children){
var that = this, options = that.options;
var nodes = children || options.nodes;
layui.each(nodes, function(index, item){
var li = $(['<li class="block'+(item.on?' on':'')+'" value="'+item.name+'" onmouseover="layui.layer.tips(\''+item.type+'\',this,{tips:2})" onmouseout="layui.layer.closeAll(\'tips\');">'+item.name,'<i class="choice"><i class="triangle"></i><i class="right layui-icon layui-icon-ok"></i></i><i class="del"><i class="layui-icon layui-icon-delete"></i></i><span class="hide">'+(item.on?'<input type="hidden" name="'+item.name+'" value="'+item.type+'">':'')+'</span></li>'].join(''));
elem.append(li);
//触发点击节点回调
typeof options.click === 'function' && that.click(li, item);
//触发删除节点回调
typeof options.del === 'function' && that.del(li, item);
});
};
//点击节点回调
CheckBox.prototype.click = function(elem, item){
var that = this, options = that.options;
elem.on('click', function(e){
elem.toggleClass("on");
if(elem.hasClass("on")){
item.on = true;
elem.children("span.hide").html('<input type="hidden" name="'+item.name+'" value="'+item.type+'">');
}else{
item.on = false;
elem.children("span.hide").html('');
}
layui.stope(e);
options.click(item);
});
};
//点击节点回调
CheckBox.prototype.del = function(elem, item){
var that = this, options = that.options;
elem.children('i.del').on('click', function(e){
var index = layer.confirm('确定删除 ['+item.name+'] 吗?', {
btn: ['删除','取消']
}, function(){
layer.close(index);
if(options.del(item)){
elem.closest(".block").remove();
layui.stope(e);
}
});
return false;
});
}; //暴露接口
exports('checkbox', function(options){
var checkbox = new CheckBox(options = options || {});
var elem = $(options.elem);
if(!elem[0]){
return hint.error('layui.checkbox 没有找到'+ options.elem +'元素');
}
checkbox.init(elem);
});
}).link('checkbox.css','checkboxcss');

三、index.html 代码

<div id="testbox"></div>

四、index.js 引用

    $("#testbox").children("li").remove();
checkbox({
elem: "#testbox"
, nodes: [
{ "id": 1, "name": "全域企业", "type": "区域碳排放量", "on": true }
, { "id": 2, "name": "太阳谷企业", "type": "太阳谷产业园区企业", "on": false }
]
, click: function (node) {
//id: 1, name: "碳排放", on: false, type: "区域碳排放量" }
, del: function (node) {
console.log("删除", node);
return true;
}
});

layui checkbox 样式的更多相关文章

  1. 用css改变默认的checkbox样式

    自己常用的改变checkbox样式的两个方法: 一.利用background用图片代替checkbox效果 缺点:你首先得有一张好看的图片 优点:浏览器兼容性好 <!doctype html&g ...

  2. WPF 自定义CheckBox样式

    自定义CheckBox样式,mark一下,方便以后参考复用 设计介绍: 1.一般CheckBox模板太难看了,肯定要重写其中的模板 2.模板状态为未选中状态和选中状态,设置为默认未选中就好了. 默认状 ...

  3. WPF CheckBox样式 ScrollViewer样式 WrapPanel、StackPanel、Grid布局

    本节讲述布局,顺带加点样式给大家看看~单纯学布局,肯定是枯燥的~哈哈 那如上界面,该如何设计呢? 1.一些布局元素经常用到.Grid StackPanel Canvas WrapPanel等.如上这种 ...

  4. CSS控制checkbox样式

    原文地址:http://www.xiumu.org/technology/style-checkboxes-with-css.shtml#comments Checkbox复选框是一个可能每一个网站都 ...

  5. 【CSS】自定义checkbox样式

    修改原生checkbox样式. 效果 原理 1.利用CSS3属性 appearance. 该属性(强制)更改(改变)默认(原生)样式. Firefox 支持替代的 -moz-appearance 属性 ...

  6. 定制 input[type="radio"] 和 input[type="checkbox"] 样式

    表单中,经常会使用到单选按钮和复选框,但是,input[type="radio"] 和 input[type="checkbox"] 的默认样式在不同的浏览器或 ...

  7. [转]Android中自定义checkbox样式

    android中自定义checkbox的图片和大小   其实很简单,分三步: 1.在drawable中创建文件checkbox_selector.xml: <?xml version=" ...

  8. 使用CSS实现自定义input[checkbox]样式

    思路:使用label上的for熟悉,与checkbox上的id相对应来达到点击选中效果,在使用伪元素,或者其他元素,定位至checkbox上方,替代checkbox,并且隐藏checkbox,使用CS ...

  9. 自定义radio/checkbox样式

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. linux .tar.xz 文件解压和压缩

    场景:centos7.0下文件格式为xxx.tar.xz,解压和压缩命令: 压缩 tar -Jcf linux-3.10.0-123.13.1.el7.tar.xz(文件名) linux-3.10.0 ...

  2. rsync+inotify实现全网自动化数据备份

    第1章 环境配置 实例1-1 服务器及IP主机名规划 已知 4 台服务器主机名主机对应信息见下表: 服务器说明 外网 IP(NAT) 内网 IP(NAT)  主机名 web服务器 10.0.0.7/2 ...

  3. 解决SecureCRTPortable和SecureFXPortable的中文乱码问题

    我们使用客户端连接Linux服务器时会出现中文乱码的问题,解决方法如下: 一.修改SecureCRTPortable的相关配置 步骤一:[选项]->[全局选项] 步骤二:[常规]->[默认 ...

  4. ASP.NET Core MVC 入门到精通 - 3. 使用MediatR

    ASP.NET Core MVC 入门到精通 - 3. 使用MediatR 环境: .NET 5 ASP.NET Core MVC (project) 1. MediatR MediatR .NET中 ...

  5. 如何设计 API 接口,实现统一格式返回?

    文章目录: 目录 前后端接口交互 接口返回值约定 返回值规范 正确返回 错误返回 统一定义错误码 错误码规范 Controller 层如何用? 正确返回 错误返回 详细代码实现 错误码 Control ...

  6. typora的一些使用

    1.介绍typora 支持markdown语法的一款写作app 真的足够简洁高效 2. typora和其他工具配合实现功能 如插入图片 截图 gif等等图库 smms图库的使用 需要使用PicGo和s ...

  7. MySQL next-key lock 加锁范围是什么?

    前言 某天,突然被问到 MySQL 的 next-key lock,我瞬间的反应就是: 这都是啥啥啥??? 这一个截图我啥也看不出来呀? 仔细一看,好像似曾相识,这不是<MySQL 45 讲&g ...

  8. Go语言web开发---Beego的session

    一.简介 Session是一段保存在服务器上的信息,当客户端第一次访问服务器时创建Session,同时也会创建一个名为beegosessionID,值为创建的Session的id的Cookie. 这个 ...

  9. 适用于Windows和Linux的Yolo-v3和Yolo-v2(上)

    适用于Windows和Linux的Yolo-v3和Yolo-v2(上) https://github.com/eric-erki/darknetAB (用于对象检测的神经网络)-Tensor Core ...

  10. 反应式系统实现MQTT客户机

    反应式系统实现MQTT客户机 Implementing an MQTT client for reactive systems MQTT Reactive是从LiamBindle的MQTT-C库派生的 ...