登录  /  注册

layui标签输入框inputTags介绍

发布: 2020-02-07 17:31:33
转载
10077人浏览过

layui框架是一款采用自身模块规范编写的前端ui框架,门槛极低,拿来即用。本文为大家介绍了一种layui框架中使用的标签输入框inputtags,希望对大家有一定的帮助。

layui标签输入框inputTags介绍

layui标签输入框inputTags样式:

1.jpg

目录结构:

2.jpg

页面代码:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>inputTags</title>
		<link rel="stylesheet" href="plugins/layui/css/layui.css" />

	</head>

	<body>
		<div class="tags" id="tags">
			<input type="text" name="" id="inputTags" placeholder="回车生成标签" autocomplete="off">
		</div>
	</body>

</html>
<script type="text/javascript" src="plugins/layui/layui.js"></script>
<script>
	layui.config({
		base: &#39;js/&#39;,
	}).use([&#39;inputTags&#39;], function() {
		var inputTags = layui.inputTags;
		inputTags.render({
			elem: &#39;#inputTags&#39;, //定义输入框input对象
			content: [], //默认标签
			aldaBtn: true, //是否开启获取所有数据的按钮
			done: function(value) { //回车后的回调
				console.log("刚刚输入标签===="+value)
			}
		})
	})
</script>
登录后复制

**inputTags.js**

/*
* @Author: layui-2
* @Date:   2018-08-31 11:40:42
* @Last Modified by:   layui-2
* @Last Modified time: 2018-09-04 14:44:38
*/
layui.define([&#39;jquery&#39;,&#39;layer&#39;],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 = &#39;inputTags&#39;


  // 构造器
  ,Class = function(options){
    var that = this;
    that.config = $.extend({}, that.config, inputTags.config, options);
    that.render();
  };

   //默认配置
  Class.prototype.config = {
    close: false  //默认:不开启关闭按钮
    ,theme: &#39;&#39;   //背景:颜色
    ,content: [] //默认标签
    ,aldaBtn: false //默认配置
  };

  // 初始化
  Class.prototype.init = function(){
    var that = this
    ,spans = &#39;&#39;
    ,options = that.config
    ,span = document.createElement("span"),
    spantext = $(span).text("获取全部数据").addClass(&#39;albtn&#39;);
    if(options.aldaBtn){
      $(&#39;body&#39;).append(spantext)
    }
    
    $.each(options.content,function(index,item){
      spans +=&#39;<span><em>&#39;+item+&#39;</em><button type="button" class="close">×</button></span>&#39;;
      // $(&#39;<div class="layui-flow-more"><a href="javascript:;">&#39;+ ELEM_TEXT +&#39;</a></div>&#39;);
    })
    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 = &#39;&#39;
    ,options = that.config;
    options.elem.focus();
    options.elem.keypress(function(event){  
      var keynum = (event.keyCode ? event.keyCode : event.which);  
      if(keynum == &#39;13&#39;){  
        var $val = options.elem.val().trim();
        if(!$val) return false;
        if(options.content.indexOf($val) == -1){
          options.content.push($val)
          that.render()
          spans =&#39;<span><em>&#39;+$val+&#39;</em><button type="button" class="close">×</button></span>&#39;;
          options.elem.before(spans)
        }
        options.done && typeof options.done === &#39;function&#39; && options.done($val);
        options.elem.val(&#39;&#39;);
      }   
    })
  };
  
  //事件处理
  Class.prototype.events = function(){
     var that = this
    ,options = that.config;
    $(&#39;.albtn&#39;).on(&#39;click&#39;,function(){
      console.log(options.content)
    })
    $(&#39;#tags&#39;).on(&#39;click&#39;,&#39;.close&#39;,function(){
      var Thisremov = $(this).parent(&#39;span&#39;).remove(),
      ThisText = $(Thisremov).find(&#39;em&#39;).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(&#39;inputTags&#39;,inputTags);
}).link(&#39;css/inputTags.css&#39;)
登录后复制

更多layui知识请关注layui使用教程栏目。

以上就是layui标签输入框inputTags介绍的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:csdn网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号