jquery实现标签输入功能

.clearfix:after
{...}{
    clear: both;
    content: " ";
    display: block;
    height: 0;
}
.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: 0;
    height: 24px;
    line-height: 24px;
    overflow: hidden;
    padding: 5px;
    width: 215px;
}
#tagInput:focus{...}{ outline:none }
.layer-tags-wrapper
{...}{
    border: 1px solid #DADADA;
    border-top:0;
    overflow: auto;
    position:absolute;
    left:0;
    right:0;
    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; /**//*注意这里必须是li高度的一半*/
    margin-left: -150px; /**//*这里是li宽度的一半*/
    position: fixed !important; /**//*FF IE7*/
    position: absolute; /**//*IE6*/
    z-index: 999;
    text-align: center;
    border-radius: 5px;
}

		

(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 = "<li class=\"tags-wrapper clearfix\">";
        strHtml += "<li id=\"addTagWrap\" ><li class=\"added-tags-wrapper\"></li>";
        strHtml += "<input id=\"tagInput\" type=\"text\" placeholder=\"添加标签，以逗号、分号或空格隔开\" autocomplete=\"off\">";
        strHtml += "</li><li class=\"layer-tags-wrapper\">";
        if (opts.usedTags != "") ...{
            strHtml += "<li class=\"clearfix layer-tags-box\"><li class=\"layer-tags-left\">记忆标签</li><li 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 += "</li></li>";
        }
        if (opts.hotTags != "") ...{
            strHtml += "<li class=\"clearfix layer-tags-box\"><li class=\"layer-tags-left\">热门标签</li><li class=\"layer-tags-right\">";
            arrayTags = opts.hotTags.split('|');

 

  
标签：jquery   
 
 



              
上一篇：查看IO量大的SQL语句及它们的执行计划
                	  
			  
下一篇：sql server修改表的字段类型后,不能保存

  
 


  

      您可能感兴趣
				

					

  
jquerycss3轮播案例（CSS3实现列表无限滚动/轮播效果）
  
jquery 淡入淡出
  
jQuery给动态添加的元素绑定事件
  
jquery中find()与filter()的区别
  
jquery中animate
  
jquery unbind
  
html导航条下拉菜单代码（Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码）
  
jqueryajax实现部分刷新（php+jQuery ajax实现的实时刷新显示数据功能示例）
  
jquery中filter
  
jquery中serialize方法对空格的处理
  
jquery实现微信中长按识别二维码
  
jQuery实现tab切换
  
jquery滚动加载数据
  
jquery实现聚光灯效果
  
Jquery对数组的操作
  
jquery中return this.each的作用
散文 八月再见，九月，我在风中等你（散文八月再见九月）
8月再见 9月你好（8月再见）
魔兽世界 设计师爆料，原始版本并无PVP，跨阵营属于返璞归真（魔兽世界设计师爆料）
吐槽完《弧光大作战》之后，我们和设计师聊了聊魔兽首款手游的立项初衷和未来（吐槽完弧光大作战之后）
魔兽争霸3自定义战役少年杰雷 2（魔兽争霸3自定义战役少年杰雷）
今日菜价 芥兰涨幅最高 1.33 ，花菜降幅最高 3.10（今日菜价芥兰涨幅最高）