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

【问题标题】：jquery Tag-it plugin's input field stylingjquery Tag-it 插件的输入字段样式
【发布时间】：2023-03-05 21:29:01
【问题描述】：

html

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

jquery

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

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

【问题讨论】：

你希望创建一个名为 tagit 的 jQuery 插件，是吗？

标签： css tags tag-cloud tag-it

【解决方案1】：

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

ul.tagit {
    width: 200px;
}

【讨论】：

【解决方案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);
})

【讨论】：

我只想为输入字段（显示标签的外框）设置大小，例如 200 像素。
抱歉，我现在调整了解决方案。现在它也适用于多个实例。
再次抱歉，我之前弄得一团糟，但现在它确实有效并经过测试。
兄弟，你说的不对。我想css输入标签的外框的宽度。 @developer3466402

【解决方案3】：

由于我在多个地方都使用了 tag-it，所以我决定用 Javascript 来做。大小需要足够大，以便在向其添加标签时不会对双线造成影响。基本代码是：

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

当然，您可以决定选择 450 像素以外的其他内容。

但是，我还想将它与其他 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")

【讨论】：