diff --git a/admin/data/menu.json b/admin/data/menu.json index 5960898..d4dc82c 100644 --- a/admin/data/menu.json +++ b/admin/data/menu.json @@ -81,6 +81,14 @@ "type": 1, "openType": "_iframe", "href": "view/document/step.html" + }, + { + "id": 208, + "title": "标签", + "icon": "layui-icon layui-icon-face-cry", + "type": 1, + "openType": "_iframe", + "href": "view/document/tag.html" } ] }, diff --git a/component/pear/css/pear-module/tag.css b/component/pear/css/pear-module/tag.css new file mode 100644 index 0000000..ac06256 --- /dev/null +++ b/component/pear/css/pear-module/tag.css @@ -0,0 +1,86 @@ +.input-new-tag { + width: 90px; +} + +.input-new-tag input { + height: 100%; + border: none; + padding-left: 0px; +} + +.tag .layui-btn .tag-close:hover { + border-radius: 2px; + background-color: #FF5722; + color: #fff; +} + +.tag .layui-btn .tag-close { + margin-left: 8px; + transition: all .2s; + -webkit-transition: all .2s; +} +.tag-item { + background-color: #67c23a; + color: white; + border: none; +} + +.tag-item:hover { + + color: white; + +} +.tag-item-normal { + background-color: #2D8CF0; + color: white; + border: none; +} + +.tag-item-warm { + background-color: #e6a23c; + color: white; + border: none; +} + +.tag-item-danger { + background-color: #f56c6c; + color: white; + border: none; +} + +.tag-item-dark { + background-color: #525252; + color: white; + border: none; +} + +.tag-item-primary { + background-color: white !important; + color: dimgray; + border: 1px solid dimgray; +} + +.tag-item-normal:hover { + + color: white !important; +} + +.tag-item-warm:hover { + + color: white; +} + +.tag-item-danger:hover { + + color: white; +} + +.tag-item-dark:hover { + + color: white; +} + +.tag-item-primary:hover { + color: dimgray; + border: 1px solid dimgray; +} \ No newline at end of file diff --git a/component/pear/css/pear.css b/component/pear/css/pear.css index ebcd327..c962b31 100644 --- a/component/pear/css/pear.css +++ b/component/pear/css/pear.css @@ -13,4 +13,5 @@ @import url("pear-module/code.css"); @import url("pear-module/link.css"); @import url("pear-module/step.css"); -@import url("pear-module/tab.css"); \ No newline at end of file +@import url("pear-module/tab.css"); +@import url("pear-module/tag.css"); \ No newline at end of file diff --git a/component/pear/module/tag.js b/component/pear/module/tag.js new file mode 100644 index 0000000..8937665 --- /dev/null +++ b/component/pear/module/tag.js @@ -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:'../../modules/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 = ''; + 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 = $('
'); + 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 = $('ဆ'); + close.on('click', call.delete); + li.append(close); + } + }); + } + //允许新增标签 + if(othis.attr('lay-newTag') && buttonNewTag.length === 0){ + buttonNewTag = $(''); + 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); +}); + diff --git a/component/pear/pear.js b/component/pear/pear.js index 4f0ee6f..aac250f 100644 --- a/component/pear/pear.js +++ b/component/pear/pear.js @@ -18,5 +18,6 @@ layui.config({ select: "select", drawer: "drawer", notice: "notice", - step:"step" + step:"step", + tag:"tag" }); diff --git a/view/document/button.html b/view/document/button.html index 99c999a..c49e3f0 100644 --- a/view/document/button.html +++ b/view/document/button.html @@ -24,7 +24,7 @@ 
 								
-								 或
+								或
@@ -89,10 +89,10 @@

显示代码

-								
-								
-								
-								
+								  
+								  
+								  
+								  
diff --git a/view/document/form.html b/view/document/form.html index de67082..f8f4efd 100644 --- a/view/document/form.html +++ b/view/document/form.html @@ -7,9 +7,27 @@ -
+
+
开发环境
+
+ Pear 基于 From 的基础上扩展样式 +
+
+
+
+

显示代码

+
+ 
+								
+								 或
+								
+
+
+
+
+
输入框
@@ -37,7 +55,7 @@
-
+
下拉选择框
@@ -225,8 +243,11 @@ diff --git a/view/document/tag.html b/view/document/tag.html new file mode 100644 index 0000000..8a0979f --- /dev/null +++ b/view/document/tag.html @@ -0,0 +1,192 @@ + + + + + layui + + + + + + +
+
+
+
开发环境
+
+ Tag 标签组件 +
+
+
+
+
+
默认风格
+
+
+ + + + + +
+
+
+
+
+
+
+

显示代码

+
+ 
+								
+								 并
+								
+								 并
+								
+
+
+
+
+
+
+
+
主题风格
+
+
+ + + + +
+
+
+
+
+
+
动态操作
+
+
+ + + + +
+
+ + +
+
+
+
+
+
+
圆角风格
+
+
+ + + + + +
+
+
+
+
+
+
删除功能
+
+
+ + + + + +
+
+
+
+
+
+
新建功能
+
+
+ + + + + +
+
+
+
+
+ + + + +