代码功能更新

2025-05-18 07:42:27 +00:00
parent 7fc1d422a1
commit 4a90c41da2
2083 changed files with 695218 additions and 3 deletions
@@ -0,0 +1,102 @@
+layui.define(['table', 'laypage','jquery', 'element'], function(exports) {
+	"use strict";
+
+	var MOD_NAME = 'card',
+		$ = layui.jquery,
+		element = layui.element,
+		laypage = layui.laypage;
+
+	var laytpCard = function(opt) {
+		this.option = opt;
+	};
+
+	laytpCard.prototype.render = function(opt) {
+		var option = {
+			// 构建的模型
+			elem: opt.elem,
+			// 数据 url 连接
+			url: opt.url,
+			// lineSize 每行的个数
+			lineSize: opt.lineSize ? opt.lineSize : 4,
+			// 共多少个
+			pageSize: opt.pageSize ? opt.pageSize : 12,
+			// 当前页
+			currentPage: opt.currentSize ? opt.currentSize : 0,
+			// 完 成 函 数
+			done: opt.done ? opt.done : function() {
+				alert("跳转页面");
+			}
+		}
+		// 根 据 请 求 方 式 获 取 数 据
+		if (option.url != null) {
+			// 复制数据
+			option.data = getData(option.url).data;
+		}
+
+		// 根据结果进行相应结构的创建
+		var html = createComponent(option.data);
+
+		$(option.elem).html(html);
+		
+		  // 初始化分页组件
+		  laypage.render({
+		    elem: 'cardpage'
+		    ,count: 100
+		    ,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
+		    ,jump: function(obj){
+		      console.log(obj)
+		    }
+		  });
+		  
+		return new laytpCard(option);
+	}
+
+	function createComponent(data) {
+        var html = "<div class='laytp-card-component'>"
+        var content = createCards(data);
+        var page = "<div id='cardpage'></div>"
+        content = content + page;
+        html += content + "</div>"
+        return html;
+	}
+
+
+	/** 创建指定数量的卡片 */
+	function createCards(data) {
+		
+		var content = "<div class='layui-row layui-col-space30'>";
+		$.each(data, function(i, item) {
+
+			content += createCard(item);
+
+		})
+		content += "</div>"
+		return content;
+	}
+
+
+	/** 创建一个卡片 */
+	function createCard(item) {
+
+		var card =
+			'<div class="layui-col-md3 ew-datagrid-item" data-index="0" data-number="1"> <div class="project-list-item"> <img class="project-list-item-cover" src="'+item.image+'"> <div class="project-list-item-body"> <h2>'+item.title+'</h2> <div class="project-list-item-text layui-text">'+item.remark+'</div> <div class="project-list-item-desc"> <span class="time">'+item.time+'</span> <div class="ew-head-list"> <img class="ew-head-list-item" lay-tips="曲丽丽" lay-offset="0,-5px" src="https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png"> <img class="ew-head-list-item" lay-tips="王昭君" lay-offset="0,-5px" src="https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png"> <img class="ew-head-list-item" lay-tips="董娜娜" lay-offset="0,-5px" src="https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png"> </div> </div> </div> </div> </div>'
+
+		return card;
+	}
+
+	/** 同 步 请 求 获 取 数 据 */
+	function getData(url) {
+
+		$.ajaxSettings.async = false;
+		var data = null;
+
+		$.get(url, function(result) {
+			data = result;
+		});
+
+		$.ajaxSettings.async = true;
+		return data;
+	}
+
+	exports(MOD_NAME, new laytpCard());
+})
@@ -0,0 +1,182 @@
+layui.define(['layer', 'form'], function(exports) {
+	var layer = layui.layer,
+		form = layui.form,
+		$ = layui.$,
+		key = '';
+	delHtml()
+	$('button').on('click', function() {
+		var _this = $(this),
+			size = _this.data('size'),
+			type = _this.data('type'),
+			html = '';
+		key = randStrName();
+		switch (type) {
+			case 'text':
+				html = input(type, size)
+				break;
+			case 'password':
+				html = input(type, size)
+				break;
+			case 'select':
+				html = select(size)
+				break;
+			case 'checkbox_a':
+				html = checkbox_a(size)
+				break;
+			case 'checkbox_b':
+				html = checkbox_b(size)
+				break;
+			case 'radio':
+				html = radio(size)
+				break;
+			case 'textarea':
+				html = textarea(size)
+				break;
+			case 'submit':
+				html = submits(size)
+				break;
+			case 'del':
+				$('form').html("\n")
+				delHtml()
+				$('.code-show').text('')
+				return false
+				break;
+			default:
+				layer.msg('类型错误', {
+					icon: 2
+				})
+		}
+
+		$('form').append(html);
+		form.render();
+		setHtml(html)
+	})
+
+	function delHtml() {
+		layui.data('form_html', {
+			key: 'html',
+			remove: true
+		});
+	}
+
+	function setHtml(html) {
+		var h = layui.data('form_html');
+		if (h && h.html) {
+			var _d = h.html + html
+		} else {
+			var _d = html
+		}
+		layui.data('form_html', {
+			key: 'html',
+			value: _d
+		})
+		$('.code-show').text('<form class="layui-form" action="" onsubmit="return false">\n' + _d + '</form>')
+
+	}
+
+	function input(type, size) {
+		var name = type === 'text' ? '输入框' : (type === 'password' ? '密码框' : '');
+		var html = '  <div class="layui-form-item">\n' +
+			'    <label class="layui-form-label">' + name + '</label>\n' +
+			'    <div class="layui-input-' + size + '">\n' +
+			'      <input type="' + type + '" name="' + key + '" required  lay-verify="required" placeholder="请输入' + name +
+			'内容" autocomplete="off" class="layui-input">\n' +
+			'    </div>\n' +
+			'  </div>\n';
+		return html;
+	}
+
+	function select(size) {
+		var html = '  <div class="layui-form-item">\n' +
+			'    <label class="layui-form-label">选择框</label>\n' +
+			'    <div class="layui-input-' + size + '">\n' +
+			'      <select name="' + key + '" lay-verify="required" lay-search>\n' +
+			'        <option value=""></option>\n' +
+			'        <option value="0">北京</option>\n' +
+			'        <option value="1">上海</option>\n' +
+			'        <option value="2">广州</option>\n' +
+			'        <option value="3">深圳</option>\n' +
+			'        <option value="4">杭州</option>\n' +
+			'      </select>\n' +
+			'    </div>\n' +
+			'  </div>\n';
+		return html;
+	}
+
+	function checkbox_a(size) {
+		var html = '  <div class="layui-form-item">\n' +
+			'    <label class="layui-form-label">复选框</label>\n' +
+			'    <div class="layui-input-' + size + '">\n' +
+			'      <input type="checkbox" name="' + key + '[]" title="写作">\n' +
+			'      <input type="checkbox" name="' + key + '[]" title="阅读" checked>\n' +
+			'      <input type="checkbox" name="' + key + '[]" title="发呆">\n' +
+			'    </div>\n' +
+			'  </div>\n';
+		return html;
+	}
+
+	function checkbox_b(size) {
+		var html = '  <div class="layui-form-item">\n' +
+			'    <label class="layui-form-label">开关</label>\n' +
+			'    <div class="layui-input-' + size + '">\n' +
+			'      <input type="checkbox" name="' + key + '" lay-skin="switch">\n' +
+			'    </div>\n' +
+			'  </div>\n';
+		return html;
+	}
+
+	function radio(size) {
+		var html = '  <div class="layui-form-item">\n' +
+			'    <label class="layui-form-label">单选框</label>\n' +
+			'    <div class="layui-input-' + size + '">\n' +
+			'      <input type="radio" name="' + key + '" value="男" title="男">\n' +
+			'      <input type="radio" name="' + key + '" value="女" title="女" checked>\n' +
+			'    </div>\n' +
+			'  </div>\n';
+		return html;
+	}
+
+	function textarea(size) {
+		var html = '  <div class="layui-form-item layui-form-text">\n' +
+			'    <label class="layui-form-label">文本域</label>\n' +
+			'    <div class="layui-input-' + size + '">\n' +
+			'      <textarea name="' + key + '" placeholder="请输入内容" class="layui-textarea"></textarea>\n' +
+			'    </div>\n' +
+			'  </div>\n';
+		return html;
+	}
+
+	function submits(size) {
+		var html = '  <div class="layui-form-item">\n' +
+			'    <div class="layui-input-' + size + '">\n' +
+			'      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>\n' +
+			'      <button type="reset" class="layui-btn layui-btn-primary">重置</button>\n' +
+			'    </div>\n' +
+			'  </div>\n';
+		return html;
+	}
+
+	function jscode() {
+		var html = '<script>\n' +
+			'  layui.use(\'form\', function(){\n' +
+			'    var form = layui.form;\n' +
+			'    form.on(\'submit(formDemo)\', function(data){\n' +
+			'      layer.msg(JSON.stringify(data.field));\n' +
+			'      return false;\n' +
+			'    });\n' +
+			'  });\n' +
+			'</script>';
+		return html;
+	}
+
+	function randStrName() {
+		return Math.random().toString(36).substr(8);
+	}
+	var jscodehtml = jscode();
+	$('.js-show').text(jscodehtml)
+	form.on('submit(formDemo)', function(data) {
+		layer.msg(JSON.stringify(data.field));
+		return false;
+	});
+	exports('design', {});
+});
@@ -0,0 +1,185 @@
+layui.define(['jquery', 'element'], function(exports) {
+	"use strict";
+
+	/**
+	 * Drawer component
+	 * */
+	var MOD_NAME = 'drawer',
+		$ = layui.jquery,
+		element = layui.element;
+
+	var drawer = new function() {
+
+		/**
+		 * open drawer
+		 * */
+		this.open = function(option) {
+			var obj = new mSlider({
+				dom: option.dom,
+				direction: option.direction,
+				distance: option.distance,
+				time: option.time ? option.time : 0,
+				maskClose: option.maskClose,
+				callback: option.success
+			});
+			obj.open();
+			return obj;
+		}
+
+	}
+	exports(MOD_NAME, drawer);
+});
+
+/**
+ * 源码
+ * */
+(function(b, c) {
+	function a(d) {
+		this.opts = {
+			"direction": d.direction || "left",
+			"distance": d.distance || "60%",
+			"dom": this.Q(d.dom),
+			"time": d.time || "",
+			"maskClose": (d.maskClose + "").toString() !== "false" ? true : false,
+			"callback": d.callback || ""
+		};
+		this.rnd = this.rnd();
+		this.dom = this.opts.dom[0];
+		this.wrap = "";
+		this.inner = "";
+		this.mask = "";
+		this.init()
+	}
+	a.prototype = {
+		Q: function(d) {
+			return document.querySelectorAll(d)
+		},
+		isMobile: function() {
+			return navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i) ? true : false
+		},
+		addEvent: function(f, e, d) {
+			if (f.attachEvent) {
+				f.attachEvent("on" + e, d)
+			} else {
+				f.addEventListener(e, d, false)
+			}
+		},
+		rnd: function() {
+			return Math.random().toString(36).substr(2, 6)
+		},
+		init: function() {
+			var g = this;
+			if (!g.dom) {
+				console.log("未正确绑定弹窗容器");
+				return
+			}
+			var d = document.createElement("div");
+			var e = document.createElement("div");
+			var f = document.createElement("div");
+			d.setAttribute("class", "mSlider-main ms-" + g.rnd);
+			e.setAttribute("class", "mSlider-inner");
+			f.setAttribute("class", "mSlider-mask");
+			g.Q("body")[0].appendChild(d);
+			g.Q(".ms-" + g.rnd)[0].appendChild(e);
+			g.Q(".ms-" + g.rnd)[0].appendChild(f);
+			g.wrap = g.Q(".ms-" + g.rnd)[0];
+			g.inner = g.Q(".ms-" + g.rnd + " .mSlider-inner")[0];
+			g.mask = g.Q(".ms-" + g.rnd + " .mSlider-mask")[0];
+			g.inner.appendChild(g.dom);
+			switch (g.opts.direction) {
+				case "top":
+					g.top = "0";
+					g.left = "0";
+					g.width = "100%";
+					g.height = g.opts.distance;
+					g.translate = "0,-100%,0";
+					break;
+				case "bottom":
+					g.bottom = "0";
+					g.left = "0";
+					g.width = "100%";
+					g.height = g.opts.distance;
+					g.translate = "0,100%,0";
+					break;
+				case "right":
+					g.top = "0";
+					g.right = "0";
+					g.width = g.opts.distance;
+					g.height = document.documentElement.clientHeight + "px";
+					g.translate = "100%,0,0";
+					break;
+				default:
+					g.top = "0";
+					g.left = "0";
+					g.width = g.opts.distance;
+					g.height = document.documentElement.clientHeight + "px";
+					g.translate = "-100%,0,0"
+			}
+			g.wrap.style.display = "none";
+			g.wrap.style.position = "fixed";
+			g.wrap.style.top = "0";
+			g.wrap.style.left = "0";
+			g.wrap.style.width = "100%";
+			g.wrap.style.height = "100%";
+			g.wrap.style.zIndex = 9999999;
+			g.inner.style.position = "absolute";
+			g.inner.style.top = g.top;
+			g.inner.style.bottom = g.bottom;
+			g.inner.style.left = g.left;
+			g.inner.style.right = g.right;
+			g.inner.style.width = g.width;
+			g.inner.style.height = g.height;
+			g.inner.style.backgroundColor = "#fff";
+			g.inner.style.transform = "translate3d(" + g.translate + ")";
+			g.inner.style.webkitTransition = "all .2s ease-out";
+			g.inner.style.transition = "all .2s ease-out";
+			g.inner.style.zIndex = 10000000;
+			g.mask.style.width = "100%";
+			g.mask.style.height = "100%";
+			g.mask.style.opacity = "0.1";
+			g.mask.style.backgroundColor = "black";
+			g.mask.style.zIndex = "9999998";
+			g.mask.style.webkitBackfaceVisibility = "hidden";
+			g.events()
+		},
+		open: function() {
+			var d = this;
+			d.wrap.style.display = "block";
+
+			setTimeout(function() {
+				d.inner.style.transform = "translate3d(0,0,0)";
+				d.inner.style.webkitTransform = "translate3d(0,0,0)";
+				d.mask.style.opacity = 0.1
+			}, 30);
+			if (d.opts.time) {
+				d.timer = setTimeout(function() {
+					d.close()
+				}, d.opts.time)
+			}
+		},
+		close: function() {
+			var d = this;
+			d.timer && clearTimeout(d.timer);
+			d.inner.style.webkitTransform = "translate3d(" + d.translate + ")";
+			d.inner.style.transform = "translate3d(" + d.translate + ")";
+			d.mask.style.opacity = 0;
+			setTimeout(function() {
+				d.wrap.style.display = "none";
+				d.timer = null;
+				d.opts.callback && d.opts.callback()
+			}, 300)
+		},
+		events: function() {
+			var d = this;
+			d.addEvent(d.mask, "touchmove", function(f) {
+				f.preventDefault()
+			});
+			d.addEvent(d.mask, (d.isMobile() ? "touchend" : "click"), function(f) {
+				if (d.opts.maskClose) {
+					d.close()
+				}
+			})
+		}
+	};
+	b.mSlider = a
+})(window);
@@ -0,0 +1,388 @@
+layui.define(['laypage', 'form'], function (exports) {
+    "use strict";
+
+    var IconPicker =function () {
+        this.v = '1.1';
+    }, _MOD = 'iconPicker',
+        _this = this,
+        $ = layui.jquery,
+        laypage = layui.laypage,
+        form = layui.form,
+        BODY = 'body',
+        TIPS = '请选择图标';
+
+    IconPicker.prototype.render = function(options){
+        var opts = options,
+            // DOM选择器
+            elem = opts.elem,
+            // 数据类型：fontClass/unicode
+            type = opts.type == null ? 'fontClass' : opts.type,
+            // 是否分页：true/false
+            page = opts.page == null ? true : opts.page,
+            // 每页显示数量
+            limit = opts.limit == null ? 12 : opts.limit,
+            // 是否开启搜索：true/false
+            search = opts.search == null ? true : opts.search,
+            // 每个图标格子的宽度：'43px'或'20%'
+            cellWidth = opts.cellWidth,
+            // 点击回调
+            click = opts.click,
+            // 渲染成功后的回调
+            success = opts.success,
+            // json数据
+            data = {},
+            // 唯一标识
+            tmp = new Date().getTime(),
+            // 是否使用的class数据
+            isFontClass = opts.type === 'fontClass',
+            // 初始化时input的值
+            ORIGINAL_ELEM_VALUE = $(elem).val(),
+            TITLE = 'layui-select-title',
+            TITLE_ID = 'layui-select-title-' + tmp,
+            ICON_BODY = 'layui-iconpicker-' + tmp,
+            PICKER_BODY = 'layui-iconpicker-body-' + tmp,
+            PAGE_ID = 'layui-iconpicker-page-' + tmp,
+            LIST_BOX = 'layui-iconpicker-list-box',
+            selected = 'layui-form-selected',
+            unselect = 'layui-unselect';
+
+        var a = {
+            init: function () {
+                data = common.getData[type]();
+
+                a.hideElem().createSelect().createBody().toggleSelect();
+                a.preventEvent().inputListen();
+                common.loadCss();
+                
+                if (success) {
+                    success(this.successHandle());
+                }
+
+                return a;
+            },
+            successHandle: function(){
+                var d = {
+                    options: opts,
+                    data: data,
+                    id: tmp,
+                    elem: $('#' + ICON_BODY)
+                };
+                return d;
+            },
+            /**
+             * 隐藏elem
+             */
+            hideElem: function () {
+                $(elem).hide();
+                return a;
+            },
+            /**
+             * 绘制select下拉选择框
+             */
+            createSelect: function () {
+                var oriIcon = '<i class="layui-icon">';
+                
+                // 默认图标
+                if(ORIGINAL_ELEM_VALUE === '') {
+                    if(isFontClass) {
+                        ORIGINAL_ELEM_VALUE = 'layui-icon-circle-dot';
+                    } else {
+                        ORIGINAL_ELEM_VALUE = '&#xe617;';
+                    }
+                }
+
+                if (isFontClass) {
+                    oriIcon = '<i class="layui-icon '+ ORIGINAL_ELEM_VALUE +'">';
+                } else {
+                    oriIcon += ORIGINAL_ELEM_VALUE; 
+                }
+                oriIcon += '</i>';
+
+                var selectHtml = '<div class="layui-iconpicker layui-unselect layui-form-select" id="'+ ICON_BODY +'">' +
+                    '<div class="'+ TITLE +'" id="'+ TITLE_ID +'">' +
+                        '<div class="layui-iconpicker-item">'+
+                            '<span class="layui-iconpicker-icon layui-unselect">' +
+                                oriIcon +
+                            '</span>'+
+                            '<i class="layui-edge"></i>' +
+                        '</div>'+
+                    '</div>' +
+                    '<div class="layui-anim layui-anim-upbit" style="">' +
+                        '123' +
+                    '</div>';
+                $(elem).after(selectHtml);
+                return a;
+            },
+            /**
+             * 展开/折叠下拉框
+             */
+            toggleSelect: function () {
+                var item = '#' + TITLE_ID + ' .layui-iconpicker-item,#' + TITLE_ID + ' .layui-iconpicker-item .layui-edge';
+                a.event('click', item, function (e) {
+                    var $icon = $('#' + ICON_BODY);
+                    if ($icon.hasClass(selected)) {
+                        $icon.removeClass(selected).addClass(unselect);
+                    } else {
+                        // 隐藏其他picker
+                        $('.layui-form-select').removeClass(selected);
+                        // 显示当前picker
+                        $icon.addClass(selected).removeClass(unselect);
+                    }
+                    e.stopPropagation();
+                });
+                return a;
+            },
+            /**
+             * 绘制主体部分
+             */
+            createBody: function () {
+                // 获取数据
+                var searchHtml = '';
+
+                if (search) {
+                    searchHtml = '<div class="layui-iconpicker-search">' +
+                        '<input class="layui-input">' +
+                        '<i class="layui-icon">&#xe615;</i>' +
+                        '</div>';
+                }
+
+                // 组合dom
+                var bodyHtml = '<div class="layui-iconpicker-body" id="'+ PICKER_BODY +'">' +
+                    searchHtml +
+                        '<div class="'+ LIST_BOX +'"></div> '+
+                     '</div>';
+                $('#' + ICON_BODY).find('.layui-anim').eq(0).html(bodyHtml);
+                a.search().createList().check().page();
+
+                return a;
+            },
+            /**
+             * 绘制图标列表
+             * @param text 模糊查询关键字
+             * @returns {string}
+             */
+            createList: function (text) {
+                var d = data,
+                    l = d.length,
+                    pageHtml = '',
+                    listHtml = $('<div class="layui-iconpicker-list">')//'<div class="layui-iconpicker-list">';
+
+                // 计算分页数据
+                var _limit = limit, // 每页显示数量
+                    _pages = l % _limit === 0 ? l / _limit : parseInt(l / _limit + 1), // 总计多少页
+                    _id = PAGE_ID;
+
+                // 图标列表
+                var icons = [];
+
+                for (var i = 0; i < l; i++) {
+                    var obj = d[i];
+
+                    // 判断是否模糊查询
+                    if (text && obj.indexOf(text) === -1) {
+                        continue;
+                    }
+
+                    // 是否自定义格子宽度
+                    var style = '';
+                    if (cellWidth !== null) {
+                        style += ' style="width:' + cellWidth + '"';
+                    }
+
+                    // 每个图标dom
+                    var icon = '<div class="layui-iconpicker-icon-item" title="'+ obj +'" '+ style +'>';
+                    if (isFontClass){
+                        icon += '<i class="layui-icon '+ obj +'"></i>';
+                    } else {
+                        icon += '<i class="layui-icon">'+ obj.replace('amp;', '') +'</i>';
+                    }
+                    icon += '</div>';
+
+                    icons.push(icon);
+                }
+
+                // 查询出图标后再分页
+                l = icons.length;
+                _pages = l % _limit === 0 ? l / _limit : parseInt(l / _limit + 1);
+                for (var i = 0; i < _pages; i++) {
+                    // 按limit分块
+                    var lm = $('<div class="layui-iconpicker-icon-limit" id="layui-iconpicker-icon-limit-' + tmp + (i+1) +'">');
+
+                    for (var j = i * _limit; j < (i+1) * _limit && j < l; j++) {
+                        lm.append(icons[j]);
+                    }
+
+                    listHtml.append(lm);
+                }
+
+                // 无数据
+                if (l === 0) {
+                    listHtml.append('<p class="layui-iconpicker-tips">无数据</p>');
+                }
+
+                // 判断是否分页
+                if (page){
+                    $('#' + PICKER_BODY).addClass('layui-iconpicker-body-page');
+                    pageHtml = '<div class="layui-iconpicker-page" id="'+ PAGE_ID +'">' +
+                        '<div class="layui-iconpicker-page-count">' +
+                        '<span id="'+ PAGE_ID +'-current">1</span>/' +
+                        '<span id="'+ PAGE_ID +'-pages">'+ _pages +'</span>' +
+                        ' (<span id="'+ PAGE_ID +'-length">'+ l +'</span>)' +
+                        '</div>' +
+                        '<div class="layui-iconpicker-page-operate">' +
+                        '<i class="layui-icon" id="'+ PAGE_ID +'-prev" data-index="0" prev>&#xe603;</i> ' +
+                        '<i class="layui-icon" id="'+ PAGE_ID +'-next" data-index="2" next>&#xe602;</i> ' +
+                        '</div>' +
+                        '</div>';
+                }
+
+                $('#' + ICON_BODY).find('.layui-anim').find('.' + LIST_BOX).html('').append(listHtml).append(pageHtml);
+                return a;
+            },
+            preventEvent: function() {
+                var item = '#' + ICON_BODY + ' .layui-anim';
+                a.event('click', item, function (e) {
+                    e.stopPropagation();
+                });
+                return a;
+            },
+            page: function () {
+                var icon = '#' + PAGE_ID + ' .layui-iconpicker-page-operate .layui-icon';
+
+                $(icon).unbind('click');
+                a.event('click', icon, function (e) {
+                   var elem = e.currentTarget,
+                       total = parseInt($('#' +PAGE_ID + '-pages').html()),
+                       isPrev = $(elem).attr('prev') !== undefined,
+                       // 按钮上标的页码
+                       index = parseInt($(elem).attr('data-index')),
+                       $cur = $('#' +PAGE_ID + '-current'),
+                       // 点击时正在显示的页码
+                       current = parseInt($cur.html());
+
+                    // 分页数据
+                    if (isPrev && current > 1) {
+                        current=current-1;
+                        $(icon + '[prev]').attr('data-index', current);
+                    } else if (!isPrev && current < total){
+                        current=current+1;
+                        $(icon + '[next]').attr('data-index', current);
+                    }
+                    $cur.html(current);
+
+                    // 图标数据
+                    $('#'+ ICON_BODY + ' .layui-iconpicker-icon-limit').hide();
+                    $('#layui-iconpicker-icon-limit-' + tmp + current).show();
+                    e.stopPropagation();
+                });
+                return a;
+            },
+            /**
+             * 搜索
+             */
+            search: function () {
+                var item = '#' + PICKER_BODY + ' .layui-iconpicker-search .layui-input';
+                a.event('input propertychange', item, function (e) {
+                    var elem = e.target,
+                        t = $(elem).val();
+                    a.createList(t);
+                });
+                return a;
+            },
+            /**
+             * 点击选中图标
+             */
+            check: function () {
+                var item = '#' + PICKER_BODY + ' .layui-iconpicker-icon-item';
+                a.event('click', item, function (e) {
+                    var el = $(e.currentTarget).find('.layui-icon'),
+                        icon = '';
+                    if (isFontClass) {
+                        var clsArr = el.attr('class').split(/[\s\n]/),
+                            cls = clsArr[1],
+                            icon = cls;
+                        $('#' + TITLE_ID).find('.layui-iconpicker-item .layui-icon').html('').attr('class', clsArr.join(' '));
+                    } else {
+                        var cls = el.html(),
+                            icon = cls;
+                        $('#' + TITLE_ID).find('.layui-iconpicker-item .layui-icon').html(icon);
+                    }
+
+                    $('#' + ICON_BODY).removeClass(selected).addClass(unselect);
+                    $(elem).val(icon).attr('value', icon);
+                    // 回调
+                    if (click) {
+                        click({
+                            icon: icon
+                        });
+                    }
+
+                });
+                return a;
+            },
+            // 监听原始input数值改变
+            inputListen: function(){
+                var el = $(elem);
+                a.event('change', elem, function(){
+                    var value = el.val();
+                })
+                // el.change(function(){
+                    
+                // });
+                return a;
+            },
+            event: function (evt, el, fn) {
+                $(BODY).on(evt, el, fn);
+            }
+        };
+
+        var common = {
+            /**
+             * 加载样式表
+             */
+            loadCss: function () {
+                var css = '.layui-iconpicker {max-width: 280px;}.layui-iconpicker .layui-anim{display:none;width:280px;position:absolute;left:0;top:42px;padding:5px 0;z-index:899;min-width:100%;border:1px solid #d2d2d2;max-height:300px;overflow-y:auto;background-color:#fff;border-radius:2px;box-shadow:0 2px 4px rgba(0,0,0,.12);box-sizing:border-box;}.layui-iconpicker-item{border:1px solid #e6e6e6;width:90px;height:38px;border-radius:4px;cursor:pointer;position:relative;}.layui-iconpicker-icon{border-right:1px solid #e6e6e6;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:block;width:60px;height:100%;float:left;text-align:center;background:#fff;transition:all .3s;}.layui-iconpicker-icon i{line-height:38px;font-size:18px;}.layui-iconpicker-item > .layui-edge{left:70px;}.layui-iconpicker-item:hover{border-color:#D2D2D2!important;}.layui-iconpicker-item:hover .layui-iconpicker-icon{border-color:#D2D2D2!important;}.layui-iconpicker.layui-form-selected .layui-anim{display:block;}.layui-iconpicker-body{padding:6px;}.layui-iconpicker .layui-iconpicker-list{background-color:#fff;border:1px solid #ccc;border-radius:4px;}.layui-iconpicker .layui-iconpicker-icon-item{display:inline-block;width:21.1%;line-height:36px;text-align:center;cursor:pointer;vertical-align:top;height:36px;margin:4px;border:1px solid #ddd;border-radius:2px;transition:300ms;}.layui-iconpicker .layui-iconpicker-icon-item i.layui-icon{font-size:17px;}.layui-iconpicker .layui-iconpicker-icon-item:hover{background-color:#eee;border-color:#ccc;-webkit-box-shadow:0 0 2px #aaa,0 0 2px #fff inset;-moz-box-shadow:0 0 2px #aaa,0 0 2px #fff inset;box-shadow:0 0 2px #aaa,0 0 2px #fff inset;text-shadow:0 0 1px #fff;}.layui-iconpicker-search{position:relative;margin:0 0 6px 0;border:1px solid #e6e6e6;border-radius:2px;transition:300ms;}.layui-iconpicker-search:hover{border-color:#D2D2D2!important;}.layui-iconpicker-search .layui-input{cursor:text;display:inline-block;width:86%;border:none;padding-right:0;margin-top:1px;}.layui-iconpicker-search .layui-icon{position:absolute;top:11px;right:4%;}.layui-iconpicker-tips{text-align:center;padding:8px 0;cursor:not-allowed;}.layui-iconpicker-page{margin-top:6px;margin-bottom:-6px;font-size:12px;padding:0 2px;}.layui-iconpicker-page-count{display:inline-block;}.layui-iconpicker-page-operate{display:inline-block;float:right;cursor:default;}.layui-iconpicker-page-operate .layui-icon{font-size:12px;cursor:pointer;}.layui-iconpicker-body-page .layui-iconpicker-icon-limit{display:none;}.layui-iconpicker-body-page .layui-iconpicker-icon-limit:first-child{display:block;}';
+                var $style = $('head').find('style[iconpicker]');
+                if ($style.length === 0) {
+                    $('head').append('<style rel="stylesheet" iconpicker>'+css+'</style>');
+                }
+            },
+            /**
+             * 获取数据
+             */
+            getData: {
+                fontClass: function () {
+                    var arr = ["layui-icon-rate-half","layui-icon-rate","layui-icon-rate-solid","layui-icon-cellphone","layui-icon-vercode","layui-icon-login-wechat","layui-icon-login-qq","layui-icon-login-weibo","layui-icon-password","layui-icon-username","layui-icon-refresh-3","layui-icon-auz","layui-icon-spread-left","layui-icon-shrink-right","layui-icon-snowflake","layui-icon-tips","layui-icon-note","layui-icon-home","layui-icon-senior","layui-icon-refresh","layui-icon-refresh-1","layui-icon-flag","layui-icon-theme","layui-icon-notice","layui-icon-website","layui-icon-console","layui-icon-face-surprised","layui-icon-set","layui-icon-template-1","layui-icon-app","layui-icon-template","layui-icon-praise","layui-icon-tread","layui-icon-male","layui-icon-female","layui-icon-camera","layui-icon-camera-fill","layui-icon-more","layui-icon-more-vertical","layui-icon-rmb","layui-icon-dollar","layui-icon-diamond","layui-icon-fire","layui-icon-return","layui-icon-location","layui-icon-read","layui-icon-survey","layui-icon-face-smile","layui-icon-face-cry","layui-icon-cart-simple","layui-icon-cart","layui-icon-next","layui-icon-prev","layui-icon-upload-drag","layui-icon-upload","layui-icon-download-circle","layui-icon-component","layui-icon-file-b","layui-icon-user","layui-icon-find-fill","layui-icon-loading","layui-icon-loading-1","layui-icon-add-1","layui-icon-play","layui-icon-pause","layui-icon-headset","layui-icon-video","layui-icon-voice","layui-icon-speaker","layui-icon-fonts-del","layui-icon-fonts-code","layui-icon-fonts-html","layui-icon-fonts-strong","layui-icon-unlink","layui-icon-picture","layui-icon-link","layui-icon-face-smile-b","layui-icon-align-left","layui-icon-align-right","layui-icon-align-center","layui-icon-fonts-u","layui-icon-fonts-i","layui-icon-tabs","layui-icon-radio","layui-icon-circle","layui-icon-edit","layui-icon-share","layui-icon-delete","layui-icon-form","layui-icon-cellphone-fine","layui-icon-dialogue","layui-icon-fonts-clear","layui-icon-layer","layui-icon-date","layui-icon-water","layui-icon-code-circle","layui-icon-carousel","layui-icon-prev-circle","layui-icon-layouts","layui-icon-util","layui-icon-templeate-1","layui-icon-upload-circle","layui-icon-tree","layui-icon-table","layui-icon-chart","layui-icon-chart-screen","layui-icon-engine","layui-icon-triangle-d","layui-icon-triangle-r","layui-icon-file","layui-icon-set-sm","layui-icon-add-circle","layui-icon-404","layui-icon-about","layui-icon-up","layui-icon-down","layui-icon-left","layui-icon-right","layui-icon-circle-dot","layui-icon-search","layui-icon-set-fill","layui-icon-group","layui-icon-friends","layui-icon-reply-fill","layui-icon-menu-fill","layui-icon-log","layui-icon-picture-fine","layui-icon-face-smile-fine","layui-icon-list","layui-icon-release","layui-icon-ok","layui-icon-help","layui-icon-chat","layui-icon-top","layui-icon-star","layui-icon-star-fill","layui-icon-close-fill","layui-icon-close","layui-icon-ok-circle","layui-icon-add-circle-fine"];
+                    return arr;
+                },
+                unicode: function () {
+                    return ["&amp;#xe6c9;","&amp;#xe67b;","&amp;#xe67a;","&amp;#xe678;","&amp;#xe679;","&amp;#xe677;","&amp;#xe676;","&amp;#xe675;","&amp;#xe673;","&amp;#xe66f;","&amp;#xe9aa;","&amp;#xe672;","&amp;#xe66b;","&amp;#xe668;","&amp;#xe6b1;","&amp;#xe702;","&amp;#xe66e;","&amp;#xe68e;","&amp;#xe674;","&amp;#xe669;","&amp;#xe666;","&amp;#xe66c;","&amp;#xe66a;","&amp;#xe667;","&amp;#xe7ae;","&amp;#xe665;","&amp;#xe664;","&amp;#xe716;","&amp;#xe656;","&amp;#xe653;","&amp;#xe663;","&amp;#xe6c6;","&amp;#xe6c5;","&amp;#xe662;","&amp;#xe661;","&amp;#xe660;","&amp;#xe65d;","&amp;#xe65f;","&amp;#xe671;","&amp;#xe65e;","&amp;#xe659;","&amp;#xe735;","&amp;#xe756;","&amp;#xe65c;","&amp;#xe715;","&amp;#xe705;","&amp;#xe6b2;","&amp;#xe6af;","&amp;#xe69c;","&amp;#xe698;","&amp;#xe657;","&amp;#xe65b;","&amp;#xe65a;","&amp;#xe681;","&amp;#xe67c;","&amp;#xe601;","&amp;#xe857;","&amp;#xe655;","&amp;#xe770;","&amp;#xe670;","&amp;#xe63d;","&amp;#xe63e;","&amp;#xe654;","&amp;#xe652;","&amp;#xe651;","&amp;#xe6fc;","&amp;#xe6ed;","&amp;#xe688;","&amp;#xe645;","&amp;#xe64f;","&amp;#xe64e;","&amp;#xe64b;","&amp;#xe62b;","&amp;#xe64d;","&amp;#xe64a;","&amp;#xe64c;","&amp;#xe650;","&amp;#xe649;","&amp;#xe648;","&amp;#xe647;","&amp;#xe646;","&amp;#xe644;","&amp;#xe62a;","&amp;#xe643;","&amp;#xe63f;","&amp;#xe642;","&amp;#xe641;","&amp;#xe640;","&amp;#xe63c;","&amp;#xe63b;","&amp;#xe63a;","&amp;#xe639;","&amp;#xe638;","&amp;#xe637;","&amp;#xe636;","&amp;#xe635;","&amp;#xe634;","&amp;#xe633;","&amp;#xe632;","&amp;#xe631;","&amp;#xe630;","&amp;#xe62f;","&amp;#xe62e;","&amp;#xe62d;","&amp;#xe62c;","&amp;#xe629;","&amp;#xe628;","&amp;#xe625;","&amp;#xe623;","&amp;#xe621;","&amp;#xe620;","&amp;#xe61f;","&amp;#xe61c;","&amp;#xe60b;","&amp;#xe619;","&amp;#xe61a;","&amp;#xe603;","&amp;#xe602;","&amp;#xe617;","&amp;#xe615;","&amp;#xe614;","&amp;#xe613;","&amp;#xe612;","&amp;#xe611;","&amp;#xe60f;","&amp;#xe60e;","&amp;#xe60d;","&amp;#xe60c;","&amp;#xe60a;","&amp;#xe609;","&amp;#xe605;","&amp;#xe607;","&amp;#xe606;","&amp;#xe604;","&amp;#xe600;","&amp;#xe658;","&amp;#x1007;","&amp;#x1006;","&amp;#x1005;","&amp;#xe608;"];
+                }
+            }
+        };
+
+        a.init();
+        return new IconPicker();
+    };
+
+    /**
+     * 选中图标
+     * @param filter lay-filter
+     * @param iconName 图标名称，自动识别fontClass/unicode
+     */
+    IconPicker.prototype.checkIcon = function (filter, iconName){
+        var el = $('*[lay-filter='+ filter +']'),
+            p = el.next().find('.layui-iconpicker-item .layui-icon'),
+            c = iconName;
+
+        if (c.indexOf('#xe') > 0){
+            p.html(c);
+        } else {
+            p.html('').attr('class', 'layui-icon ' + c);
+        }
+        el.attr('value', c).val(c);
+    };
+
+    var iconPicker = new IconPicker();
+    exports(_MOD, iconPicker);
+});
@@ -0,0 +1,80 @@
+layui.define(['layer', 'carousel'], function (exports) {
+    var $ = layui.jquery;
+    var layer = layui.layer;
+    var carousel = layui.carousel;
+
+    var renderDom = function (elem, stepItems, postion) {
+        var stepDiv = '<div class="lay-step">';
+        for (var i = 0; i < stepItems.length; i++) {
+            stepDiv += '<div class="step-item">';
+            if (i < (stepItems.length - 1)) {
+                if (i < postion) {
+                    stepDiv += '<div class="step-item-tail"><i class="step-item-tail-done"></i></div>';
+                } else {
+                    stepDiv += '<div class="step-item-tail"><i class=""></i></div>';
+                }
+            }
+            var number = stepItems[i].number;
+            if (!number) {
+                number = i + 1;
+            }
+            if (i == postion) {
+                stepDiv += '<div class="step-item-head step-item-head-active"><i class="layui-icon">' + number + '</i></div>';
+            } else if (i < postion) {
+                stepDiv += '<div class="step-item-head"><i class="layui-icon layui-icon-ok"></i></div>';
+            } else {
+                stepDiv += '<div class="step-item-head "><i class="layui-icon">' + number + '</i></div>';
+            }
+            var title = stepItems[i].title;
+            var desc = stepItems[i].desc;
+            var time = stepItems[i].time;
+            if (title || desc || time) {
+                stepDiv += '<div class="step-item-main">';
+                if (title) {
+                    stepDiv += '<div class="step-item-main-title">' + title + '</div>';
+                }
+                if (desc) {
+                    stepDiv += '<div class="step-item-main-desc">' + desc + '</div>';
+                }
+                if (time) {
+                    stepDiv += '<div class="step-item-main-time">' + time + '</div>';
+                }
+                stepDiv += '</div>';
+            }
+            stepDiv += '</div>';
+        }
+        stepDiv += '</div>';
+        $(elem).prepend(stepDiv);
+        var bfb = 100 / stepItems.length;
+        $('.step-item').css('width', bfb + '%');
+    };
+
+    var laytpStep = {
+        render: function (param) {
+            param.indicator = 'none'; // 不显示指示器
+            param.arrow = 'always'; // 始终显示箭头
+            param.autoplay = false; // 关闭自动播放
+            if (!param.stepWidth) {
+                param.stepWidth = '400px';
+            }
+            carousel.render(param);
+            var stepItems = param.stepItems;
+            renderDom(param.elem, stepItems, 0);
+            $('.lay-step').css('width', param.stepWidth);
+            carousel.on('change(' + param.filter + ')', function (obj) {
+                $(param.elem).find('.lay-step').remove();
+                renderDom(param.elem, stepItems, obj.index);
+                $('.lay-step').css('width', param.stepWidth);
+            });
+            $(param.elem).find('.layui-carousel-arrow').css('display', 'none');
+            $(param.elem).css('background-color', 'transparent');
+        },
+        next: function (elem) {
+            $(elem).find('.layui-carousel-arrow[lay-type=add]').trigger('click');
+        },
+        pre: function (elem) {
+            $(elem).find('.layui-carousel-arrow[lay-type=sub]').trigger('click');
+        }
+    };
+    exports('step', laytpStep);
+});
@@ -0,0 +1,162 @@
+layui.define('jquery', function(exports){
+  "use strict";
+  
+  var $ = layui.$
+  ,MOD_NAME = 'tag',
+  TAG_CLASS = '.tag',
+  BUTTON_NEW_TAG ='button-new-tag',
+  INPUT_NEW_TAG ='input-new-tag',
+  TAG_ITEM ='tag-item',
+  CLOSE = 'tag-close',
+  DEFAULT_SKIN ='layui-btn layui-btn-primary layui-btn-sm'
+  ,tag = function(){
+    this.config = {
+      likeHref:'../../laytp/css/module/tag.css',
+      skin: DEFAULT_SKIN,
+      tagText:'+ New Tag'
+    };
+    this.configs = {}
+  };
+  
+  //全局设置
+  tag.prototype.set = function(options){
+    var that = this;
+    $.extend(true, that.config, options);
+    tag.render();
+    return that;
+  };
+  
+  //表单事件监听
+  tag.prototype.on = function(events, callback){
+    return layui.onevent.call(this, MOD_NAME, events, callback);
+  };
+  
+  //外部Tag新增
+  tag.prototype.add = function(filter, options){
+    var tagElem = $(TAG_CLASS + '[lay-filter='+ filter +']')
+    call.add(null, tagElem, options);
+    call.tagAuto(filter);
+    return this;
+  };
+  
+  //外部Tag删除
+  tag.prototype.delete = function(filter, layid){
+    var tagElem = $(TAG_CLASS + '[lay-filter='+ filter +']')
+    ,tagItemElem = tagElem.find('>.' + TAG_ITEM + '[lay-id="'+ layid +'"]');
+    call.delete(null, tagItemElem);
+    return this;
+  };
+
+  //基础事件体
+  var call = {
+    //Tag点击
+    tagClick: function(e, index, tagItemElem, options){
+      options = options || {};
+      var othis = tagItemElem || $(this)
+      ,index = index || othis.index(othis)
+      ,parents = othis.parents(TAG_CLASS).eq(0)
+      ,filter = parents.attr('lay-filter');
+      layui.event.call(this, MOD_NAME, 'click('+ filter +')', {
+        elem: parents
+        ,index: index
+      });
+    }
+    //Tag新增事件
+    ,add: function(e, tagElem, options){
+      var  filter = tagElem.attr('lay-filter'),
+           buttonNewTag = tagElem.children('.' + BUTTON_NEW_TAG),
+           index = buttonNewTag.index()
+          ,newTag = '<button lay-id="'+ (options.id||'') +'"' +(options.attr ? ' lay-attr="'+ options.attr +'"' : '') +' type="button" class="' + TAG_ITEM  + '">'+ (options.text||'unnaming') +'</button>';
+      var result = layui.event.call(this, MOD_NAME, 'add('+ filter +')', {
+        elem: tagElem
+        ,index: index
+        ,othis: newTag
+      })
+      if(result === false) return;
+      buttonNewTag[0] ? buttonNewTag.before(newTag) : tagElem.append(newTag);
+    }
+    //Tag输入事件
+    ,input: function(e, othis){
+      var buttonNewTag = othis || $(this)
+      ,parents = buttonNewTag.parents(TAG_CLASS).eq(0)
+      ,filter = parents.attr('lay-filter')
+      var options = tag.configs[filter] = $.extend({}, tag.config, tag.configs[filter] || {}, options);
+      //标签输入框
+      var inpatNewTag = $('<div class="' + INPUT_NEW_TAG + '"><input type="text" autocomplete="off" class="layui-input"></div>');
+      inpatNewTag.addClass(options.skin);
+      buttonNewTag.after(inpatNewTag).remove();
+      inpatNewTag.children('.layui-input').on('blur', function () {
+        if(this.value){
+          var options = {
+            text: this.value
+          }
+          call.add(null, parents, options);
+        }
+        inpatNewTag.remove();
+        call.tagAuto(filter);
+      }).focus();
+    }
+    //Tag删除
+    ,delete: function(e, othis){
+      var tagItem = othis || $(this).parent(), index = tagItem.index()
+      ,parents = tagItem.parents(TAG_CLASS).eq(0)
+      ,filter = parents.attr('lay-filter');
+
+      var result = layui.event.call(this, MOD_NAME, 'delete('+ filter +')', {
+        elem: parents
+        ,index: index
+      })
+      if(result === false) return;
+      tagItem.remove()
+    }
+    //Tag 自适应
+    ,tagAuto: function(filter){
+      filter = filter || '';
+      var options = filter ? tag.configs[filter] || tag.config : tag.config;
+      var elemFilter = function(){
+        return filter ? ('[lay-filter="' + filter +'"]') : '';
+      }();
+      $(TAG_CLASS + elemFilter).each(function(){
+        var othis = $(this),tagItem = othis.children('.' + TAG_ITEM), buttonNewTag = othis.children('.' + BUTTON_NEW_TAG);
+        tagItem.removeClass(DEFAULT_SKIN).addClass(options.skin);
+        //允许关闭
+        if(othis.attr('lay-allowClose') && tagItem.length){
+          tagItem.each(function(){
+            var li = $(this);
+            if(!li.find('.'+CLOSE)[0]){
+              var close = $('<i class="layui-icon layui-unselect '+ CLOSE +'">&#x1006;</i>');
+              close.on('click', call.delete);
+              li.append(close);
+            }
+          });
+        }
+        //允许新增标签
+        if(othis.attr('lay-newTag') && buttonNewTag.length === 0){
+          buttonNewTag = $('<button type="button" class="' + BUTTON_NEW_TAG + '"></button>');
+          buttonNewTag.on('click', call.input);
+          othis.append(buttonNewTag);
+        }
+        buttonNewTag.html(options.tagText);
+        buttonNewTag.removeClass(DEFAULT_SKIN).addClass(options.skin);
+      });
+    }
+  };
+  
+  //初始化元素操作
+  tag.prototype.init = function(filter, options){
+    layui.addcss(tag.config.likeHref);
+    if(filter){
+      tag.configs[filter] = $.extend({}, tag.config, tag.configs[filter] || {}, options);
+    }
+    return call.tagAuto.call(this, filter);
+  };
+  
+  tag.prototype.render = tag.prototype.init;
+
+  var tag = new tag(), dom = $(document);
+  tag.render();
+
+  dom.on('click', '.' + TAG_ITEM, call.tagClick); //tag 单击事件
+  exports(MOD_NAME, tag);
+});
+