1

TwitterBootstrapとjQueryUIの両方を使用するRubyonRailsアプリを開発しています。私の知る限り、この2つの間のほとんど(おそらくすべて?)の非互換性の問題は解決されています(そして、アセットパイプラインにインストールされ、含まれている両方の最新の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 ブートストラップと jquery-ui の間の互換性に問題があるようです。次のような両方の特定の宝石です。

  • gem '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

私はあなたの最後のコメントに続いて私の答えを変更しました。これは、完全に機能している私のサイトの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 に答える