基於jquery的選擇標簽至文本域效果,可多選/可過濾重復/可限制個數的實現代碼

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> 基於jquery的選擇標簽至文本域效果,可多選/可過濾重復/可限制個數的實現代碼

編輯：JQuery特效代碼

暫時沒有對手動輸入的做判斷, 需要的話, 可自行在keyup及change事件中添加相關判斷.
相關說明及調用方法,請參見代碼中的注釋.
演示及代碼:

<!doctype html> 
<html> 
<head> 
<meta charset="gbk"> 
<title>選擇標簽至文本域效果,可多選/可過濾重復/可限制個數@Mr.Think</title> 
<style> 
/*reset css*/ 
body,input{letter-spacing:1px;font:12px/1.5 tahoma,arial,\5b8b\4f53} 
div,h2,p,input,select{margin:0;padding:0} 
input{vertical-align:middle} 
h1{font-size:1em;font-weight:normal} 
h1 a{background:#047;padding:2px 3px;color:#fff;text-decoration:none} 
h1 a:hover{background:#a40000;color:#fff;text-decoration:underline} 
h3{color:#888;font-weight:bold;font-size:1em;margin:1em auto;position:relative} 
/*demo css*/ 
#demo input{_margin-top:1px;padding-left:5px;border:1px solid #999;width:700px;height:20px;font-size:14px;color:#000} 
#dropbox{display:none;z-index:9999;padding:5px;background:#fff;border:1px solid #999;border-top:0;z-index:999} 
#dropbox a{margin-right:8px;text-decoration:none} 
#dropbox a:hover{text-decoration:underline} 
#dropbox p{line-height:24px} 
#dropbox em.close{float:right;color:#999;font-style:normal;cursor:pointer} 
</style> 
<meta name="author" content="Mr.Think青鳥" /> 
<meta name="keywords" content="Mr.Think,前端開發,WEB前端,前端技術,前端開發,WEB前端開發,用戶體驗,網站策劃,網站優化,青鳥,javascript,jQuery,css,xhtml,html,UE,SEO,Mr.Think的博客,青鳥的博客,PHP愛好者,Bluebirdsky" /> 
<meta name="description" content="Mr.Think的博客,中文網名青鳥,現專注於WEB前端開發,同時也是一位PHP的愛好者.愛思考,有點代碼潔癖,生吃過螃蟹腿,喜好肉食.這裡是我記錄知識與生活瑣事的地方." /> 
</head> 
<body> 
 
<div id="demo"> 
<label for="tagsbox"><strong>標簽：</strong><input type="text" value="點我" class="tagsbox" data-count="10" /></label> 
 
<div id="dropbox"> 
<em class="close" title="關閉">關閉</em> 
<p><strong>溫馨提示：</strong>選擇下面的熱門標簽及使用過的標簽,標簽將自動排列至表單域。</p> 
<p><strong>熱門標簽：</strong><a href="javascript:void(0)">時光漫步</a><a href="javascript:void(0)">JavaScript</a><a href="javascript:void(0)">jQuery Plugin</a><a href="javascript:void(0)">那一年</a><a href="javascript:void(0)">jQuery插件</a><a href="javascript:void(0)">簡單</a><a href="javascript:void(0)">星空</a><a href="javascript:void(0)">夢田</a><a href="javascript:void(0)">晴朗</a><a href="javascript:void(0)">mrthink.net</a></p> 
<p><strong>您使用過的標簽：</strong><a href="javascript:void(0)">許巍</a><a href="javascript:void(0)">Sophie Zelmani</a><a href="javascript:void(0)">王菲</a><a href="javascript:void(0)">小娟&山谷裡的居民</a><a href="javascript:void(0)">Ke$Ha</a><a href="javascript:void(0)">Shakira</a><a href="javascript:void(0)">樸樹</a><a href="javascript:void(0)">羅大佑</a></p> 
</div> 
 
<br style="clear:both" /> 
<br style="clear:both" /> 
<input value="我是用來測試的" style="width:200px" /> 
<select> 
<option>我是用來測試的下拉列表</option> 
<option>00</option> 
<option>00</option> 
<option>00</option> 
</select> 
</div> 
<input value="我是用來測試的" style="width:200px" /> 
<select> 
<option>我是用來測試的下拉列表</option> 
<option>one</option> 
<option>two</option> 
<option>three</option> 
</select> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<script> 
/******************************* 
* @author Mr.Think 
* @author blog http://mrthink.net/ 
* @2010.11.10 
* @可自由轉載及使用,但請注明版權歸屬 
*******************************/ 
//調用bgIframe,解決IE6下遮住下拉列表的問題 
//bgIframe函數 Copyright (c) 2006 Brandon Aaron (http://brandonaaron.net) 
;(function($){ 
$.fn.bgIframe = $.fn.bgiframe = function(s) { 
// This is only for IE6 
if ( $.browser.msie && /6.0/.test(navigator.userAgent) ) { 
s = $.extend({ 
top : 'auto', // auto == .currentStyle.borderTopWidth 
left : 'auto', // auto == .currentStyle.borderLeftWidth 
width : 'auto', // auto == offsetWidth 
height : 'auto', // auto == offsetHeight 
opacity : true, 
src : 'javascript:false;' 
}, s || {}); 
var prop = function(n){return n&&n.constructor==Number?n+'px':n;}, 
html = '<iframe class="bgiframe"frameborder="0"tabindex="-1"src="'+s.src+'"'+ 
'style="display:block;position:absolute;z-index:-1;'+ 
(s.opacity !== false?'filter:Alpha(Opacity=\'0\');':'')+ 
'top:'+(s.top=='auto'?'expression(((parseInt(this.parentNode.currentStyle.borderTopWidth)||0)*-1)+\'px\')':prop(s.top))+';'+ 
'left:'+(s.left=='auto'?'expression(((parseInt(this.parentNode.currentStyle.borderLeftWidth)||0)*-1)+\'px\')':prop(s.left))+';'+ 
'width:'+(s.width=='auto'?'expression(this.parentNode.offsetWidth+\'px\')':prop(s.width))+';'+ 
'height:'+(s.height=='auto'?'expression(this.parentNode.offsetHeight+\'px\')':prop(s.height))+';'+ 
'"/>'; 
return this.each(function() { 
if ( $('> iframe.bgiframe', this).length == 0 ) 
this.insertBefore( document.createElement(html), this.firstChild ); 
}); 
} 
return this; 
}; 
})(jQuery); 
//選擇標簽至文本域插件 
;(function(){ 
$.fn.extend({ 
iSelectTags:function(options){ 
var iset={ 
name:'.tagsbox',//表單或class或id名 
drop:$('#dropbox'),//彈出框定位 
pseudoClass:$('#dropbox>p>a'),//可選擇的標簽定位 
close:$('em.close'),//關閉按鈕定位 
separator:',',//標簽間分隔符,建議使用英文逗號 
maxCount:10 //默認限制個數,也可以設置表單的data-count值覆蓋默認值 
} 
options = options || {}; 
$.extend(iset, options); 
var _input=$(iset.name); 
var _inputVal=_input.val(); 
var _arr=new Array(); //存放標簽的數組 
var _left=_input.offset().left; //左絕對距離 
var _top=_input.offset().top+_input.outerHeight(); //上絕對距離,此處要加上表單的高度 
var _dropW=_input.outerWidth()-parseInt(_input.css('border-left-width'))-parseInt(_input.css('border-right-width'))-parseInt(iset.drop.css('paddingLeft'))-parseInt(iset.drop.css('paddingRight')); 
iset.drop.css({'position':'absolute','left':_left+'px','top':_top+'px','width':_dropW+'px'}); 
//彈出框的寬度,此處計算的是與表單實際寬度相等的.也可以直接在樣式中定義. 
var _txt=null; 
var _maxCount=parseInt(_input.attr('data-count'));//限制選擇個數 
if(isNaN(_maxCount)){ 
_maxCount=iset.maxCount 
} 
_input.click(function(){ 
iset.drop.show(); 
iset.drop.bgiframe();//調用bgiframe插件,解決ie6下select的z-index無限大問題 
}).bind('keyup change',function(){ 
//可以在此處擴展手動輸入標簽情況下的相關判斷 
//if語句可避免清空重新選擇時第一個字符為逗號 
if ($(this).val() == '') { 
_arr = new Array(); 
}else { 
_arr = $(this).val().split(iset.separator);//當用戶手動刪除或修改標簽值後更新標簽值 
} 
}); 
$(document).click(function(e){ 
//點擊非彈出框區域時關閉彈出框 
//下面的 if語句是用來判斷傳入的是class還是id 
if(iset.name.charAt(0)=='#'){ 
if(e.target.id!=iset.name.substring(1)){ 
iset.drop.hide(); 
} 
}else if(iset.name.charAt(0)=='.'){ 
if(e.target.className!=iset.name.substring(1)){ 
iset.drop.hide(); 
} 
} 
}); 
iset.drop.click(function(e){ 
//阻止彈出框區域默認事件 
e.stopPropagation(); 
}); 
iset.pseudoClass.click(function(){ 
//標簽選擇 
_txt=$(this).text(); 
//下面的$.inArray是用來判斷是否重復 
//若想反饋重復提示或走出限制個數提示,可改進下面的if語句 
if(($.inArray(_txt,_arr)==-1) && (_arr.length<_maxCount )){ 
_arr.push(_txt); 
_inputVal=_arr.join(iset.separator); 
// if(_inputVal.charAt(0)==','){ 
// _inputVal.replace(/,/,'') 
// } 
_input.val(_inputVal); 
} 
}); 
//關閉按鈕 
iset.close.click(function(){ 
iset.drop.hide(); 
}); 
} 
}); 
})(jQuery); 
//插件調用 
$(function(){ 
$('#demo').iSelectTags(); 
/* 
* 還可以傳入參數調用 
$('#test').iSelectTags({ 
name:'#test', 
drop:$('.drop'), 
... 
}); 
*/ 
}); 
</script> 
</body> 
</html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]
代碼如下:
;(function(){
$.fn.extend({
iSelectTags:function(options){
var iset={
name:'.tagsbox',//表單或class或id名
drop:$('#dropbox'),//彈出框定位
pseudoClass:$('#dropbox>p>a'),//可選擇的標簽定位
close:$('em.close'),//關閉按鈕定位
separator:',',//標簽間分隔符,建議使用英文逗號
maxCount:10 //默認限制個數,也可以設置表單的data-count值覆蓋默認值
}
options = options || {};
$.extend(iset, options);

var _input=$(iset.name);
var _inputVal=_input.val();
var _arr=new Array(); //存放標簽的數組
var _left=_input.offset().left; //左絕對距離
var _top=_input.offset().top+_input.outerHeight(); //上絕對距離,此處要加上表單的高度
var _dropW=_input.outerWidth()-parseInt(_input.css('border-left-width'))-parseInt(_input.css('border-right-width'))-parseInt(iset.drop.css('paddingLeft'))-parseInt(iset.drop.css('paddingRight'));
iset.drop.css({'position':'absolute','left':_left+'px','top':_top+'px','width':_dropW+'px'});
//彈出框的寬度,此處計算的是與表單實際寬度相等的.也可以直接在樣式中定義.
var _txt=null;
var _maxCount=parseInt(_input.attr('data-count'));//限制選擇個數
if(isNaN(_maxCount)){
_maxCount=iset.maxCount
}

_input.click(function(){
iset.drop.show();
iset.drop.bgiframe();//調用bgiframe插件,解決ie6下select的z-index無限大問題
}).bind('keyup change',function(){
//可以在此處擴展手動輸入標簽情況下的相關判斷
//if語句可避免清空重新選擇時第一個字符為逗號
if ($(this).val() == '') {
_arr = new Array();
}else {
_arr = $(this).val().split(iset.separator);//當用戶手動刪除或修改標簽值後更新標簽值
}
});

$(document).click(function(e){
//點擊非彈出框區域時關閉彈出框
//下面的 if語句是用來判斷傳入的是class還是id
if(iset.name.charAt(0)=='#'){
if(e.target.id!=iset.name.substring(1)){
iset.drop.hide();
}
}else if(iset.name.charAt(0)=='.'){
if(e.target.className!=iset.name.substring(1)){
iset.drop.hide();
}
}
});

iset.drop.click(function(e){
//阻止彈出框區域默認事件
e.stopPropagation();
});

iset.pseudoClass.click(function(){
//標簽選擇
_txt=$(this).text();
//下面的$.inArray是用來判斷是否重復
//若想反饋重復提示或走出限制個數提示,可改進下面的if語句
if(($.inArray(_txt,_arr)==-1) && (_arr.length<_maxCount )){
_arr.push(_txt);
_inputVal=_arr.join(iset.separator);
_input.val(_inputVal);
}

});
//關閉按鈕
iset.close.click(function(){
iset.drop.hide();
});
}
});
})(jQuery);

原文發布於Mr.Think的博客:http://mrthink.net/jquery-plugin-iselecttags/

上一頁:Jquery常用技巧收集整理篇
下一頁:jQueryUI如何自定義組件實現代碼

JQuery特效代碼

基於Jquery插件開發之圖片放大鏡效果(仿淘寶): 需求：公司某個網站，需要實現圖片預覽效果，並能像淘寶一樣實現局部分大！　　思索：為了考慮開發速度，
jQuery ul標簽下拉菜單演示代碼: 這是菜單的內容，用ul標簽實現菜單：代碼如下: <div id=menu> <
jQuery中ajax和post處理json的不同示例對比: 近日在做門戶的用戶評論時，好長時間沒有用jquery了正好用一下，沒想到偷工用了post方法去處理a

jQuery基礎知識 JQuery入門技巧 JQuery特效代碼 JQuery常見問題

DIV CSS 佈局教程網

相關文章