3

RailsアプリでのJavaScriptの問題。

Twitterのドキュメントは物事を非常に単純にしていますが、タブを動的に機能させることはできません（タブの切り替えとドロップダウン）。私は彼らのソースコードをまっすぐにコピーし、彼らのjavascriptをダウンロードして、それを私のrailsアプリのapplication.jsファイルに含めました。何が欠けているのかわからない。

HTMLファイル：

<script>
  $(function () {
    $('#.tabs').bind('change', function (e) {
      e.target // activated tab
      e.relatedTarget // previous tab
    })
</script>
<h3>Demo</h3>
<ul class="tabs" data-tabs="tabs">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#profile">Profile</a></li>
<li><a href="#messages">Messages</a></li>
<li><a href="#settings">Settings</a></li>
<li class="dropdown" data-dropdown="dropdown">
  <a href="#" class="dropdown-toggle">Dropdown</a>
  <ul class="dropdown-menu">
  <li><a href="#fat">@fat</a></li>
  <li><a href="#mdo">@mdo</a></li>
  </ul>
</li>
</ul>
<div id="my-tab-content" class="tab-content">
  <div class="active tab-pane" id="home">
    <p>Lorem Ipsum.</p>

Application.jsファイル：

// Place your application-specific JavaScript functions and classes here
// This file is automatically included by javascript_include_tag :defaults
$(document).ready(function(){

!function( $ ){

  "use strict"

  function activate ( element, container ) {
    container
      .find('> .active')
      .removeClass('active')
      .find('> .dropdown-menu > .active')
      .removeClass('active')

    element.addClass('active')

    if ( element.parent('.dropdown-menu') ) {
      element.closest('li.dropdown').addClass('active')
    }
  }

  function tab( e ) {
    var $this = $(this)
      , $ul = $this.closest('ul:not(.dropdown-menu)')
      , href = $this.attr('href')
      , previous
      , $href

    if ( /^#\w+/.test(href) ) {
      e.preventDefault()

      if ( $this.parent('li').hasClass('active') ) {
        return
      }

      previous = $ul.find('.active a').last()[0]
      $href = $(href)

      activate($this.parent('li'), $ul)
      activate($href, $href.parent())

      $this.trigger({
        type: 'change'
      , relatedTarget: previous
      })
    }
  }


 /* TABS/PILLS PLUGIN DEFINITION
  * ============================ */

  $.fn.tabs = $.fn.pills = function ( selector ) {
    return this.each(function () {
      $(this).delegate(selector || '.tabs li > a, .pills > li > a', 'click', tab)
    })
  }

  $(document).ready(function () {
    $('body').tabs('ul[data-tabs] li > a, ul[data-pills] > li > a')
  })

}( window.jQuery || window.ender );

});
4

2 に答える 2

5

最初のスクリプトは必要ありません (同梱されているものよりも多くのものが必要な場合に備えて、例としてのみドキュメントに含まれています)

必要なのは、ブートストラップ スタイルシートへのリンクです。

<link rel="stylesheet" href="your_bootstrap_folder/bootstrap.min.css">

および 2 つのスクリプト (jquery があると仮定し、それ以外の場合は最初にそれを含めます):

<script type="text/javascript" src="your_bootstrap_folder/js/bootstrap-tabs.js"></script>
<script type="text/javascript" src="your_bootstrap_folder/js/bootstrap-dropdown.js"></script>

そして最後に関数呼び出し

<script>
    $(function () {
        $('.tabs').tabs()
    })
</script>

それはトリックを行う必要があります。

編集:シーケンスが正しいことを確認するために、完全な例を次に示します。

<!DOCTYPE html>

<html>
<head>
    <title>bootstrap tabs test</title>
    <link rel="stylesheet" href="path_to_bootstrap/bootstrap.min.css">
</head>

<body>
    <ul class="tabs">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Messages</a></li>
        <li><a href="#">Settings</a></li>
        <li><a href="#">Contact</a></li>
        <li data-dropdown="dropdown" class="dropdown">
            <a class="dropdown-toggle" href="#">Dropdown</a>
            <ul class="dropdown-menu">
                <li><a href="#">Secondary link</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Another link</a></li>
            </ul>
        </li>
    </ul>
    <script type="text/javascript" src="path_to_jquery/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="path_to_bootstrap/js/bootstrap-tabs.js"></script>
    <script type="text/javascript" src="path_to_bootstrap/js/bootstrap-dropdown.js"></script>
    <script>
        $(function () {
            $('.tabs').tabs()
        })
    </script>

</body>
</html>
于 2011-11-15T09:48:35.107 に答える
-2

Chrome で JavaScript コンソールを起動したところ、スクリプトが読み込まれていないことに気付きました。これは、レールでは、javascript をロードするために「パブリック」ファイルをパスに含める必要がないためです。のみが必要です。

さらに、application.hmtl.erb ファイルに <%= javascript_include_tag 'bootstrap-dropdown.js' %> を含める必要があります。これは、:default がこれらの js ファイルをロードしないためです。

于 2011-11-15T20:19:03.890 に答える