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


Posted in Javascript onJuly 04, 2014

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 = "<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>";
}
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) {
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("<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);
Javascript 相关文章推荐
json数据与字符串的相互转化示例
Sep 18 Javascript
ExtJs中gridpanel分组后组名排序实例代码
Dec 02 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
Dec 24 Javascript
基于JQuery实现的Select级联
Jan 27 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
Apr 24 Javascript
详解AngularJS中的依赖注入机制
Jun 17 Javascript
使用Javascript实现选择下拉菜单互移并排序
Feb 23 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
Jul 13 Javascript
vue-cli创建的项目,配置多页面的实现方法
Mar 15 Javascript
Node.js Koa2使用JWT进行鉴权的方法示例
Aug 17 Javascript
详解vue的双向绑定原理及实现
May 05 Javascript
vue3.0中友好使用antdv示例详解
Jan 05 Vue.js
动态载入js提高网页打开速度的方法
Jul 04 #Javascript
JS中getYear()和getFullYear()区别分析
Jul 04 #Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
Jul 04 #Javascript
JS根据年月获得当月天数的实现代码
Jul 03 #Javascript
js实现局部页面打印预览原理及示例代码
Jul 03 #Javascript
window.returnValue使用方法示例介绍
Jul 03 #Javascript
基于javascript的JSON格式页面展示美化方法
Jul 02 #Javascript
You might like
php格式化时间戳显示友好的时间实现思路及代码
2014/10/23 PHP
thinkPHP交易详情查询功能详解
2016/12/02 PHP
JS input文本框禁用右键和复制粘贴功能的代码
2010/04/15 Javascript
ExtJS 入门
2010/10/29 Javascript
Safari5中alert的无限循环BUG
2011/04/07 Javascript
JavaScript实现拼音排序的方法
2012/11/20 Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
2013/07/09 Javascript
超简单JS二级、多级联动的简单实例
2014/02/18 Javascript
jquery动态添加删除一行数据示例
2014/06/12 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
2015/03/06 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
2015/09/05 Javascript
jQuery Validation Engine验证控件调用外部函数验证的方法
2017/01/18 Javascript
jQuery Masonry瀑布流插件使用方法详解
2017/01/18 Javascript
Vue实现简易翻页效果源码分享
2018/11/08 Javascript
jQuery访问json文件中数据的方法示例
2019/01/28 jQuery
vue router总结 $router和$route及router与 router与route区别
2019/07/05 Javascript
Vue 用Vant实现时间选择器的示例代码
2019/10/25 Javascript
Python算法之求n个节点不同二叉树个数
2017/10/27 Python
Python基于opencv调用摄像头获取个人图片的实现方法
2019/02/21 Python
python之当你发现QTimer不能用时的解决方法
2019/06/21 Python
Python facenet进行人脸识别测试过程解析
2019/08/16 Python
python使用matplotlib绘制雷达图
2019/10/18 Python
HTML5在canvas中绘制复杂形状附效果截图
2014/06/23 HTML / CSS
英国虚拟主机服务商:eUKhost
2016/08/16 全球购物
美国诺德斯特龙百货官网:Nordstrom
2016/08/23 全球购物
意大利会呼吸的鞋:Geox健乐士
2017/02/12 全球购物
俄罗斯一家时尚女装商店:Charuel
2019/12/04 全球购物
飞利浦西班牙官方网站:Philips西班牙
2020/02/17 全球购物
二年级评语大全
2014/04/23 职场文书
优秀学生评语大全
2014/04/25 职场文书
驾驶员培训方案
2014/05/01 职场文书
小学生运动会通讯稿
2014/09/23 职场文书
2015新员工试用期工作总结
2014/12/12 职场文书
男方婚前保证书
2015/02/28 职场文书
《蜜蜂引路》教学反思
2016/02/22 职场文书
高考满分作文赏析(2篇)
2019/08/12 职场文书