【原创】jQuery 仿百度输入标签插件

2023-08-23 12:08:28

1、先上效果图

2、调用方式

     <link href="/Styles/tagsinput.css" rel="stylesheet" type="text/css" />

     <script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

     <script src="/Scripts/jquery.tagsinput.js" type="text/javascript"></script>

     <script type="text/javascript">

         $(function () {

             $("#txtTags").TagsInput({

                 usedTags: "css|js|jquery|html|C#|.net|web",

                 hotTags: "hotTag1|hotTag2|hotTag3|hotTag4",

                 tagNum: 10,

                 maxWords: 10

             });

         });

     </script>

html页面调用

3、tagsinput.css样式

 .clearfix:after

 {

     clear: both;

     content: " ";

     display: block;

     height:;

 }

 .tags-wrapper

 {

     width: 500px;

     position:relative;

 }

 #addTagWrap

 {

     background: none repeat scroll 0 0 #FFFFFF;

     border: 1px solid #D9D9D9;

     padding: 0 5px;

 }

 #addTagWrap .inner-tag-wrapper,.layer-tag-name

 {

     background: none repeat scroll 0 0 #40A8CD;

     border-radius: 3px;

     color: #FFFFFF;

     float: left;

     height: 26px;

     line-height: 26px;

     margin: 4px 6px 0 0;

     padding: 0 5px 0 10px;

     white-space: nowrap;

 }

 #addTagWrap .inner-tag-close

 {

     color: #A0D4E6;

     font-family: "宋体" ,sans-serif;

     margin-left: 4px;

     text-decoration: none;

 }

 #tagInput

 {

     background: none repeat scroll 0 0 #FFFFFF;

     border: medium none;

     margin:;

     height: 24px;

     line-height: 24px;

     overflow: hidden;

     padding: 5px;

     width: 215px;

 }

 #tagInput:focus{ outline:none }

 .layer-tags-wrapper

 {

     border: 1px solid #DADADA;

     border-top:;

     overflow: auto;

     position:absolute;

     left:;

     right:;

     display:none;

     background: none repeat scroll 0 0 #FFFFFF;

 }

 .layer-tags-wrapper .layer-tags-box

 {

     padding: 0 5px;

 }

 .layer-tags-wrapper .layer-tags-left

 {

     float: left;

     text-align: center;

     padding-right: 5px;

     margin-top: 4px;

     height: 26px;

     line-height: 26px;

 }

 .layer-tags-wrapper .layer-tags-right

 {

     overflow: auto;

 }

 .layer-tags-wrapper .layer-tag-name

 {

     padding-right: 10px;

     text-decoration: none;

 }

 .layer-tags-foot

 {

     height: 30px;

     line-height: 30px;

     color: #999999;

     padding-left:5px;

 }

 .layer-tags-foot-top

 {

     margin-top:5px;

     border-top:1px dotted #C9C9C9;

 }

 .message-box

 {

     background: none repeat scroll 0 0 rgba(0, 0, 0, 0.35);

     color: #FFFFFF;

     width: 300px;

     min-height: 50px;

     line-height: 50px;

     top: 50%;

     left: 50%;

     margin-top: -50px; /*注意这里必须是DIV高度的一半*/

     margin-left: -150px; /*这里是DIV宽度的一半*/

     position: fixed !important; /*FF IE7*/

     position: absolute; /*IE6*/

     z-index:;

     text-align: center;

     border-radius: 5px;

 }

css

4、jquery.tagsinput.js

 /*仿百度标签输入v0.1

 * @name jquery.tagsinput.js

 * @version 0.1

 * @author liping

 * @date 2014/06/10

 * @Email:272323108@qq.com

 */

 (function ($) {

     $.fn.TagsInput = function (options) {

         //默认参数

         var defaults = {

             usedTags: "",

             hotTags: "",

             tagNum: 0,

             maxWords: 0

         };

         //用传入参数覆盖了默认值

         var opts = $.extend(defaults, options);

         //对象

         var $this = $(this);

         $this.hide();

         var arrayTags;

         var strHtml;

         strHtml = "<div class=\"tags-wrapper clearfix\">";

         strHtml += "<div id=\"addTagWrap\" ><div class=\"added-tags-wrapper\"></div>";

         strHtml += "<input id=\"tagInput\" type=\"text\" placeholder=\"添加标签，以逗号、分号或空格隔开\" autocomplete=\"off\">";

         strHtml += "</div><div class=\"layer-tags-wrapper\">";

         if (opts.usedTags != "") {

             strHtml += "<div class=\"clearfix layer-tags-box\"><div class=\"layer-tags-left\">记忆标签</div><div class=\"layer-tags-right\">";

             arrayTags = opts.usedTags.split('|');

             for (i = 0; i < arrayTags.length; i++) {

                 strHtml += "<a class=\"layer-tag-name\" href=\"javascript:;\">" + arrayTags[i] + "</a>";

             }

             strHtml += "</div></div>";

         }

         if (opts.hotTags != "") {

             strHtml += "<div class=\"clearfix layer-tags-box\"><div class=\"layer-tags-left\">热门标签</div><div class=\"layer-tags-right\">";

             arrayTags = opts.hotTags.split('|');

             for (i = 0; i < arrayTags.length; i++) {

                 strHtml += "<a class=\"layer-tag-name\" href=\"javascript:;\">" + arrayTags[i] + "</a>";

             }

             strHtml += "</div></div>";

         }

         if (opts.tagNum != 0 && opts.maxWords != 0) {

             strHtml += "<div class=\"layer-tags-foot clearfix \">最多可添加" + opts.tagNum + "个标签，每个标签不超过" + opts.maxWords + "个汉字</div>";

         }

         else if (opts.tagNum != 0 && opts.maxWords == 0) {

             strHtml += "<div class=\"layer-tags-foot clearfix \">最多可添加" + opts.tagNum + "个标签</div>";

         }

         else if (opts.tagNum == 0 && opts.maxWords != 0) {

             strHtml += "<div class=\"layer-tags-foot clearfix \">每个标签不超过" + opts.maxWords + "个汉字</div>";

         }

         else {

             strHtml += "<div class=\"layer-tags-foot clearfix \">标签个数最好少于10个，每个标签最好不超过10个汉字</div>";

         }

         strHtml += "</div></div>";

         $(strHtml).insertAfter($this);

         if ($(".layer-tag-name").length > 0) {

             $(".layer-tags-foot").addClass("layer-tags-foot-top");

         }

         var inputTags = $this.val();

         arrayTags = inputTags.split('|');

         for (i = 0; i < arrayTags.length; i++) {

             addTag(arrayTags[i]);

         }

         $(".layer-tag-name").each(function () {

             $(this).click(function () { addTag($(this).text()); });

         });

         $("#tagInput").keydown(function (e) {

             var keyCode = e.which || e.keyCode;

             if (keyCode == 13 || keyCode == 32 || keyCode == 9) {

                 if (addTag($(this).val())) { $(this).val(""); }

                 return false;

             }

         }).keyup(function (e) {

             var keyCode = e.which || e.keyCode;

             if (keyCode == 188 || keyCode == 59) {

                 if (addTag($(this).val())) { $(this).val(""); }

                 return false;

             }

         }).click(function () {

             $(".layer-tags-wrapper").show();

         }).blur(function () {

             if (addTag($(this).val())) { $(this).val(""); }

             return false;

         });

         $(".tags-wrapper").mouseleave(function () {

             $(".layer-tags-wrapper").hide();

         });

         function addTag(obj) {

             obj = obj.replace(/[ |,|，|;|；]/g, "");

             if (obj == "") { return false; }

             //只统计汉字字数

             var num = 0;

             var arr = obj.match(/[^\x00-\xff]/g);

             if (arr != null) {

                 num = arr.length;

                 if (opts.maxWords > 0 && num > opts.maxWords) {

                     MessageBox("单个标签最多" + opts.maxWords + "个汉字");

                     return false;

                 }

                 num = 0;

             }

             var tags = $("#addTagWrap .inner-tag-name");

             var flag = true;

             var s = "";

             tags.each(function () {

                 if ($(this).text() == obj) {

                     flag = false;

                     return false;

                 }

                 num++;

                 s += $(this).text() + "|";

             });

             if (opts.tagNum > 0 && num >= opts.tagNum) {

                 MessageBox("最多可添加" + opts.tagNum + "个标签");

                 return false;

             }

             if (flag) {

                 $(".added-tags-wrapper").append("<div class=\"inner-tag-wrapper\"><span class=\"inner-tag-name\">" + obj + "</span><a class=\"inner-tag-close\" title=\"删除\" href=\"javascript:;\">×</a></div>");

                 $(".added-tags-wrapper .inner-tag-close:last").click(function () {

                     $(this).parent().remove();

                 });

                 s += obj + "|";

                 if (s.length > 0) {

                     s = s.substring(0, s.length - 1);

                     $this.val(s);

                 }

                 return true;

             }

             else {

                 MessageBox("该标签已经存在");

                 return false;

             }

         }

         function MessageBox(obj) {

             $("<div class=\"message-box\">" + obj + "</div>").appendTo("body");

             $(".message-box").delay(1000).fadeOut("slow", function () {

                 $(this).remove();

             });

         }

     };

 })(jQuery);

jquery.tagsinput.js

码农公寓

相关文章