头像

jQuery仿ace添加标签

来源:http://www.erdangjiade.com/ 二当家的 2015-08-21 08:36浏览(1457)

之前复制了ace的标签,发现加载的js文件比较多,所以自己就仿了它的自定义标签,和大家分享下。

1、请不要问“在不在”之类的问题,有问题直接问!2、学生或暂时没有工作的童鞋,9.9元整站资源免费下载!3、充值VIP会员,整站资源无任何限制下载!5、程序员加油,交流群:368848856 在线 充值

jQuery仿ace添加标签
分类:文字特效 > 标签云 难易:初级
查看演示 下载资源: 114

关注微信号获取此Demo视频教程:

下载资源 下载积分: 30 积分

HTML

Tag Input Control

jQuery

$(function() {
    $(".tags_enter").blur(function() { //焦点失去触发
        addTag($(this));
        $(this).parents(".tags").css({
            "border-color": "#d5d5d5"
        })
    }).keydown(function(event) {
        var key_code = event.keyCode;
        if (key_code == 13) { //enter
            addTag($(this));
        }
    });
    $(".close").live("click",
    function() {
        $(this).parent(".tag").remove();
    });
    $(".tags").click(function() {
        $(this).css({
            "border-color": "#f59942"
        })
    }).blur(function() {
        $(this).css({
            "border-color": "#d5d5d5"
        })
    })
})

添加标签addTag()方法

function addTag(obj) {
    var tag = obj.val();
    if (tag != '') {
        var i = 0;
        $(".tag").each(function() {
            if ($(this).text() == tag + "×") {
                $(this).addClass("tag-warning");
                setTimeout("removeWarning()", 400);
                i++;
            }
        }) obj.val('');
        if (i > 0) { //说明有重复
            return false;
        }
        $("#form-field-tags").before("<span class='tag'>" + tag + "<button class='close' type='button'>×</button></span>"); //添加标签
    }
}

提示:placeholder在ie8以下不兼容,后面我们会写一篇兼容ie低版本的placeholder,敬请关注。

声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:http://www.erdangjiade.com/js/214.html
评论0
头像

友情提示:垃圾评论一律封号,下载出错或任何技术问题请联系QQ 826096331

1 2