基于jquery的選擇標(biāo)簽至文本域效果,可多選/可過濾重復(fù)/可限制個(gè)數(shù)的實(shí)現(xiàn)代碼
相關(guān)說明及調(diào)用方法,請參見代碼中的注釋.
演示及代碼:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
;(function(){
$.fn.extend({
iSelectTags:function(options){
var iset={
name:'.tagsbox',//表單或class或id名
drop:$('#dropbox'),//彈出框定位
pseudoClass:$('#dropbox>p>a'),//可選擇的標(biāo)簽定位
close:$('em.close'),//關(guān)閉按鈕定位
separator:',',//標(biāo)簽間分隔符,建議使用英文逗號(hào)
maxCount:10 //默認(rèn)限制個(gè)數(shù),也可以設(shè)置表單的data-count值覆蓋默認(rèn)值
}
options = options || {};
$.extend(iset, options);
var _input=$(iset.name);
var _inputVal=_input.val();
var _arr=new Array(); //存放標(biāo)簽的數(shù)組
var _left=_input.offset().left; //左絕對(duì)距離
var _top=_input.offset().top+_input.outerHeight(); //上絕對(duì)距離,此處要加上表單的高度
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'});
//彈出框的寬度,此處計(jì)算的是與表單實(shí)際寬度相等的.也可以直接在樣式中定義.
var _txt=null;
var _maxCount=parseInt(_input.attr('data-count'));//限制選擇個(gè)數(shù)
if(isNaN(_maxCount)){
_maxCount=iset.maxCount
}
_input.click(function(){
iset.drop.show();
iset.drop.bgiframe();//調(diào)用bgiframe插件,解決ie6下select的z-index無限大問題
}).bind('keyup change',function(){
//可以在此處擴(kuò)展手動(dòng)輸入標(biāo)簽情況下的相關(guān)判斷
//if語句可避免清空重新選擇時(shí)第一個(gè)字符為逗號(hào)
if ($(this).val() == '') {
_arr = new Array();
}else {
_arr = $(this).val().split(iset.separator);//當(dāng)用戶手動(dòng)刪除或修改標(biāo)簽值后更新標(biāo)簽值
}
});
$(document).click(function(e){
//點(diǎn)擊非彈出框區(qū)域時(shí)關(guān)閉彈出框
//下面的 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){
//阻止彈出框區(qū)域默認(rèn)事件
e.stopPropagation();
});
iset.pseudoClass.click(function(){
//標(biāo)簽選擇
_txt=$(this).text();
//下面的$.inArray是用來判斷是否重復(fù)
//若想反饋重復(fù)提示或走出限制個(gè)數(shù)提示,可改進(jìn)下面的if語句
if(($.inArray(_txt,_arr)==-1) && (_arr.length<_maxCount )){
_arr.push(_txt);
_inputVal=_arr.join(iset.separator);
_input.val(_inputVal);
}
});
//關(guān)閉按鈕
iset.close.click(function(){
iset.drop.hide();
});
}
});
})(jQuery);
原文發(fā)布于Mr.Think的博客:http://mrthink.net/jquery-plugin-iselecttags/
相關(guān)文章
jquery lazyload延遲加載技術(shù)的實(shí)現(xiàn)原理分析
懶加載技術(shù)(簡稱lazyload)并不是新技術(shù),它是js程序員對(duì)網(wǎng)頁性能優(yōu)化的一種方案。lazyload的核心是按需加載。在大型網(wǎng)站中都有l(wèi)azyload的身影,例如谷歌的圖片搜索頁,迅雷首頁,淘寶網(wǎng),QQ空間等。2011-01-01jQuery動(dòng)態(tài)生成不規(guī)則表格(前后端)
這篇文章主要介紹了jQuery動(dòng)態(tài)生成不規(guī)則表格的實(shí)現(xiàn)代碼,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下2017-02-02jquery按回車鍵實(shí)現(xiàn)表單提交的簡單實(shí)例
下面小編就為大家?guī)硪黄猨query按回車鍵實(shí)現(xiàn)表單提交的簡單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05jQuery動(dòng)態(tài)創(chuàng)建元素以及追加節(jié)點(diǎn)的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨Query動(dòng)態(tài)創(chuàng)建元素以及追加節(jié)點(diǎn)的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10jQuery實(shí)現(xiàn)的指紋掃描效果實(shí)例(附演示與demo源碼下載)
這篇文章主要介紹了jQuery實(shí)現(xiàn)的指紋掃描效果,以完整實(shí)例形式分析了jQuery實(shí)現(xiàn)圖像按照指定模式顯示的相關(guān)實(shí)現(xiàn)技巧,并附帶附示例演示與demo源碼供讀者下載參考,需要的朋友可以參考下2016-01-01jQuery插件zTree實(shí)現(xiàn)的多選樹效果示例
這篇文章主要介紹了jQuery插件zTree實(shí)現(xiàn)的多選樹效果,結(jié)合實(shí)例形式分析了jQuery樹形插件zTree實(shí)現(xiàn)多選樹效果的具體操作步驟與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-03-03jQuery插件zepto.js簡單實(shí)現(xiàn)tab切換
這篇文章主要介紹了jQuery插件zepto.js簡單實(shí)現(xiàn)tab切換的代碼,十分的簡潔,有需要的小伙伴可以參考下2015-06-06推薦6款基于jQuery實(shí)現(xiàn)圖片效果插件
這里給大家匯總了一下個(gè)人比較常用的基于jQuery實(shí)現(xiàn)的圖片特效的插件,個(gè)人感覺非常不錯(cuò),這里分享給大家2014-12-12jQuery查找和過濾_動(dòng)力節(jié)點(diǎn)節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要為大家詳細(xì)介紹了jQuery查找和過濾的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07