jquery Tag-it 插件的输入字段样式

Question

html

<p> Tags:<input  name="tags" id="tags" /></p>

jquery

$('#tags').tagit( {tagLimit:3});

我想控制输入字段的大小，我该怎么做？

Answer 1

如果您查看由标记it插件生成的动态HTML，ul.tagit是分配给生成的ul的类。因此，要在CSS集中设置宽度为200px：

ul.tagit {
    width: 200px;
}

Answer 2

(function( $ ) {
  $.fn.extend({
    tagit: function (params) {
       return this.each(function () {
          console.log(params);
          console.log(params['tagLimit'] );          
          $(this).attr('maxLength', params.tagLimit );
          $(this).parent().css('maxwidth', params.tagLimit );
          $(this).parent().css('width', params.tagLimit );
       });

   }
 } )
}( jQuery ));

但你也可以直接通过jQuery来完成，如下所示：

 var _width = 3;
 $("p input").each( function() {
    $(this).css('width', _width);
    $(this).css('maxWidth', _width);
})

Answer 3

由于我已经在多个地方使用了标记，所以我决定用Javascript来做。大小需要足够大，当你添加标签时不会对双线造成影响。基本代码是：

    // adjust tag it size
    $("ul.tagit").attr("style", "width:450px;")

当然，你可以选择450px以外的东西。

然而，我还想将它与其他jquery ui按钮对齐，我用ul而不是li来设计这些按钮，这样它们就可以非常适合搜索框了。需要调整底部边距，使其与按钮更精确地对齐。这是它的代码。

    // adjust tag it size and line it up with buttons
    $("ul.tagit").attr("style", "width:450px; display:inline-block; margin-bottom:-10px")