layui  checkbox扩展插件:

 一、新建  checkbox.css 样式文件

  1. .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;}
  2. .checkBox .block .choice{position:absolute;right:0px;bottom:0px;display:none;}
  3. .checkBox .block.on{border:1px solid #1E9FFF;}
  4. .checkBox .block.on .choice{position:absolute;right:0px;bottom:0px;display:block;}
  5. .checkBox .block.on .choice .triangle{position:absolute;right:0px;bottom:0px;border-bottom:18px solid #1E9FFF;border-left: 18px solid transparent;}
  6. .checkBox .block.on .choice .right{position:absolute;right:5px;bottom:5px;width:10px;height:10px;}
  7. .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;}
  8. .checkBox .block .del:hover{background:#FF5722; border:1px solid #FF5722;}
  9. .checkBox .block:hover .del{bottom:0px;}
  10. .checkBox .block.on .del{display:none}

 二、新建  checkbox.js 文件

  1. layui.define('jquery', function(exports){
  2. "use strict";
  3. var $ = layui.$
  4. ,hint = layui.hint();
  5. var CheckBox = function(options){
  6. this.options = options;
  7. };
  8. //初始化
  9. CheckBox.prototype.init = function(elem){
  10. var that = this;
  11. elem.addClass('checkBox'); //添加checkBox样式
  12. that.checkbox(elem);
  13. };
  14. //树节点解析
  15. CheckBox.prototype.checkbox = function(elem,children){
  16. var that = this, options = that.options;
  17. var nodes = children || options.nodes;
  18. layui.each(nodes, function(index, item){
  19. 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(''));
  20. elem.append(li);
  21. //触发点击节点回调
  22. typeof options.click === 'function' && that.click(li, item);
  23. //触发删除节点回调
  24. typeof options.del === 'function' && that.del(li, item);
  25. });
  26. };
  27. //点击节点回调
  28. CheckBox.prototype.click = function(elem, item){
  29. var that = this, options = that.options;
  30. elem.on('click', function(e){
  31. elem.toggleClass("on");
  32. if(elem.hasClass("on")){
  33. item.on = true;
  34. elem.children("span.hide").html('<input type="hidden" name="'+item.name+'" value="'+item.type+'">');
  35. }else{
  36. item.on = false;
  37. elem.children("span.hide").html('');
  38. }
  39. layui.stope(e);
  40. options.click(item);
  41. });
  42. };
  43. //点击节点回调
  44. CheckBox.prototype.del = function(elem, item){
  45. var that = this, options = that.options;
  46. elem.children('i.del').on('click', function(e){
  47. var index = layer.confirm('确定删除 ['+item.name+'] 吗?', {
  48. btn: ['删除','取消']
  49. }, function(){
  50. layer.close(index);
  51. if(options.del(item)){
  52. elem.closest(".block").remove();
  53. layui.stope(e);
  54. }
  55. });
  56. return false;
  57. });
  58. };
  59.  
  60. //暴露接口
  61. exports('checkbox', function(options){
  62. var checkbox = new CheckBox(options = options || {});
  63. var elem = $(options.elem);
  64. if(!elem[0]){
  65. return hint.error('layui.checkbox 没有找到'+ options.elem +'元素');
  66. }
  67. checkbox.init(elem);
  68. });
  69. }).link('checkbox.css','checkboxcss');

三、index.html 代码

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

四、index.js 引用

  1. $("#testbox").children("li").remove();
  2. checkbox({
  3. elem: "#testbox"
  4. , nodes: [
  5. { "id": 1, "name": "全域企业", "type": "区域碳排放量", "on": true }
  6. , { "id": 2, "name": "太阳谷企业", "type": "太阳谷产业园区企业", "on": false }
  7. ]
  8. , click: function (node) {
  9. //id: 1, name: "碳排放", on: false, type: "区域碳排放量"
  10.  
  11. }
  12. , del: function (node) {
  13. console.log("删除", node);
  14. return true;
  15. }
  16. });

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命令(49):at命令   atrm删除作业,由作业号标识。

    atq命令 例如:从现在起三天后的下午四点运行作业at 4pm + 3 days:在July 31上午十点运行作业at 10am July 31:明天上午一点运行作业at 1am tomorrow. ...

  2. 强哥PHP学习笔记

    1.php的代码,必须放在.php的文件中,php代码必须写在<?php ?>之间. 2.//单行注释 /* 多行注释 */ 3.默认首页index.php index.html inde ...

  3. Linux_rpm包管理

    一.rpm包命令规范 1.包的组成 主包:bind-9.7.1-1.el5.i586.rpm 子包:bind-libs-9.7.1-1.el5.i586.rpm bind-utils-9.7.1-1. ...

  4. kubernetes架构及deployment应用(4)

    Kubernetes Cluster 由 Master 和 Node 组成,节点上运行着若干 Kubernetes 服务. 一.master节点 Master 是 Kubernetes Cluster ...

  5. python基础之进程、线程、协程篇

    一.多任务(多线程) 多线程特点:(1)线程的并发是利用cpu上下文的切换(是并发,不是并行)(2)多线程执行的顺序是无序的(3)多线程共享全局变量(4)线程是继承在进程里的,没有进程就没有线程(5) ...

  6. java 集合梳理

    使用 processOn 画的java 集合图谱,应付面试应该可以了

  7. Go语言流程控制06--猜数字游戏

    package main import ( "fmt" "math/rand" "time" ) /* ·随机生成一个三位数 ·让用户输入其 ...

  8. Ajax|看这一篇就够了!详解Ajax工作原理及开发步骤

    传统开发的缺点,是对于浏览器的页面,全部都是全局刷新的体验.如果我们只是想取得或是更新页面中的部分信息那么就必须要应用到局部刷新的技术. 局部刷新也是有效提升用户体验的一种非常重要的方式. Ajax技 ...

  9. AI基础架构Pass Infrastructure

    AI基础架构Pass Infrastructure Operation Pass OperationPass : Op-Specific OperationPass : Op-Agnostic Dep ...

  10. SystemML大规模机器学习,优化算子融合方案的研究

    SystemML大规模机器学习,优化算子融合方案的研究 摘要 许多大规模机器学习(ML)系统允许通过线性代数程序指定定制的ML算法,然后自动生成有效的执行计划.在这种情况下,优化的机会融合基本算子的熔 ...