/*仿百度标签输入v0.1
|
* @name jquery.tagsinput.js
|
* @version 0.1
|
* @author liping
|
* @date 2014/06/10
|
* @Email:272323108@qq.com
|
*/
|
(function ($) {
|
$.fn.TagsInput = function (options) {
|
//默认参数
|
var defaults = {
|
usedTags: "",
|
hotTags: "",
|
tagNum: 0,
|
maxWords: 0
|
};
|
//用传入参数覆盖了默认值
|
var opts = $.extend(defaults, options);
|
//对象
|
var $this = $(this);
|
$this.hide();
|
var arrayTags;
|
var strHtml;
|
strHtml = "<div class=\"tags-wrapper clearfix\">";
|
strHtml += "<div id=\"addTagWrap\" ><div class=\"added-tags-wrapper\"></div>";
|
strHtml += "<input id=\"tagInput\" type=\"text\" placeholder=\"添加标签，以逗号、分号或空格隔开\" autocomplete=\"off\">";
|
strHtml += "</div><div class=\"layer-tags-wrapper\">";
|
if (opts.usedTags != "") {
|
strHtml += "<div class=\"clearfix layer-tags-box\"><div class=\"layer-tags-left\">记忆标签</div><div class=\"layer-tags-right\">";
|
arrayTags = opts.usedTags.split('|');
|
for (i = 0; i < arrayTags.length; i++) {
|
strHtml += "<a class=\"layer-tag-name\" href=\"javascript:;\">" + arrayTags[i] + "</a>";
|
}
|
strHtml += "</div></div>";
|
}
|
if (opts.hotTags != "") {
|
strHtml += "<div class=\"clearfix layer-tags-box\"><div class=\"layer-tags-left\">热门标签</div><div class=\"layer-tags-right\">";
|
arrayTags = opts.hotTags.split('|');
|
for (i = 0; i < arrayTags.length; i++) {
|
strHtml += "<a class=\"layer-tag-name\" href=\"javascript:;\">" + arrayTags[i] + "</a>";
|
}
|
strHtml += "</div></div>";
|
}
|
if (opts.tagNum != 0 && opts.maxWords != 0) {
|
//strHtml += "<div class=\"layer-tags-foot clearfix \">最多可添加" + opts.tagNum + "个标签，每个标签不超过" + opts.maxWords + "个汉字</div>";
|
strHtml += "<div class=\"layer-tags-foot clearfix \">最多可添加" + opts.tagNum + "个标签，每个标签不超过" + opts.maxWords + "个字符</div>";
|
}
|
else if (opts.tagNum != 0 && opts.maxWords == 0) {
|
strHtml += "<div class=\"layer-tags-foot clearfix \">最多可添加" + opts.tagNum + "个标签</div>";
|
}
|
else if (opts.tagNum == 0 && opts.maxWords != 0) {
|
//strHtml += "<div class=\"layer-tags-foot clearfix \">每个标签不超过" + opts.maxWords + "个汉字</div>";
|
strHtml += "<div class=\"layer-tags-foot clearfix \">每个标签不超过" + opts.maxWords + "个字符</div>";
|
}
|
else {
|
//strHtml += "<div class=\"layer-tags-foot clearfix \">标签个数最好少于10个，每个标签最好不超过10个汉字</div>";
|
strHtml += "<div class=\"layer-tags-foot clearfix \">标签个数最好少于10个，每个标签最好不超过10个字符</div>";
|
}
|
strHtml += "</div></div>";
|
$(strHtml).insertAfter($this);
|
if ($(".layer-tag-name").length > 0) {
|
$(".layer-tags-foot").addClass("layer-tags-foot-top");
|
}
|
|
var inputTags = $this.val();
|
arrayTags = inputTags.split(',');
|
for (i = 0; i < arrayTags.length; i++) {
|
addTag(arrayTags[i]);
|
}
|
$(".layer-tag-name").each(function () {
|
$(this).click(function () { addTag($(this).text()); });
|
});
|
|
$("#tagInput").keydown(function (e) {
|
var keyCode = e.which || e.keyCode;
|
if (keyCode == 13 || keyCode == 32 || keyCode == 9) {
|
if (addTag($(this).val())) { $(this).val(""); }
|
return false;
|
}
|
}).keyup(function (e) {
|
var keyCode = e.which || e.keyCode;
|
if (keyCode == 188 || keyCode == 59 || keyCode == 186) {
|
if (addTag($(this).val())) { $(this).val(""); }
|
return false;
|
}
|
}).click(function () {
|
$(".layer-tags-wrapper").show();
|
}).blur(function () {
|
if (addTag($(this).val())) { $(this).val(""); }
|
return false;
|
});
|
|
$(".tags-wrapper").mouseleave(function () {
|
$(".layer-tags-wrapper").hide();
|
});
|
|
function addTag(obj) {
|
obj = obj.replace(/[ |,|，|;|；]/g, "");
|
if (obj == "") { return false; }
|
//只统计汉字字数
|
var num = 0;
|
//var arr = obj.match(/[^\x00-\xff]/g);
|
//if (arr != null) {
|
num = obj.length;
|
if (opts.maxWords > 0 && num > opts.maxWords) {
|
//MessageBox("单个标签最多" + opts.maxWords + "个汉字");
|
MessageBox("单个标签最多" + opts.maxWords + "个字符");
|
return false;
|
}
|
num = 0;
|
//}
|
var tags = $("#addTagWrap .inner-tag-name");
|
var flag = true;
|
var s = "";
|
tags.each(function () {
|
if ($(this).text() == obj) {
|
flag = false;
|
return false;
|
}
|
num++;
|
s += $(this).text() + "|";
|
});
|
if (opts.tagNum > 0 && num >= opts.tagNum) {
|
MessageBox("最多可添加" + opts.tagNum + "个标签");
|
return false;
|
}
|
if (flag) {
|
$(".added-tags-wrapper").append("<div class=\"inner-tag-wrapper\"><span class=\"inner-tag-name\">" + obj + "</span><a class=\"inner-tag-close\" title=\"删除\" href=\"javascript:;\">×</a></div>");
|
$(".added-tags-wrapper .inner-tag-close:last").click(function () {
|
$(this).parent().remove();
|
});
|
s += obj + "|";
|
if (s.length > 0) {
|
s = s.substring(0, s.length - 1);
|
$this.val(s);
|
}
|
return true;
|
}
|
else {
|
MessageBox("该标签已经存在");
|
return false;
|
}
|
}
|
|
function MessageBox(obj) {
|
$("<div class=\"message-box\">" + obj + "</div>").appendTo("body");
|
$(".message-box").delay(1000).fadeOut("slow", function () {
|
$(this).remove();
|
});
|
}
|
};
|
})(jQuery);
|
