JqueryTag编辑,选择标签

ADMIN php , jquery , tagit 2017-02-25 15:59:18 1005 次浏览 9条评论

分享一个自己利用Jquery做的选择,编辑标签,可以用在很多地方。比如可以用在浮动多选,单选等需求的地方。示例演示地址在下方。

HTML:

1

  第一种:     HTML Javascript CSS3 PHPASP.NET   第二种:          HTMLJavascript

CSS:

.EditorShow {     width: 500px;     height: 30px;     border: 1px solid #ccc;     margin: 0 auto;     font: 13px "微软雅黑", Arial, Helvetica, sans-serif;     outline: none;     background-color: #efefef; } #EditorSelect {     width: 500px;     height: 30px;     border: 1px solid #ccc;     margin-top: 20px; } .SelectItem,.SelectItemTwo {     float: left;     padding: 0px 20px 0px 10px;     border: 1px solid #f2f2f2;     font: 12px "微软雅黑", Arial, Helvetica, sans-serif;     margin-top: 5px;     margin-left: 10px;     background-color: #e1f3da;     color: #45872c;     cursor: pointer; } .SelectItemTwo{     padding: 0px 10px 0px 10px; } .SelectItem>span {     color: #fff;     float: right;     margin-right: -15px;     width: 7px;     height: 7px;     background-image: url(removeBtn.png);     margin-top: 5px;     cursor: pointer; } .SelectItem>span:hover {     background-position: 0px -14px; }   .EditorSHowTwo{     background-color:#fff; }

var TagEditor={     Init:function(){         $(".SelectItem").click(function(){             var value=$(this).text();             var text=$(this).parent().prev().val();                           if(text.indexOf(value)>=0)return;                           if($(this).parent().prev().val()=="")             $(this).parent().prev().val(value);             else             {                 var hasValue=$(this).parent().prev().val();                 $(this).parent().prev().val(hasValue "," value);             }         });         $(".SelectItem>span").click(function(event){             event.stopPropagation();             var value=$(this).parent().text();             var parentValue=$(this).parent().parent().prev().val();             var newValue="";             if(parentValue.indexOf(value)>1){              newValue=parentValue.replace("," value,'');             }             else{                 if(parentValue.indexOf(value)==0){                     if(parentValue.indexOf(",")>=0)                      newValue=parentValue.replace(value ",",'');                      else                      newValue=parentValue.replace(value,'');                 }else{              newValue=parentValue.replace(value,'');                 }             }                           $(this).parent().parent().prev().val(newValue)         });         $(".EditorSHowTwo").focusout(function(){             $(".EditorSelectTwo").children().remove();             var value=$(this).val();             var valueArray=value.split(',');             for(var i=0;i<valueArray.length;i  ){                 var item=$("" valueArray[i] "");                 $(".EditorSelectTwo").append(item);             }         });     } }

评论列表 (9)

发表评论

本网站仅限技术讨论,请不要发表不当言论,本站将会对所有留言审核后方可显示。如需给站长留言,请在下方评论区@admin,谢谢合作!