inputTags.js内容(从layui官方网站下载后修改的,主要是将限定id改为class(id在html中是唯一的,当需要在同个html页面多处使用时就不能满足需求))
layui.define(['jquery','layer'],function(exports){
"use strict";
var $ = layui.jquery,layer = layui.layer,
//外部接口
inputTags = {
config: {},
//设置全局项
set: function(options){
var that = this;
that.config = $.extend({}, that.config, options);
return that;
},
// 事件监听
on: function(events, callback){
return layui.onevent.call(this, MOD_NAME, events, callback)
}
},
//操作当前实例
thisinputTags = function(){
var that = this
,options = that.config;
return {
config: options
}
},
//字符常量
MOD_NAME = 'inputTags',
// 构造器
Class = function(options){
var that = this;
that.config = $.extend({}, that.config, inputTags.config, options);
that.render();
};
//默认配置
Class.prototype.config = {
close: false //默认:不开启关闭按钮
,theme: '' //背景:颜色
,content: [] //默认标签
,aldaBtn: false //默认配置
};
// 初始化
Class.prototype.init = function(){
var that = this
,spans = ''
,options = that.config
,span = document.createElement("span"),
spantext = $(span).text("获取全部数据").addClass('albtn');
if(options.aldaBtn){
$('body').append(spantext);
}
$.each(options.content,function(index,item){
spans +='<span><em>'+item+'</em><button type="button" class="close">×</button></span>';
// $('<div class="layui-flow-more"><a href="javascript:;">'+ ELEM_TEXT +'</a></div>');
})
options.elem.before(spans);
that.events();
}
Class.prototype.render = function(){
var that = this
,options = that.config
options.elem = $(options.elem);
that.enter();
};
// 回车生成标签
Class.prototype.enter = function(){
var that = this
,spans = ''
,options = that.config;
options.elem.focus();
options.elem.keypress(function(event){
var keynum = (event.keyCode ? event.keyCode : event.which);
if(keynum == '13'){
//options.elem获取当前输入框
var $val = options.elem.val().trim();
if(!$val) {return false;}
if(options.content.indexOf($val) == -1){
options.content.push($val)
that.render()
spans ='<span><em>'+$val+'</em><button type="button" class="close">×</button></span>';
options.elem.before(spans)
}
options.done && typeof options.done === 'function' && options.done($val);
options.elem.val('');
}
})
};
//事件处理
Class.prototype.events = function(){
var that = this
,options = that.config;
$('.albtn').on('click',function(){
console.log(options.content)
});
$('.tags').on('click','.close',function(){
var Thisremov = $(this).parent('span').remove(),
ThisText = $(Thisremov).find('em').text();
options.content.splice($.inArray(ThisText,options.content),1)
});
};
//核心入口
inputTags.render = function(options){
var inst = new Class(options);
inst.init();
return thisinputTags.call(inst);
};
exports('inputTags',inputTags);
}).link('module/inputTags/inputTags.css')
引用的css路径根据个人放置情况修改
inputTags.css
em{
font-style: normal;
}
.tags
{
width: 406px;
padding: 10px;
color: #777;
border: 1px solid #d5d5d5;
background-color: #fff;
}
.tags span{
font-size: 12px;
font-weight: normal;
line-height: 16px;
position: relative;
display: inline-block;
height: 16px;
margin-right: 3px;
margin-bottom: 3px;
padding: 4px 22px 5px 9px;
cursor: pointer;
transition: all .2s ease 0s;
vertical-align: baseline;
white-space: nowrap;
color: #fff;
background-color: #009688;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
}
.tags .close{
font-size: 12px;
font-weight: bold;
line-height: 20px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
float: none;
width: 18px;
padding: 0;
cursor: pointer;
text-align: center;
opacity: 1;
color: #fff;
border: 0 none;
background: transparent none repeat scroll 0 0;
text-shadow: none;
}
.tags .close:hover{
background: #ffb800;
}
.inputTags[type='text'],
.inputTags[type='text']:focus{
line-height: 25px;
display: inline;
width: 150px;
margin: 0;
padding: 0 6px;
border: 0 none;
outline: 0 none;
box-shadow: none;
}
.albtn{
line-height: 30px;
display: block;
width: 100px;
height: 30px;
margin: 0 auto;
cursor: pointer;
text-align: center;
color: #fff;
background: #ffb800;
}
扩展模块引用
//config的设置是全局的
layui.config({
base: 'module/' //假设这是你存放拓展模块的根目录
}).extend({ //设定模块别名
inputTags:'inputTags/inputTags' //相对于上述 base 目录的子目录(js文件路径,引用文件时不需要加.js后缀)
});
html中的基本使用(div的class需包含"tags",input的class需包含"inputTags")
<div class="layui-inline">
<label class="layui-form-label">白名单_IP:</label>
<div class="layui-input-inline tags">
<input type="text" class="layui-input inputTags" id="whiteListIP" placeholder="回车为一项输入"/>
</div>
</div>
<script>
//js渲染
layui.use(['inputTags'], function () {
var inputTags = layui.inputTags;
//动态获取数据渲染时内容是一个数组
var whiteListIp =['192.168.0.1','192.168.1.1'];
//elem为输入框元素
inputTags.render({
elem:'#whiteListIP',
content:whiteListIp
});
})
</script>
效果

共有条评论 网友评论