说实话，我还是挺喜欢这个标签选择器的，但是评论里说了，除了chrome外，其他浏览器几乎都不支持。因此，我就很纠结了。。
不多说，先看例子点此查看DEMO，怎么样，是不是很有意思？
代码也不多，不过我不懂CSS，所以。。。不知道怎么改，明天找个人纠结纠结：
JavaScript代码
- ;(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=$.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);
反正先转一下喽，先备着，再找其他新的。
这个插件的网址是：http://mrthink.net/jquery-plugin-iselecttags/，可以欣赏一下
#1