手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜Qcloud , 注册 | 登陆

转:选择标签至文本域效果,可多选/可过滤重复/可限制个数(已封装)

首页 > Javascript >

 说实话,我还是挺喜欢这个标签选择器的,但是评论里说了,除了chrome外,其他浏览器几乎都不支持。因此,我就很纠结了。。

不多说,先看例子点此查看DEMO,怎么样,是不是很有意思?
代码也不多,不过我不懂CSS,所以。。。不知道怎么改,明天找个人纠结纠结:
JavaScript代码
  1. ;(function(){  
  2.     $.fn.extend({  
  3.         iSelectTags:function(options){  
  4.             var iset={  
  5.                 name:'.tagsbox',//表单或class或id名  
  6.                 drop:$('#dropbox'),//弹出框定位  
  7.                 pseudoClass:$('#dropbox>p>a'),//可选择的标签定位  
  8.                 close:$('em.close'),//关闭按钮定位  
  9.                 separator:',',//标签间分隔符,建议使用英文逗号  
  10.                 maxCount:10 //默认限制个数,也可以设置表单的data-count值覆盖默认值  
  11.             }  
  12.             options=$.extend(iset, options || {});  
  13.             var _input=$(iset.name);  
  14.             var _inputVal=_input.val();  
  15.             var _arr=new Array(); //存放标签的数组  
  16.             var _left=_input.offset().left; //左绝对距离  
  17.             var _top=_input.offset().top+_input.outerHeight(); //上绝对距离,此处要加上表单的高度  
  18.             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'));  
  19.             iset.drop.css({'position':'absolute','left':_left+'px','top':_top+'px','width':_dropW+'px'});  
  20.             //弹出框的宽度,此处计算的是与表单实际宽度相等的.也可以直接在样式中定义.  
  21.             var _txt=null;  
  22.             var _maxCount=parseInt(_input.attr('data-count'));//限制选择个数  
  23.             if(isNaN(_maxCount)){  
  24.                 _maxCount=iset.maxCount  
  25.             }  
  26.   
  27.             _input.click(function(){  
  28.                 iset.drop.show();  
  29.                 iset.drop.bgiframe();//调用bgiframe插件,解决ie6下select的z-index无限大问题  
  30.             }).bind('keyup change',function(){  
  31.                 //可以在此处扩展手动输入标签情况下的相关判断  
  32.                 //if语句可避免清空重新选择时第一个字符为逗号  
  33.                 if ($(this).val() == '') {  
  34.                     _arr = new Array();  
  35.                 }else {  
  36.                     _arr = $(this).val().split(iset.separator);//当用户手动删除或修改标签值后更新标签值  
  37.                 }  
  38.             });  
  39.   
  40.             $(document).click(function(e){  
  41.                 //点击非弹出框区域时关闭弹出框  
  42.                 //下面的 if语句是用来判断传入的是class还是id  
  43.                 if(iset.name.charAt(0)=='#'){  
  44.                     if(e.target.id!=iset.name.substring(1)){  
  45.                         iset.drop.hide();  
  46.                         }  
  47.                 }else if(iset.name.charAt(0)=='.'){  
  48.                     if(e.target.className!=iset.name.substring(1)){  
  49.                         iset.drop.hide();  
  50.                         }  
  51.                 }  
  52.             });  
  53.   
  54.             iset.drop.click(function(e){  
  55.                 //阻止弹出框区域默认事件  
  56.                 e.stopPropagation();  
  57.             });  
  58.   
  59.             iset.pseudoClass.click(function(){  
  60.                 //标签选择  
  61.                 _txt=$(this).text();  
  62.                 //下面的$.inArray是用来判断是否重复  
  63.                 //若想反馈重复提示或走出限制个数提示,可改进下面的if语句  
  64.                 if(($.inArray(_txt,_arr)==-1) && (_arr.length<_maxCount )){  
  65.                     _arr.push(_txt);  
  66.                     _inputVal=_arr.join(iset.separator);  
  67.                     _input.val(_inputVal);  
  68.                 }  
  69.   
  70.             });  
  71.             //关闭按钮  
  72.             iset.close.click(function(){  
  73.                 iset.drop.hide();  
  74.             });  
  75.         }  
  76.     });  
  77. })(jQuery);  
反正先转一下喽,先备着,再找其他新的。
这个插件的网址是:http://mrthink.net/jquery-plugin-iselecttags/,可以欣赏一下



本站采用创作共享版权协议, 要求署名、非商业和保持一致. 本站欢迎任何非商业应用的转载, 但须注明出自"膘叔", 保留原始链接, 此外还必须标注原文标题和链接.

Tags: 标签

« 上一篇 | 下一篇 »

只显示10条记录相关文章

1条记录访客评论

除了chrome外,其他浏览器几乎都不支持。。。

Post by wang on 2013, June 9, 1:38 PM 引用此文发表评论 #1


发表评论

评论内容 (必填):