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 相关文章推荐
基于jQuery的弹出消息插件 DivAlert之旅(一)
Apr 01 Javascript
jquery 操作DOM的基本用法分享
Apr 05 Javascript
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
Apr 24 Javascript
JS 实现图片直接下载示例代码
Jul 22 Javascript
Jquery绑定事件(bind和live的区别介绍)
Aug 23 Javascript
jQuery中的pushStack实现原理和应用实例
Feb 03 Javascript
JS实现点击按钮后框架内载入不同网页的方法
May 05 Javascript
JQuery鼠标移到小图显示大图效果的方法
Jun 10 Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
Aug 11 Javascript
JS实现图片放大镜插件详解
Nov 06 Javascript
快速解决vue在ios端下点击响应延时的问题
Aug 27 Javascript
Vue.js中v-for指令的用法介绍
Mar 13 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+xml编程之SimpleXML的应用实例
2015/01/24 PHP
PHP的mysqli_select_db()函数讲解
2019/01/23 PHP
几种延迟加载JS代码的方法加快网页的访问速度
2013/10/12 Javascript
js密码强度检测
2016/01/07 Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
2016/02/25 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
2016/06/25 Javascript
谈谈JavaScript中的几种借用方法
2016/08/09 Javascript
AngularJS表单提交实例详解
2017/02/18 Javascript
JavaScript队列函数和异步执行详解
2017/06/19 Javascript
javascript将url解析为json格式的两种方法
2017/08/18 Javascript
微信小程序实战篇之购物车的实现代码示例
2017/11/30 Javascript
angular4 JavaScript内存溢出问题
2018/03/06 Javascript
jQuery+ajax实现批量删除功能完整示例
2019/06/06 jQuery
vue项目中监听手机物理返回键的实现
2020/01/18 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
2020/02/01 Javascript
vue实现下拉菜单树
2020/10/22 Javascript
[06:21]完美世界亚洲区首席发行官竺琦TI3采访
2013/08/26 DOTA
[03:26]《DAC最前线》之EG经理自述DOTA2经历
2015/02/02 DOTA
[02:42]岂曰无衣,与子同袍!DOTA2致敬每一位守护人
2020/02/17 DOTA
Python 使用PIL中的resize进行缩放的实例讲解
2018/08/03 Python
利用Python求阴影部分的面积实例代码
2018/12/05 Python
python 魔法函数实例及解析
2019/09/25 Python
python 使用多线程创建一个Buffer缓存器的实现思路
2020/07/02 Python
Python 利用Entrez库筛选下载PubMed文献摘要的示例
2020/11/24 Python
Python json解析库jsonpath原理及使用示例
2020/11/25 Python
HTML5 canvas实现移动端上传头像拖拽裁剪效果
2016/03/14 HTML / CSS
Bluebella法国官网:英国性感内衣品牌
2019/05/03 全球购物
如何为DataGridView添加一个定制的Column Type
2014/01/21 面试题
关于人生的感言
2014/01/17 职场文书
大学活动总结模板
2014/07/10 职场文书
后勤管理员岗位职责
2014/08/27 职场文书
党员干部批评与自我批评反四风思想汇报
2014/09/21 职场文书
政府班子四风问题整改措施
2014/10/04 职场文书
学校拾金不昧表扬信
2015/01/16 职场文书
聘任书格式及范文
2015/09/21 职场文书
根德5570型九灯四波段立体声收音机是电子管收音机的楷模 ? 再论5570
2022/04/05 无线电