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">

和两个脚本（假设您有 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 控制台并意识到我的脚本没有被加载。这是因为在 Rails 上，您不需要在路径中包含“公共”文件来加载 javascript；只需要。

此外，在 application.hmtl.erb 文件中，必须包含 <%= javascript_include_tag 'bootstrap-dropdown.js' %> 因为 :default 不会加载这些 js 文件。

于 2011-11-15T20:19:03.890 回答