字节跳动 ssm debugging 网络营销推广 xsd mono usb bootstrap管理模板 ps字体旋转角度 数据库设计规范 js获取body的高度 java解析pdf python安装 python循环语句 java中继承 javarandom php项目实例 windows7loader 幽城幻剑录五内 内存整理工具 霜之祝福 图片链接生成器 din字体下载 mac画图软件 视频修复工具 lol语音包 jq循环 jpg格式转换器 迅雷单机游戏下载 幽灵推 套料软件 冬青黑体简体中文 cad特性不显示 vmlinux 樱牛在哪 熊猫tv弹幕助手 hscan lol无法连接服务器请检查网络连接 视频不能快进 aecc2018
当前位置: 首页 > 学习教程  > 编程语言

layui扩展组件(组合输入框inputTags)

2020/9/19 16:15:44 文章标签:

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路径根据个人放置情况修改引用的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>

效果

效果展示


本文链接: http://www.dtmao.cc/news_show_200367.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?