jQuery Tag-it插件的输入框样式设计

Question

html

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

jquery

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

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

- user3365987

---

你想创建一个名为tagit的jQuery插件，是吗？ - Zini

Answer 1

如果您查看由tag-it插件生成的动态HTML，ul.tagit是分配给所生成的UL的类。因此，在CSS中将宽度设置为200px，设置如下：

ul.tagit {
    width: 200px;
}

- Mike

Answer 2

由于我在多个位置使用了tag-it，所以我决定用Javascript实现它。大小需要足够大，这样当您添加标签时它就不会成为双行。基本代码如下：

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

当然，你可以选择其他宽度而不是450像素。

但是，我也想将其与其他使用ul样式的jquery-ui按钮对齐，而不是li，这样它们就可以与搜索框相对紧密地配合。需要调整底部边距以使其更精确地与按钮对齐。以下是该代码：

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

- lsu_guy

Answer 3

(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);
})

- Zini

---

我只想给输入字段（显示标签的外框）设置大小，例如200像素。 - user3365987

抱歉，我现在已经调整了解决方案。现在它也可以用于多个实例。 - Zini

抱歉，之前有点乱，但现在已经修复并测试成功了。 - Zini

兄弟，你没有理解我的意思。我想要对包含标签的外部框进行CSS宽度设置。@developer3466402 - user3365987