Layui的tag标签

最新推荐文章于 2024-04-22 10:37:39 发布
最新推荐文章于 2024-04-22 10:37:39 发布
阅读量5.4k 收藏 3
点赞数
分类专栏： # Layui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38924500/article/details/110390414
版权

1.页面显示

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>默认风格的TAG</legend>
</fieldset>
<div class="layui-btn-container tag">
    <button lay-id="11" type="button" class="tag-item">网站设置</button>
    <button lay-id="22" type="button" class="tag-item">用户管理</button>
    <button lay-id="33" type="button" class="tag-item">权限分配</button>
    <button lay-id="44" type="button" class="tag-item">商品管理</button>
    <button lay-id="55" type="button" class="tag-item">订单管理</button>
</div>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
    <legend>动态操作TAG</legend>
</fieldset>
<!--lay-allowclose="true" 允许关闭标签 值：lay-allowclose="" |lay-allowclose="true" -->
<!--lay-newTag="true" 允许新增标签  值：lay-newTag="" |lay-newTag="true" -->
<div class="layui-btn-container tag" lay-filter="demo" lay-allowclose="true" lay-newTag="true">
    <button lay-id="11" type="button" class="tag-item">网站设置</button>
    <button lay-id="22" type="button" class="tag-item">用户管理</button>
    <button lay-id="33" type="button" class="tag-item">权限分配</button>
    <button lay-id="44" type="button" class="tag-item">商品管理</button>
    <button lay-id="55" type="button" class="tag-item">订单管理</button>
    <!--自定义新增标签按钮元素 button-new-tag -->
    <!--<button type="button" class="layui-btn layui-btn-primary layui-btn-sm layui-btn-radius button-new-tag">+ New Tag</button>-->
</div>
<div class="site-demo-button" style="margin-bottom: 0;">
    <button class="layui-btn site-demo-active" data-type="tagAdd">新增Tag项</button>
    <button class="layui-btn site-demo-active" data-type="tagDelete">删除：商品管理</button>
</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
    <legend>圆角风格的TAG</legend>
</fieldset>
<div class="layui-btn-container tag" lay-filter="test" lay-newTag="true">
    <button lay-id="11" type="button" class="tag-item">网站设置</button>
    <button lay-id="22" type="button" class="tag-item">用户管理</button>
    <button lay-id="33" type="button" class="tag-item">权限分配</button>
    <button lay-id="44" type="button" class="tag-item">商品管理</button>
    <button lay-id="55" type="button" class="tag-item">订单管理</button>
</div>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
    <legend>带删除功能的TAG</legend>
</fieldset>
<div class="layui-btn-container tag" lay-allowclose="true">
    <button lay-id="11" type="button" class="tag-item">网站设置</button>
    <button lay-id="22" type="button" class="tag-item">用户管理</button>
    <button lay-id="33" type="button" class="tag-item">权限分配</button>
    <button lay-id="44" type="button" class="tag-item">商品管理</button>
    <button lay-id="55" type="button" class="tag-item">订单管理</button>
</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
    <legend>带新建功能的TAG</legend>
</fieldset>
<div class="layui-btn-container tag" lay-newTag="true">
    <button lay-id="11" type="button" class="tag-item">网站设置</button>
    <button lay-id="22" type="button" class="tag-item">用户管理</button>
    <button lay-id="33" type="button" class="tag-item">权限分配</button>
    <button lay-id="44" type="button" class="tag-item">商品管理</button>
    <button lay-id="55" type="button" class="tag-item">订单管理</button>
</div>
<script src="layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    //config的设置是全局的
    layui.config({
        base: './modules/' //假设这是你存放拓展模块的根目录
    }).extend({ //设定模块别名
        tag: 'tag' //如果 tag.js 是在根目录，也可以不用设定别名
    }).use('tag', function () {
        var $ = layui.jquery
            , tag = layui.tag; //Tag的切换功能，切换事件监听等，需要依赖tag模块

        //全局设置
        /*tag.set({
          likeHref: 'modules/tag.css', //tag.css所在的路径
          skin: 'layui-btn layui-btn-primary layui-btn-sm layui-btn-radius',//标签样式
          tagText: '添加标签' //标签添加按钮提示文本
        });*/

        //指定渲染 lay-filter="test" 圆角风格的TAG
        tag.render("test", {
            skin: 'layui-btn layui-btn-primary layui-btn-sm layui-btn-radius',//标签样式
            tagText: '<i class="layui-icon layui-icon-add-1"></i>添加标签' //标签添加按钮提示文本
        });

        //触发事件
        var active = {
            tagAdd: function () {
                //新增一个Tag项
                tag.add('demo', {
                    text: '新选项' + (Math.random() * 1000 | 0) //用于演示
                    , id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
                })
            }
            , tagDelete: function (othis) {
                //删除指定Tag项
                tag.delete('demo', '44'); //删除：“商品管理”
                othis.addClass('layui-btn-disabled');
            }
        };

        $('.site-demo-active').on('click', function () {
            var othis = $(this), type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });

        tag.on('click(demo)', function (data) {
            console.log('点击');
            console.log(this); //当前Tag标签所在的原始DOM元素
            console.log(data.index); //得到当前Tag的所在下标
            console.log(data.elem); //得到当前的Tag大容器
        });

        tag.on('add(demo)', function (data) {
            console.log('新增');
            console.log(this); //当前Tag标签所在的原始DOM元素
            console.log(data.index); //得到当前Tag的所在下标
            console.log(data.elem); //得到当前的Tag大容器
            console.log(data.othis); //得到新增的DOM对象
            //return false; //返回false 取消新增操作； 同from表达提交事件。
        });

        tag.on('delete(demo)', function (data) {
            console.log('删除');
            console.log(this); //当前Tag标签所在的原始DOM元素
            console.log(data.index); //得到当前Tag的所在下标
            console.log(data.elem); //得到当前的Tag大容器
            //return false; //返回false 取消删除操作； 同from表达提交事件。
        });
    });
</script>
</body>
</html>

tag.js

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: layui.cache.base + 'tag.css',      //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.data;
    };
    
    //外部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;
    };

    //获取数据
    tag.prototype.data = function (filter) {
      var tagElem = $(TAG_CLASS + '[lay-filter=' + filter + ']');
      var data=[];
      tagElem.find(".tag-item").each(function (i,item) {
          var val= $(item).contents().filter(function (index, content) {
              return content.nodeType === 3;
          }).text();
          data.push(val);
      });
      return data;
     };  
  
    //基础事件体
    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 = '<button lay-id="'+ (options.id||'') +'"' +(options.attr ? ' lay-attr="'+ options.attr +'"' : '') +' type="button" class="' + TAG_ITEM  + '">'+ (options.text||'unnaming') +'</button>';
        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 = $('<div class="' + INPUT_NEW_TAG + '"><input type="text" autocomplete="off" class="layui-input"></div>');
        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 = $('<i class="layui-icon layui-unselect '+ CLOSE +'">&#x1006;</i>');
                close.on('click', call.delete);
                li.append(close);
              }
            });
          }
          //允许新增标签
          if(othis.attr('lay-newTag') && buttonNewTag.length === 0){
            buttonNewTag = $('<button type="button" class="' + BUTTON_NEW_TAG + '"></button>');
            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.link(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);
  });

tag.css

.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.data("name")

name是指lay-filter="name"绑定的名称，就可以获取到这个标签添加的内容。

風の住む街~
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Layui标签页的实现
qq_63578903的博客
12-26 646
第二种是通过点击事件去处理代码大致相似，只不过没有用到layui的element组件和element.init()初始化的方法，比较简单，这里不再展示。先上图：（这是一个页面中同时存在的两个不同的标签页，也同时用了两个方法来写的。
layui tag
weixin_41619400的博客
11-17 803
layui.config({ base: '/static/js/modules/' //假设这是你存放拓展模块的根目录 }).extend({ //设定模块别名 tag: 'tag' //如果 tag.js 是在根目录，也可以不用设定别名 }).use('tag', function () { tag = layui.tag; //全局设置 ...
TagUI自动化框架安装使用
最新发布
m0_57519024的博客
04-22 892
项目介绍TagUI是一个由AI Singapore提供的命令行工具，旨在实现数字化流程自动化（RPA）。该项目得到了政府的资助，以加速新加坡的AI发展。TagUI的主要特点在于，它允许用户通过简单的TagUI语言编写流程，进而在屏幕上自动执行Web、鼠标和键盘交互。TagUI的功能丰富多样，包括数据抓取和处理、网页测试和自动化测试、流程自动化等。用户可以借助TagUI从网页上抓取数据，并进行处理和分析。同时，它也可以用于执行网页测试和自动化测试，例如检查元素是否存在、判断元素的属性值是否符合预期等。
layui组件相关学习
特立独行的博客
03-24 1862
Layui相关组件学习 狂神是一个很好的学习平台 Layui相关组件学习官网 1.选项卡 说明：在标签中使用class=layui-tab可定义该标签为一个选项卡，lay-allowClose="true"表示该选项卡可以被删除，使用layui-tab-item可以设置点击该选项卡时的内容显示。 <div class="layui-tab" lay-allowClose="true"> <ul class="layui-tab-title"> <li class=
layui框架实战案例(12)：layui标签输入框inputTag
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
08-23 2212
在项目开发工作过程中，随着对layui使用频率的增加，越来越发现其功能的强大与简洁。同时内置或第三方配套开发的组件，深有开发如虎添翼之感。从数据库读取后，将默认值植入 data: []中即可。将获取的数据数组直接转为字符串，然后赋值到隐藏表单进行调用。
layui的表单中的一些常见的标签的含义，含在线实战。
谁偷了我的小熊饼干
01-01 722
lay-submit和lay-filter组合使用实现表单的提交,表单的检验。
《layui宇宙版教程》：徽章
来吧，学习！
08-19 355
《Layui宇宙版教程》提供2000人的QQ群进行交流学习，QQ群号：1046961650，或通过手机QQ扫描二维码进入： 1.14 徽章 徽章是一个修饰性的元素，它们本身细小而并不显眼，但掺杂在其它元素中就显得尤为突出了。页面往往因徽章的陪衬，而显得十分和谐和精致。 1.14.1 快速使用 测试代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"&...
layui实现input框添加tag
04-24
本文将详细介绍如何使用Layui实现input框添加tag功能。 首先，我们需要理解tag输入框的基本概念。Tag输入框是一种常见的用户界面元素，它允许用户在输入文本的同时，将其转化为标签形式展示，常用于关键词输入、...
layui用到的tag组件
02-09
在layui中，tag组件是一个重要的部分，它主要用于展示和管理标签，如关键词标签、分类标签等，使得用户可以快速识别和理解内容的关键信息。 1. layui标签组件的使用： layui的tag组件可以通过引入layui.js和layui....
layui增加左侧导航菜单层级四层
04-25
标签中的"layui 文档资料 前端 javascript ecmascript"表明这个话题涉及到layui框架的文档学习，前端开发技术，以及JavaScript（包括ECMAScript规范）的使用。在实现这个功能的过程中，开发者需要熟悉layui的API，...
django3+layui开发博客
10-09
在应用内，我们需要定义博客相关的模型（models.py），如`Post`（文章）、`Category`（分类）和`Tag`（标签）。模型是数据库表的映射，定义了字段类型和关系。例如，`Post`模型可能包含`title`、`content`（使用富...
layui使用label标签的方法
12-29
1. //引入layui标签 2. //body写代码 <form class=layui-form action=> 选择课程： <select id=select name=modules lay-verify=required lay-search=> --请选择--
layui复选框限制选择个数的方法
12-30
复选框限制选择个数的方法 html <div class=layui-form-item> <label class=layui-form-label>xxx</label> <div class=layui-input-block> <input class=education lay-filter=hope type=checkbox name=param[hope_employ][] value=yy title=xx> </div> </div> js form.on('checkbox(hope)',function(dat
汽车租赁系统Java + SSM + jsp + layUI
05-07
配合EL（Expression Language）和JSTL（JavaServer Pages Standard Tag Library）标签库，可以更加简洁地实现页面逻辑。 layUI是一款轻量级的前端UI框架，提供了丰富的组件和样式，如表格、按钮、表单、弹窗等，...
select标签边框的颜色select标签边框的颜色
04-19
用户可以通过这个标签来选择一个或多个预设的选项。然而，`<select>` 标签的默认样式可能并不符合所有设计需求，因此，调整其边框颜色常常是网页定制化过程中的一个环节。 ### 1. CSS 样式控制 HTML 元素的外观...
基于Jsp+Servlet+Layui的学生信息管理系统.zip
08-06
1. **JSP（JavaServer Pages）**：JSP是Java平台上的动态网页技术，它允许开发者在HTML代码中嵌入Java代码片段，或者使用JSP标签库（Tag Libraries）来实现动态功能。在本项目中，JSP主要负责展示数据和处理简单的...
layui基础
qq_44333590的博客
03-15 1078
form表单 页面元素 结构： //第一层：form标签，并给class赋值为layui-form <form class="layui-form " lay-filter="addForm" id="addForm"> //每一项就用一个div标签并给class值layui-for-item值 <div class="layui-form-item"> //标题给一个label标签给class值layui-form-label值 <label clas
layui的基本组件使用
qq_62898618的博客
08-16 3650
主要功能：年选择器、年月选择器、日期选择器、时间选择器、日期时间选择器 五种类型的选择方式为基本核心，并且均支持范围选择（即双控件）。模块加载名称：laydate一·基础参数选项 通过核心方法：laydate.render(options) 来设置基础参数，也可以通过方法：laydate.set(options) 来设定全局基础参数. elem - 绑定元素是必填项；...
Unity中的layer和tag
热门推荐
Focustc
05-06 2万+
Unity中的layer和tag layer和tag均用于标识不同类别的gameobject，侧重点不同 Layer Unity中默认已经有8种layer，但可以自行设置layer，上限32种，对应于一个int值的32位对于场景中的gameobject，均可以设置其layer。 用于camera layer和camera配合起来，可以达到尽在camera上渲染特定层gameo
面包屑 搭配 Tag标签
09-13
面包屑可以搭配Tag标签来提供更好的导航和用户体验。使用面包屑可以显示当前页面的路径，并且通过点击面包屑上的路径可以快速返回到之前的页面。而Tag标签可以用来标记当前页面或者功能模块，帮助用户更好地理解当前所在的位置。 一种常见的搭配方式是，在面包屑中显示当前页面路径的同时，通过Tag标签来标记当前所在的功能模块。比如，在面包屑中显示"首页 > 文章列表 > 编辑文章"，同时在页面右上角的Tag标签中显示"编辑文章"。 这种搭配方式可以帮助用户清晰地了解当前所在的位置，并且方便用户进行页面之间的切换和导航操作。同时，使用Tag标签可以让用户快速识别当前页面的功能模块，提高了用户的操作效率和体验。 总结起来，面包屑和Tag标签的搭配可以提供清晰的导航路径和功能模块标记，帮助用户更好地理解和操作页面。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值