Maison >interface Web >Tutoriel Layui >Introduction à la zone de saisie des balises layui inputTags

Introduction à la zone de saisie des balises layui inputTags

尚avant: 2020-02-07 17:31:3310644parcourir

Le framework layui est un framework d'interface utilisateur frontal écrit en utilisant ses propres spécifications de module. Le seuil est extrêmement bas et peut être utilisé immédiatement. Cet article présente inputTags, un type de zone de saisie de balises utilisé dans le framework layui. J'espère qu'il vous sera utile.

zone de saisie des balises lauii style inputTags :

Introduction à la zone de saisie des balises layui inputTags

Structure du répertoire :

Introduction à la zone de saisie des balises layui inputTags

Code de la page :

<!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;)

Pour plus de connaissances sur Layui, veuillez faire attention à la colonne Tutoriel d'utilisation de Layui.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Introduction à la boîte de sélection de l'heure LayuiArticle suivant：Introduction à la boîte de sélection de l'heure Layui

Articles Liés

Voir plus