1

我正在开发一个同时使用 Twitter Bootstrap 和 jQuery UI 的 Ruby on Rails 应用程序。据我所知，两者之间的大多数（也许是全部？）不兼容问题都已解决（并且我已安装并包含在资产管道中的最新 gem）。这个问题与jQuery UI并没有太大关系，我只是认为这可能是一个很好的知识，以防万一我不知道那里存在兼容性问题......

无论如何 - 我只是试图在用户页面上包含一些垂直堆叠的单选按钮，并且由于某种原因单选按钮的行为就像常规按钮一样。起初，我将此归因于可能的错字data-toggle="buttons-raadio"或类似的愚蠢，但经过检查，我没有发现我的代码和文档中建议的格式有任何区别。最终，我感到沮丧，只是直接从文档中复制粘贴代码（HTML 和 Javascript 以启用按钮）进行石蕊测试，我得到了相同的行为。

所以，如果你没有点击链接，文档给出了一个简单的例子，如下所示：

    <!-- HTML -->
    <div class="btn-group" data-toggle="buttons-radio">
      <button type="button" class="btn btn-primary">Left</button>
      <button type="button" class="btn btn-primary">Middle</button>
      <button type="button" class="btn btn-primary">Right</button>
    </div>

    /Javascript
    <script> 
      $('.nav-tabs').button();
    </script>

那么，有什么关系呢？为什么单击时未将“活动”类添加到单选按钮？我确实发现它说在课堂上使用它很有趣.nav-tabs，而不是.btn（我试图无济于事，它只是弄乱了 btn-primary 的漂亮格式，但仍然没有提供正确的功能），但我猜.nav-tabs过滤到沿线某处的按钮。

另外，所以我决定检查文档上的 html ，果然我得到了完全相同的 HTML 加上相同的 JavaScript 调用......我不知所措。

提前感谢您的任何和所有答案。

-毫米

4

2 回答 2

3

我做了更多的研究，这似乎是 twitter bootstrap 和 jquery-ui 之间的兼容性问题，两者的具体宝石如下：

  • 宝石'bootstrap-sass'，'2.1'
  • gem "jquery-ui-rails", "~> 4.0.0"

所以我实际上并没有使用 bootstrap/jquery-ui 捆绑的 gem，这可能是我的问题的一部分。单击按钮时，我会收到一个 Javascript 错误：

   Uncaught Error: cannot call methods on button prior to initialization; attempted to call method 'toggle' (jquery.js: 552)
   Full trace:
    Uncaught Error: cannot call methods on button prior to initialization; attempted to call method 'toggle' jquery.js:552
    jQuery.extend.error jquery.js:552
    (anonymous function) jquery.ui.widget.js:183
    jQuery.extend.each jquery.js:661
    jQuery.fn.jQuery.each jquery.js:272
    $.fn.(anonymous function) jquery.ui.widget.js:179
    (anonymous function) bootstrap-button.js:93
    jQuery.event.dispatch jquery.js:3333
    elemData.handle.eventHandle jquery.js:2942

如果我用该.button()方法实例化每个按钮，我会收到一个不同的错误：

    Uncaught Error: no such method 'toggle' for button widget instance (jquery.js:552)
    Full error trace:
     Uncaught Error: no such method 'toggle' for button widget instance jquery.js:552
     jQuery.extend.error jquery.js:552
     (anonymous function) jquery.ui.widget.js:187
     jQuery.extend.each jquery.js:661
     jQuery.fn.jQuery.each jquery.js:272
     $.fn.(anonymous function) jquery.ui.widget.js:179
     (anonymous function) bootstrap-button.js:93
     jQuery.event.dispatch jquery.js:3333
     elemData.handle.eventHandle jquery.js:2942

为了解决这个问题，我my-button为每个按钮添加了一个类，并自己进行点击处理（请记住，您必须确保active根据单击的按钮添加和删除类，我正在通过addClass()和removeClass()方法）。

于 2013-02-14T18:26:43.327 回答
1

在您的最后评论之后，我已经更改了我的答案。这是我的一个网站中运行良好的示例。我无需拨打任何电话即可启用单选按钮功能。我已经在我的页面上包含了所有正在加载的引导 js 文件的列表。您的站点中可能没有加载 bootstrap-button.js 文件。

<head>
    <script src="/assets/bootstrap-transition.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-affix.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-alert.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-button.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-carousel.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-collapse.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-dropdown.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-modal.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-scrollspy.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-tab.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-tooltip.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-popover.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-typeahead.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap.js?body=1" type="text/javascript"></script>

</head>

<div class="stx-button-row">
    <div class="btn-group" data-toggle="buttons-radio">
        <button class="btn stx-button active" id="stx-and" type="button">
            AND
        </button>
        <button class="btn stx-button" id="stx-or" type="button">
            OR
        </button>
    </div>
</div>
于 2013-02-08T19:49:39.410 回答