Question

我的目标是将按钮文本更改为微调器或div，但每当值更改时，按钮的大小也会更改。如何修复按钮？

$(function() {

  var opts = {
    lines: 9 // The number of lines to draw
      ,
    length: 2 // The length of each line
      ,
    width: 2 // The line thickness
      ,
    radius: 10 // The radius of the inner circle
      ,
    scale: 1 // Scales overall size of the spinner
      ,
    corners: 1 // Corner roundness (0..1)
      ,
    color: '#FFFFFF' // #rgb or #rrggbb or array of colors
      ,
    opacity: 0.25 // Opacity of the lines
      ,
    rotate: 0 // The rotation offset
      ,
    direction: 1 // 1: clockwise, -1: counterclockwise
      ,
    speed: 1 // Rounds per second
      ,
    trail: 60 // Afterglow percentage
      ,
    fps: 20 // Frames per second when using setTimeout() as a fallback for CSS
      ,
    zIndex: 2e9 // The z-index (defaults to 2000000000)
      ,
    className: 'spinner' // The CSS class to assign to the spinner
      ,
    top: '50%' // Top position relative to parent
      ,
    left: '50%' // Left position relative to parent
      ,
    shadow: false // Whether to render a shadow
      ,
    hwaccel: false // Whether to use hardware acceleration
      ,
    position: 'absolute' // Element positioning
  }

  $("#apply").on("click", function() {
    $("#apply").html(new Spinner(opts).spin().el);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group">
  <input type="text" class="form-control" placeholder="Enter something">
  <span class="input-group-btn">
    <button class="btn btn-success" id="apply" type="button">Apply</button>
  </span>
</div>

小提琴链接：https://jsfiddle.net/dq9b2xcw/1/

Answer 1

我会将文本包装在一个元素中，然后使用opacity直观地隐藏它，然后使用$.append()微调代码（而不是使用$.html()）隐藏它，或者如果你＆＃39;继续来回切换按钮的状态，使其从文本转到微调器，然后为微调器添加元素，并将微调器添加到该元素。

以下是一个例子。

＆＃13;

$(function() {

  var opts = {
    lines: 9 // The number of lines to draw
      ,
    length: 2 // The length of each line
      ,
    width: 2 // The line thickness
      ,
    radius: 10 // The radius of the inner circle
      ,
    scale: 1 // Scales overall size of the spinner
      ,
    corners: 1 // Corner roundness (0..1)
      ,
    color: '#FFFFFF' // #rgb or #rrggbb or array of colors
      ,
    opacity: 0.25 // Opacity of the lines
      ,
    rotate: 0 // The rotation offset
      ,
    direction: 1 // 1: clockwise, -1: counterclockwise
      ,
    speed: 1 // Rounds per second
      ,
    trail: 60 // Afterglow percentage
      ,
    fps: 20 // Frames per second when using setTimeout() as a fallback for CSS
      ,
    zIndex: 2e9 // The z-index (defaults to 2000000000)
      ,
    className: 'spinner' // The CSS class to assign to the spinner
      ,
    top: '50%' // Top position relative to parent
      ,
    left: '50%' // Left position relative to parent
      ,
    shadow: false // Whether to render a shadow
      ,
    hwaccel: false // Whether to use hardware acceleration
      ,
    position: 'absolute' // Element positioning
  }

  $("#apply").on("click", function() {
    $("#apply").find('.text').addClass('invisible').end().find('.spinner').append(new Spinner(opts).spin().el);
  });
});

＆＃13;

.invisible {
  opacity: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group">
  <input type="text" class="form-control" placeholder="Enter something">
  <span class="input-group-btn">
              <button class="btn btn-success" id="apply" type="button"><span class="text">Apply</span><span class="spinner"></span></button>
  </span>
</div>

＆＃13;

Answer 2

按钮正在折叠，因为按钮在被微调器替换后没有文本内容。尝试在按钮中添加一个不可见的字符，看看在这种情况下是否可以解决这个问题：

$("#apply").html(new Spinner(opts).spin().el).append('&nbsp;');

这样可以保持单行文本的高度如果你想保持宽度，只需在交换HTML之前将其保存下来。

var buttonWidth = $('#apply').css('width');
// ... swap html
$("#apply").css('width', buttonWidth);

如果你想保持一致，也可以适用于身高。

如果值更改，如何使引导按钮大小（宽度*高度）保持不变？

2 个答案: