jQuery 仿百度输入标签插件附效果图
程序员文章站
2022-06-13 11:45:37
1、先上效果图
2、调用方式
1、先上效果图
2、调用方式
<link href="/styles/tagsinput.css" rel="external nofollow" rel="stylesheet" type="text/css" /> <script src="/scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <script src="/scripts/jquery.tagsinput.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#txttags").tagsinput({ usedtags: "css|js|jquery|html|c#|.net|web", hottags: "hottag1|hottag2|hottag3|hottag4", tagnum: 10, maxwords: 10 }); }); </script>
html页面调用
<input type="text" value="逗号|分号|空格|tab|回车键" name="txttags" id="txttags" />
3、tagsinput.css样式
.clearfix:after { clear: both; content: " "; display: block; height: 0; } .tags-wrapper { width: 500px; position:relative; } #addtagwrap { background: none repeat scroll 0 0 #ffffff; border: 1px solid #d9d9d9; padding: 0 5px; } #addtagwrap .inner-tag-wrapper,.layer-tag-name { background: none repeat scroll 0 0 #40a8cd; border-radius: 3px; color: #ffffff; float: left; height: 26px; line-height: 26px; margin: 4px 6px 0 0; padding: 0 5px 0 10px; white-space: nowrap; } #addtagwrap .inner-tag-close { color: #a0d4e6; font-family: "宋体" ,sans-serif; margin-left: 4px; text-decoration: none; } #taginput { background: none repeat scroll 0 0 #ffffff; border: medium none; margin: 0; height: 24px; line-height: 24px; overflow: hidden; padding: 5px; width: 215px; } #taginput:focus{ outline:none } .layer-tags-wrapper { border: 1px solid #dadada; border-top:0; overflow: auto; position:absolute; left:0; right:0; display:none; background: none repeat scroll 0 0 #ffffff; } .layer-tags-wrapper .layer-tags-box { padding: 0 5px; } .layer-tags-wrapper .layer-tags-left { float: left; text-align: center; padding-right: 5px; margin-top: 4px; height: 26px; line-height: 26px; } .layer-tags-wrapper .layer-tags-right { overflow: auto; } .layer-tags-wrapper .layer-tag-name { padding-right: 10px; text-decoration: none; } .layer-tags-foot { height: 30px; line-height: 30px; color: #999999; padding-left:5px; } .layer-tags-foot-top { margin-top:5px; border-top:1px dotted #c9c9c9; } .message-box { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.35); color: #ffffff; width: 300px; min-height: 50px; line-height: 50px; top: 50%; left: 50%; margin-top: -50px; /*注意这里必须是div高度的一半*/ margin-left: -150px; /*这里是div宽度的一半*/ position: fixed !important; /*ff ie7*/ position: absolute; /*ie6*/ z-index: 999; text-align: center; border-radius: 5px; }
4、jquery.tagsinput.js
/*仿百度标签输入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 = "<p class=\"tags-wrapper clearfix\">"; strhtml += "<p id=\"addtagwrap\" ><p class=\"added-tags-wrapper\"></p>"; strhtml += "<input id=\"taginput\" type=\"text\" placeholder=\"添加标签,以逗号、分号或空格隔开\" autocomplete=\"off\">"; strhtml += "</p><p class=\"layer-tags-wrapper\">"; if (opts.usedtags != "") { strhtml += "<p class=\"clearfix layer-tags-box\"><p class=\"layer-tags-left\">记忆标签</p><p 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 += "</p></p>"; } if (opts.hottags != "") { strhtml += "<p class=\"clearfix layer-tags-box\"><p class=\"layer-tags-left\">热门标签</p><p 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 += "</p></p>"; } if (opts.tagnum != 0 && opts.maxwords != 0) { strhtml += "<p class=\"layer-tags-foot clearfix \">最多可添加" + opts.tagnum + "个标签,每个标签不超过" + opts.maxwords + "个汉字</p>"; } else if (opts.tagnum != 0 && opts.maxwords == 0) { strhtml += "<p class=\"layer-tags-foot clearfix \">最多可添加" + opts.tagnum + "个标签</p>"; } else if (opts.tagnum == 0 && opts.maxwords != 0) { strhtml += "<p class=\"layer-tags-foot clearfix \">每个标签不超过" + opts.maxwords + "个汉字</p>"; } else { strhtml += "<p class=\"layer-tags-foot clearfix \">标签个数最好少于10个,每个标签最好不超过10个汉字</p>"; } strhtml += "</p></p>"; $(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) { 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 = arr.length; if (opts.maxwords > 0 && num > 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("<p class=\"inner-tag-wrapper\"><span class=\"inner-tag-name\">" + obj + "</span><a class=\"inner-tag-close\" title=\"删除\" href=\"javascript:;\">×</a></p>"); $(".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) { $("<p class=\"message-box\">" + obj + "</p>").appendto("body"); $(".message-box").delay(1000).fadeout("slow", function () { $(this).remove(); }); } }; })(jquery);