layui checkbox 样式
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 样式的更多相关文章
- 用css改变默认的checkbox样式
自己常用的改变checkbox样式的两个方法: 一.利用background用图片代替checkbox效果 缺点:你首先得有一张好看的图片 优点:浏览器兼容性好 <!doctype html&g ...
- WPF 自定义CheckBox样式
自定义CheckBox样式,mark一下,方便以后参考复用 设计介绍: 1.一般CheckBox模板太难看了,肯定要重写其中的模板 2.模板状态为未选中状态和选中状态,设置为默认未选中就好了. 默认状 ...
- WPF CheckBox样式 ScrollViewer样式 WrapPanel、StackPanel、Grid布局
本节讲述布局,顺带加点样式给大家看看~单纯学布局,肯定是枯燥的~哈哈 那如上界面,该如何设计呢? 1.一些布局元素经常用到.Grid StackPanel Canvas WrapPanel等.如上这种 ...
- CSS控制checkbox样式
原文地址:http://www.xiumu.org/technology/style-checkboxes-with-css.shtml#comments Checkbox复选框是一个可能每一个网站都 ...
- 【CSS】自定义checkbox样式
修改原生checkbox样式. 效果 原理 1.利用CSS3属性 appearance. 该属性(强制)更改(改变)默认(原生)样式. Firefox 支持替代的 -moz-appearance 属性 ...
- 定制 input[type="radio"] 和 input[type="checkbox"] 样式
表单中,经常会使用到单选按钮和复选框,但是,input[type="radio"] 和 input[type="checkbox"] 的默认样式在不同的浏览器或 ...
- [转]Android中自定义checkbox样式
android中自定义checkbox的图片和大小 其实很简单,分三步: 1.在drawable中创建文件checkbox_selector.xml: <?xml version=" ...
- 使用CSS实现自定义input[checkbox]样式
思路:使用label上的for熟悉,与checkbox上的id相对应来达到点击选中效果,在使用伪元素,或者其他元素,定位至checkbox上方,替代checkbox,并且隐藏checkbox,使用CS ...
- 自定义radio/checkbox样式
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- linux .tar.xz 文件解压和压缩
场景:centos7.0下文件格式为xxx.tar.xz,解压和压缩命令: 压缩 tar -Jcf linux-3.10.0-123.13.1.el7.tar.xz(文件名) linux-3.10.0 ...
- rsync+inotify实现全网自动化数据备份
第1章 环境配置 实例1-1 服务器及IP主机名规划 已知 4 台服务器主机名主机对应信息见下表: 服务器说明 外网 IP(NAT) 内网 IP(NAT) 主机名 web服务器 10.0.0.7/2 ...
- 解决SecureCRTPortable和SecureFXPortable的中文乱码问题
我们使用客户端连接Linux服务器时会出现中文乱码的问题,解决方法如下: 一.修改SecureCRTPortable的相关配置 步骤一:[选项]->[全局选项] 步骤二:[常规]->[默认 ...
- ASP.NET Core MVC 入门到精通 - 3. 使用MediatR
ASP.NET Core MVC 入门到精通 - 3. 使用MediatR 环境: .NET 5 ASP.NET Core MVC (project) 1. MediatR MediatR .NET中 ...
- 如何设计 API 接口,实现统一格式返回?
文章目录: 目录 前后端接口交互 接口返回值约定 返回值规范 正确返回 错误返回 统一定义错误码 错误码规范 Controller 层如何用? 正确返回 错误返回 详细代码实现 错误码 Control ...
- typora的一些使用
1.介绍typora 支持markdown语法的一款写作app 真的足够简洁高效 2. typora和其他工具配合实现功能 如插入图片 截图 gif等等图库 smms图库的使用 需要使用PicGo和s ...
- MySQL next-key lock 加锁范围是什么?
前言 某天,突然被问到 MySQL 的 next-key lock,我瞬间的反应就是: 这都是啥啥啥??? 这一个截图我啥也看不出来呀? 仔细一看,好像似曾相识,这不是<MySQL 45 讲&g ...
- Go语言web开发---Beego的session
一.简介 Session是一段保存在服务器上的信息,当客户端第一次访问服务器时创建Session,同时也会创建一个名为beegosessionID,值为创建的Session的id的Cookie. 这个 ...
- 适用于Windows和Linux的Yolo-v3和Yolo-v2(上)
适用于Windows和Linux的Yolo-v3和Yolo-v2(上) https://github.com/eric-erki/darknetAB (用于对象检测的神经网络)-Tensor Core ...
- 反应式系统实现MQTT客户机
反应式系统实现MQTT客户机 Implementing an MQTT client for reactive systems MQTT Reactive是从LiamBindle的MQTT-C库派生的 ...