Question

我正在将 Bootstrap Dual Listbox 插件与 Font Awesome 4.7.0 一起使用。

我想用一个"Move all"和"Remove all"自定义'»'和'«'按钮图标。但是，这些按钮图标对我来说显示不正确。

var dualListContainer = $('[name=duallistbox_demo1]').bootstrapDualListbox({

  // default text
  moveAllLabel: 'Move all',
  removeAllLabel: 'Remove all',
});


$(function() {
  var customSettings = $('select[name="duallistbox_demo1"]').bootstrapDualListbox('getContainer');
  customSettings.find('.moveall i').removeClass().addClass('fa fa-angle-double-right');
  customSettings.find('.removeall i').removeClass().addClass('fa fa-angle-double-left');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap-duallistbox@3.0.6/dist/bootstrap-duallistbox.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap-duallistbox@3.0.6/dist/jquery.bootstrap-duallistbox.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-sm-12">
    <select multiple="multiple" size="10" name="duallistbox_demo1">
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3" selected="selected">Option 3</option>
      <option value="option4">Option 4</option>
      <option value="option5">Option 5</option>
      <option value="option6" selected="selected">Option 6</option>
      <option value="option7">Option 7</option>
      <option value="option8">Option 8</option>
      <option value="option9">Option 9</option>
      <option value="option0">Option 10</option>
    </select>
  </div>
</div>

我在创建bootstrapDualListBox的下面添加了这个jQuery：

$(function() {
  var customSettings = $('select[name="duallistbox_demo1"]').bootstrapDualListbox('getContainer');
  customSettings.find('.moveall i').removeClass().addClass('fa fa-angle-double-right');
  customSettings.find('.removeall i').removeClass().addClass('fa fa-angle-double-left');
});

这可以解决吗？谢谢。

Answer 1

您还可以借助CSS解决此问题：

<style>
    .buttons > .btn i + i{
         display:none;
    }
</style>

Answer 2

如果我对您的理解正确，那么问题在于按钮上添加了两个图标，而您只想显示一个图标。为此，您只需在添加新类之后添加.next().remove()即可删除辅助图标。

这可以在下面看到：

var dualListContainer = $('[name=duallistbox_demo1]').bootstrapDualListbox({

  // default text
  moveAllLabel: 'Move all',
  removeAllLabel: 'Remove all',
});

$(function() {
  var customSettings = $('select[name="duallistbox_demo1"]').bootstrapDualListbox('getContainer');
  customSettings.find('.moveall i').removeClass().addClass('fa fa-angle-double-right').next().remove();
  customSettings.find('.removeall i').removeClass().addClass('fa fa-angle-double-left').next().remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap-duallistbox@3.0.6/dist/bootstrap-duallistbox.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap-duallistbox@3.0.6/dist/jquery.bootstrap-duallistbox.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-sm-12">
    <select multiple="multiple" size="10" name="duallistbox_demo1">
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3" selected="selected">Option 3</option>
      <option value="option4">Option 4</option>
      <option value="option5">Option 5</option>
      <option value="option6" selected="selected">Option 6</option>
      <option value="option7">Option 7</option>
      <option value="option8">Option 8</option>
      <option value="option9">Option 9</option>
      <option value="option0">Option 10</option>
    </select>
  </div>
</div>

自定义设置moveAll / removeAll图标

2 个答案: