使用jQuery打造自己的TagList(第一版)

最新推荐文章于 2024-05-22 13:52:22 发布
最新推荐文章于 2024-05-22 13:52:22 发布
阅读量71 收藏
点赞数
文章标签： javascript python ViewUI
原文链接：https://my.oschina.net/astrongpig/blog/28850
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png


//TODO:编辑TAG
<!DOCTYPE html>
<html>
<head>
    <title>Testing Page</title>
    <style>
        /*外围包裹DIV样式*/
        .tag-list-wrapper
        {
            position: relative;
            padding: 5px;
            border: 1px #BFBFBF solid;
            border-right-color: #E2E2E2;
            border-bottom-color: #E2E2E2;
            font-size: 13px;
            color: #999;
            width:400px;
        }
        /*单个标签，A元素*/
        .tag-list-item
        {
            position: relative;
            float: left;
            height: 22px;
            line-height: 22px;
            overflow: hidden;
            border: 1px #A9D789 solid;
            border-radius: 2px;
            background: #B7E498;
            margin: 0 5px 5px 0;
            padding: 0 15px 0 5px;
            color: black;
            white-space: nowrap;
        }
        /*删除图标，B元素*/
        .tag-list-del
        {
            position: absolute;
            margin-left:5px;
            top: 8px;
            right: 4px;
            width: 7px;
            height: 6px;
            background: url(ico_deltag.png) no-repeat;
            overflow: hidden;
            cursor: pointer;
            border:1px solid #B7E498;
        }
        .tag-list-del:hover
        {
            border:1px solid #fff;
        }
        .tag-input-zone,.tag-input-zone:focus
        {
            border:none;
            height:22px;
            width:120px;
            line-height:22px;
            outline:none;
        }
    </style>
    <script src="jquery-1.4.4.min.js"></script>
    <script type="text/javascript" language="javascript">
        $.tagList = function (hidden, settings) {
            if (!hidden) return;
            var max = settings && settings.max ? settings.max : 5;
            var objs = {
                trim: function (str) { return str.replace(/(^\s*)|(\s*$)/g, ""); },
                addTag: function (input) {
                    var wrapper = $(input.parentNode);
                    //不允许超过最大标签个数
                    if (wrapper.find('.tag-list-item').length >= max) {
                        input.value = '';
                        return;
                    }
                    //如果快速地按下空格可能会导致一些问题，所以需要去除全部空格
                    var tagName = objs.trim(input.value);
                    if (!tagName) {
                        input.value = '';
                        return;
                    }
                    //不允许重复，检验标签是否存在
                    if (wrapper.find('.tag-list-value[tag-value="' + tagName + '"]').length) {
                        input.value = '';
                        return;
                    }
                    //加入新标签
                    var newTag = ['<a class="tag-list-item"><em class="tag-list-value" title="编辑" tag-value="'];
                    newTag.push(tagName);
                    newTag.push('">');
                    newTag.push(tagName);
                    newTag.push('</em><b title="删除" class="tag-list-del">*</b></a>');
                    $(input.parentNode).find('.tag-list-container').append(newTag.join('')).find('.tag-list-del').click(function () { objs.removeTag(this) });
                    //清除输入
                    input.value = '';
                    input.focus();
                    this._updateHidden(wrapper);
                },
                removeTag: function (t) {
                    //输入框内按下退格，清除最后一个标签
                    if (t.tagName == 'INPUT') {
                        $(t.parentNode).find('.tag-list-item:last-child').remove();
                        this._updateHidden(t.parentNode)
                    }
                    //点击删除图标
                    else {
                        this._updateHidden($(t).parents('.tag-list-wrapper')[0], t);
                    }
                },
                //更新隐藏文本
                _updateHidden: function (wrapper, b) {
                    var newVal = [];
                    if (b) {
                        wrapper.children[0].removeChild(b.parentNode);
                    }
                    $(wrapper).find('.tag-list-value').each(function () {
                        newVal.push(this.innerHTML);
                    });
                    document.getElementById(hidden).value = newVal.join(',');
                }
            };
            $('#' + hidden).after('<div class="tag-list-wrapper"><span class="tag-list-container"></span><input type="text" class="tag-input-zone" placeholder="在此输入标签" /></div>')
            .next('.tag-list-wrapper').find('.tag-input-zone').keydown(function (e) {
                //按下空格添加标签，需要处理快速连续的按下过个空格
                if (e.which == 32) {
                    objs.addTag(this);
                }
                //按下回车添加标签，阻止默认的表单提交操作
                else if (e.which == 13) {
                    objs.addTag(this);
                    return false;
                }
                //按下退格删除标签
                else if (e.which == 8) {
                    //如果input的value为空则触发删除标签事件，如果不为空则执行默认动作
                    if (this.value.trim() == '') {
                        objs.removeTag(this);
                    }
                }
            });
        };
        $(function () {
            $.tagList('myText', { max: 10 });
            $.tagList('txt', { max: 10 });
        });
    </script>
</head>
<body>
<form action="http://www.baidu.com" method="post">
<h1>Build your own tag list</h1>
<input type="text" id="myText" name="myText" />
<input type="text" id="txt" name="myText" />
</form>
</body>
</html>
====
删除- 小图标

转载于:https://my.oschina.net/astrongpig/blog/28850

weixin_34150503
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
taglist4.6
08-17
taglist下载地址http://vim-taglist.sourceforge.net/download.html
使用jQuery tag handler开发一个带有标签功能的文章发布系统
weixin_33882452的博客
05-17 91
在线演示1  在线演示2  本地下载 网站和web开发中我们常常需要处理类似标签添加功能的模块，以前我们也介绍过相关的jQuery插件 - textext，可以方便的添加标签增减和自动补齐相关功能。今天这里我们将使用另外一个非常轻量级的jQuery插件来实现漂亮的标签处理功能，这里我们将使用以前的超酷留言板系统为基础来实现一个完整功能的留言发布系统，希望大家喜欢！ 主要使用插件 jQ...
Jquery
weixin_55101030的博客
09-21 2064
jquery
jQuery给标签添加自定义属性
sunsineq的专栏
10-18 2004
jQuery给标签添加自定义属性 下面代码包含了添加和获取自定义属性。 添加的属性值有数字，类数组，对象，详细用法见备注。 <script type="text/javascript"> // 设置属性 $('#box').css('width', '200px') $('#a1').attr('href',"http://www.baidu.com") // 设置多个属性 //...
jQuery Tags Input Plugin（添加/删除标签插件）
weixin_33859665的博客
11-30 443
看名字应该知道是干嘛用了吧。 一个jquery开发的标签功能加强插件，可以生成或删除标签，还能对输入重复标签进行检查，和JQuery autocomplete插件配合实现自动完成功能。  官网：http://xoxco.com/projects/code/tagsinput/ 截图： (下面是翻译了官网上的用法，英文不是很好，有能力的尽量看官网吧) 首先，引用下面两个文件 &lt;...
vim中taglist无法显示问题
Carter的程序人生
11-13 4122
以前在fedora中使用使用taglist一直正常； 今天在ubuntu中配置了vim，但是taglist无法正常显示函数及变量列表； 查看文件目录下面也生成了tags的文件，说明ctags也安装没问题； 后来goolge好久，找到了解决办法：        1、打开文件： vim ~/.vim/plugin/taglist.vim        2、在taglist.vim中查找 /l
Jacob记录的taglist插件
12-03
愿你一直勇敢，单纯，相信爱https://blog.csdn.net/JingJPing/article/details/128164059~~~~~[root@localhost Jacob]# cp taglist_46.zip Jacob.zip[root@localhost Jacob]# tar -czvf Jacob Jacob.zip
TagList
03-06
TagList
vim taglist插件
01-21
vim taglist插件，解决在中文路径下，taglist无法正常工作的情况
jquery实现的随机多彩tag标签随机颜色和字号大小效果
12-09
jquery随机多彩tag标签随机颜色和字号大小效果 js代码： 代码如下: [removed][removed] [removed][removed] [removed] $(document).ready(function() { var tags_a = $(“#tags a
ant design DatePicker日期选择框指定分钟的间隔minuteStep属性
u010234868的专栏
05-17 221
在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。
Vue.js的发展史（一）
2301_79683791的博客
05-15 781
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
【学习笔记】后端（Ⅰ）—— NodeJS（Ⅱ）
Eddie_hyh的博客
05-21 454
NodeJS（Ⅱ）
React函数式组件的父子方法互相调用，父组件调用子组件方法，子组件调用父组件方法
SongZhengxing_的博客
05-18 208
子组件需要使用 forwardRef 函数包裹，然后使用 useImperativeHandle 暴露属性和方法。编写子组件 Child。
前端开发攻略---用Vue实现无限滚动的几种方法
最新发布
nibabaoo的博客
05-22 418
用vue实现无限滚动
虚拟列表 vue-virtual-scroller 的使用
小秀的博客
05-22 294
【代码】虚拟列表 vue-virtual-scroller 的使用。
【MySQL精通之路】AdminAPI-使用
Anakki的博客
05-19 691
本文介绍MySQL SHELL提供的MySQL AdminAPI，使您能够，使用它们创建和，并集成。
JavaScript函数进阶（1）——递归和堆栈
qq_60624992的博客
05-16 404
当一个函数解决一个任务时，在解决的过程中它可以调用很多其它函数。在部分情况下，函数会调用。有关正在运行的函数的执行过程的相关信息被存储在其。通过迭代的思路来实现，使用循环来实现。通过函数来不断调用自身来实现。
vue3 使用WebAssembly 实战
qq_35374791的博客
05-16 1135
文件已经正确部署，并且可以通过指定的URL访问。此外，根据你的WASM模块实际功能和导出函数，代码中的具体实现细节（如参数传递和返回值处理）可能有所不同。函数来异步加载并实例化WebAssembly模块。首先，你需要一个WebAssembly模块。假设你已经有了一个编译好的。在Vue 3组件中，你可以在。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值