jQuery 仿百度輸入標(biāo)簽插件附效果圖
更新時(shí)間：2014年07月04日 17:36:57 投稿：whsnow
這篇文章主要介紹了jQuery 仿百度輸入標(biāo)簽插件的具體實(shí)現(xiàn),需要的朋友可以參考下
1、先上效果圖
2、調(diào)用方式
<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頁面調(diào)用
<input type="text" value="逗號(hào)|分號(hào)|空格|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
/*仿百度標(biāo)簽輸入v0.1
* @name jquery.tagsinput.js
* @version 0.1
* @author liping
* @date 2014/06/10
* @Email:272323108@qq.com
*/
(function ($) {
$.fn.TagsInput = function (options) {
//默認(rèn)參數(shù)
var defaults = {
usedTags: "",
hotTags: "",
tagNum: 0,
maxWords: 0
};
//用傳入?yún)?shù)覆蓋了默認(rèn)值
var opts = $.extend(defaults, options);
//對(duì)象
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=\"添加標(biāo)簽，以逗號(hào)、分號(hào)或空格隔開\" autocomplete=\"off\">";
strHtml += "</div><div class=\"layer-tags-wrapper\">";
if (opts.usedTags != "") {
strHtml += "<div class=\"clearfix layer-tags-box\"><div class=\"layer-tags-left\">記憶標(biāo)簽</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\">熱門標(biāo)簽</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 + "個(gè)標(biāo)簽，每個(gè)標(biāo)簽不超過" + opts.maxWords + "個(gè)漢字</div>";
}
else if (opts.tagNum != 0 && opts.maxWords == 0) {
strHtml += "<div class=\"layer-tags-foot clearfix \">最多可添加" + opts.tagNum + "個(gè)標(biāo)簽</div>";
}
else if (opts.tagNum == 0 && opts.maxWords != 0) {
strHtml += "<div class=\"layer-tags-foot clearfix \">每個(gè)標(biāo)簽不超過" + opts.maxWords + "個(gè)漢字</div>";
}
else {
strHtml += "<div class=\"layer-tags-foot clearfix \">標(biāo)簽個(gè)數(shù)最好少于10個(gè)，每個(gè)標(biāo)簽最好不超過10個(gè)漢字</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; }
//只統(tǒng)計(jì)漢字字?jǐn)?shù)
var num = 0;
var arr = obj.match(/[^\x00-\xff]/g);
if (arr != null) {
num = arr.length;
if (opts.maxWords > 0 && num > opts.maxWords) {
MessageBox("單個(gè)標(biāo)簽最多" + opts.maxWords + "個(gè)漢字");
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 + "個(gè)標(biāo)簽");
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("該標(biāo)簽已經(jīng)存在");
return false;
}
}
function MessageBox(obj) {
$("<div class=\"message-box\">" + obj + "</div>").appendTo("body");
$(".message-box").delay(1000).fadeOut("slow", function () {
$(this).remove();
});
}
};
})(jQuery);
相關(guān)文章
jQuery 同時(shí)獲取多個(gè)標(biāo)簽的指定內(nèi)容并儲(chǔ)存為數(shù)組
這篇文章主要介紹了jQuery 同時(shí)獲取多個(gè)標(biāo)簽的指定內(nèi)容并儲(chǔ)存為數(shù)組的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11
Jquery實(shí)戰(zhàn)_讀書筆記1—選擇jQuery
近期公司積極組織我們這些開發(fā)人員學(xué)習(xí)進(jìn)步，督促我們學(xué)習(xí)更多的技術(shù)來提高自己。為此我選擇了jQuery作為我學(xué)習(xí)的方向，同時(shí)我也是想將我的學(xué)習(xí)心得分享給大家，以后我會(huì)不斷的更新一系列jQuery方面的學(xué)習(xí)紀(jì)要，幫助大家學(xué)習(xí)。2010-01-01
jquery動(dòng)態(tài)增加刪除表格行的小例子
這篇文章介紹了jquery動(dòng)態(tài)增加刪除表格行的小例子，有需要的朋友可以參考一下2013-11-11
這篇文章主要介紹了jquery中ajax跨域方法,結(jié)合實(shí)例分析了jQuery中使用getJSON及$.ajax實(shí)現(xiàn)ajax跨域的技巧,需要的朋友可以參考下2015-12-12
JQuery EasyUI 加載兩次url的原因分析及解決方案
這篇文章主要介紹了JQuery EasyUI 加載兩次url的原因分析及解決方案,需要的朋友可以參考下2014-08-08
jQuery實(shí)現(xiàn)仿百度帖吧頭部固定導(dǎo)航效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)仿百度帖吧頭部固定導(dǎo)航效果,涉及jquery針對(duì)頁面高度計(jì)算與樣式的動(dòng)態(tài)添加及刪除技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-08-08
jQuery+Ajax+PHP+Mysql實(shí)現(xiàn)分頁顯示數(shù)據(jù)實(shí)例講解
這是一個(gè)典型的Ajax應(yīng)用，在頁面上，您只需要點(diǎn)擊“下一頁”，數(shù)據(jù)區(qū)將自動(dòng)加載對(duì)應(yīng)頁碼的數(shù)據(jù)，重新刷新數(shù)據(jù)區(qū)。類似的效果在很多網(wǎng)站上應(yīng)用，尤其在一些需要展示大量圖片數(shù)據(jù)的網(wǎng)頁如淘寶商品列表頁，Ajax分頁效果讓您的網(wǎng)站數(shù)據(jù)加載顯得非常流暢。2015-09-09
jQuery Mobile 是用于創(chuàng)建移動(dòng) Web 應(yīng)用的前端開發(fā)框架。這篇文章主要介紹了jQuery Mobile頁面返回不需要重新get 的相關(guān)資料,需要的朋友可以參考下2016-04-04
在一個(gè)不是自己寫的頁面上，如何快速定位到他綁定的事件代碼在哪,下面為大家簡(jiǎn)單的介紹下,需要的朋友可以參考下2014-06-06
淺談MVC+EF easyui dataGrid 動(dòng)態(tài)加載分頁表格
下面小編就為大家?guī)硪黄獪\談MVC+EF easyui dataGrid 動(dòng)態(tài)加載分頁表格。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11