jQuery 仿百度输入标签插件附效果图

2020-05-17 06:26:53易采站长站整理

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 = "<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>";
}
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>";
}
else {
strHtml += "<div class="layer-tags-foot clearfix ">标签个数最好少于10个,每个标签最好不超过10个汉字</div>";