FuelUX Pillbox - 更改添加药丸的默认值 class

FuelUX Pillbox - change default class for added pill

我正在使用 FuelUX 的 Pillbox 来标记记录。每个药丸都被描述为 li 实体:

<li class="btn btn-default pill" data-value="two-value">
  <span>Item 2</span>
  <span class="glyphicon glyphicon-close">
  <span class="sr-only">Remove</span>
  </span>
</li>

默认情况下,标签创建为默认大小的 bootstrap 按钮 (.btn-default class),此代码在第 42 行的 pillbox.js 文件中硬编码:

this.$pillHTML = '<li class="btn btn-default pill">'...

如何将按钮 class 更改为 .btn-xs 或将我自己的 class 应用于新添加的药丸?


已解决:刚刚添加到事件 added.fu.pillbox 代码中,建议在下面和所有新添加的药丸(不仅是现有的)立即应用 class

$('#myPillbox1').on('added.fu.pillbox', function pillboxAddedNew(evt, item) {
$('.btn.btn-default.pill').addClass('btn-xs'); });

#myPillbox1 是药丸容器

<div id="myPillbox1" data-initialize="pillbox" class="pillbox pills-editable">
<ul class="clearfix pill-group">
<li class="btn btn-default btn-xs pill" data-value="two-value">
    <span>Item 2</span>
    <span class="glyphicon glyphicon-close">
        <span class="sr-only">Remove</span>
    </span>
</li>
...
</ul>
</div>

您需要使用 jquery 来实现此目的,

$(document).ready(
    function(){  
           $('.btn.btn-default.pill').addClass('btn-xs');
    });

这会将您的 class 添加到那个 li。

这将 100% 有效