Question

HTML

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

jquery的

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

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

Answer 1

如果查看tag-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")

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

3 个答案: