欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-13 11:45:37
1、先上效果图 2、调用方式

1、先上效果图
jQuery 仿百度输入标签插件附效果图
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);