JQuery制作标签

页面展示：

 

代码实现：

<!doctype html>
<html>
<meta charset="utf-8">
<title>jQuery制作tag标签添加和删除</title>
<link rel="stylesheet" type="text/css" href="label/jquerytagsinput/css/jquery.tagsinput.css" />
<script type="text/javascript" src="label/jquery-1.10.2/jquery.js"></script>
<script type="text/javascript" src="label/jquerytagsinput/js/jquery.tagsinput.js"></script>
<script type="text/javascript" src="label/jquery-ui/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="label/jquery-ui/jquery-ui.min.css" />

<script type="text/javascript">

    function onAddTag(tag) {
        alert("添加标签: " + tag);
    }
    function onRemoveTag(tag) {
        alert("Removed a tag: " + tag);
    }
    
    function onChangeTag(input,tag) {
        alert("Changed a tag: " + tag);
    }
    
    $(function() {
        // 使用importTags函数导入标签列表
        $('#tags_1').importTags('黄色,蓝色,绿色,白色');
        $('#tags_2').importTags('yellow,blue,green,white');

        $('#tags_1').tagsInput({width:'auto',
            onChange: function(elem, elem_tags){
                // 初始化颜色
                $('.tag').css('background-color', '#87CEFA')
            }
        });
        $('#tags_2').tagsInput({
            width: 'auto',
            onChange: function(elem, elem_tags)
            {
                var color  = ['yellow'];
                $('.tag', elem_tags).each(function()
                {
                    if($(this).text().search(new RegExp('\\b(' + color.join('|') + ')\\b')) >= 0)
                        $(this).css('background-color', 'yellow');
                });
                var color  = ['blue'];
                $('.tag', elem_tags).each(function()
                {
                    if($(this).text().search(new RegExp('\\b(' + color.join('|') + ')\\b')) >= 0)
                        $(this).css('background-color', 'blue');
                });
                var color  = ['green'];
                $('.tag', elem_tags).each(function()
                {
                    if($(this).text().search(new RegExp('\\b(' + color.join('|') + ')\\b')) >= 0)
                        $(this).css('background-color', 'green');
                });
                var color  = ['white'];
                $('.tag', elem_tags).each(function()
                {
                    if($(this).text().search(new RegExp('\\b(' + color.join('|') + ')\\b')) >= 0)
                        $(this).css('background-color', 'white');
                });
            }
        });
    });

</script>


<form>
    <p><label>标签</label>
    <input id="tags_1" type="text" class="tags" value="黄色,蓝色,绿色,白色" /></p>
    
    <p><label>标签颜色归类</label>
    <input id="tags_2" type="text" class="tags" value="yellow,blue,green,white" /></p>
</form>

</body>
</html>

 

其他功能：

// 重置标签列表
$('#tags').importTags('');

// 判断标签是否存在
if ($('#tags_1').tagExist('蓝色')) {
    
}

// 调用addTag（）和removeTag（）函数来添加和删除
$('#tags_1').addTag('紫色');
$('#tags_1').removeTag('绿色');

 

 

插件参考：

链接：https://pan.baidu.com/s/1AdewGCSUj_sK7gikc_xAAQ
提取码：gtbd

 

posted @ 2021-06-04 21:28  TianShu  Views(330)  Comments(0)  Edit  收藏  举报