javascript - 带有 png 图像的 Bootstrap 切换按钮附加组件

Question

我想要一组标签和文本输入，在文本字段的右侧有一个可点击的按钮。此按钮需要是一个切换按钮(单击时为灰色，未单击时为白色)，并且其 Logo 上应有一个 png 图像。

我制作了一个简单的代码片段来向您展示我目前拥有的东西:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<br>
<br>
<div class="col-lg-6">
  <div class="input-group" style="float:left;">
    <textarea class="form-control"></textarea>
    <span class="input-group-addon"><a href="#" tabindex="-1" style="width: 100%;"><img class="clIcon btn btn-default" src="http://dummyimage.com/15x15/26bf8f/fff" /></a></span> 
  </div>
</div>
<!-- /.col-lg-6 -->

如您所见，我的按钮实际上有一个白色方 block ，这是我实际使用的切换按钮。我希望我的切换按钮成为文本区域右侧的按钮，而不仅仅是在其中。

现在，只有那个白色的小方 block 是可点击的，而不是整个按钮，这是个问题。我需要整个按钮都可以点击并像一个开关(开/关)。我使用此切换来激活或停用另一个页面中的 url 预览。当其他页面加载时，客户端必须能够通过按钮的颜色(如任何切换)查看预览是否处于事件状态。

你有什么想法吗？谢谢。

---

更新

我想要的外观是基本的 Bootstrap 外观，就像您在 the official documentation examples 中看到的一样，其中 Go! 按钮将是一个链接，Go! 文本将替换为 .png 图像。

如果可能的话，我想使用默认的 Bootstrap 类而不是在它之上构建我自己的 CSS 或替换它，因为我希望与其他形式保持一致，我使用官方 Bootstrap 类来获取相同的外观(以普通按钮为例)。

Answer 1

首先，您没有按正确的顺序引用脚本。

jQuery应该在bootstrap.js之前引用

这里是 <textarea>并链接其中的图像，并且“按钮”在调整大小时可以调整大小<textarea> https://jsfiddle.net/vmferrtx/4/

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
        
    <br><br>
    <div class="col-lg-6">
  <div class="input-group">
    <textarea class="form-control"></textarea>
    <span class="input-group-addon input-group-btn">
        <a href="#" class="link-button-right btn btn-default" type="button">
          <img class="clIcon" src="http://dummyimage.com/15x15/26bf8f/fff" />
        </a>
      </span>
  </div>
  <!-- /input-group -->
</div>
<!-- /.col-lg-6 -->

用一点CSS:

    .link-button-right {
      height: 100%;
      position: relative;
      width: 50px;
    }

    .input-group-addon {
      position: relative;
      padding: 0;
      border: none;
    }

    .clIcon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }