Question

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 );

});

Answer 1

您不需要第一个脚本（它仅作为示例包含在文档中，以防您需要的内容超出框中的内容）

您需要的是指向引导程序样式表的链接：

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

Answer 2

我在Chrome上启动了javascript控制台并意识到我的脚本没有被加载。这是因为在rails上，您不需要在路径中包含“public”文件来加载javascript;只需要。

此外，在application.hmtl.erb文件中，＆lt;％= javascript_include_tag'bootstrap-dropdown.js'％＆gt;必须包含为：default不加载这些js文件。

获取Twitter Bootstrap的“Tabs”Javascript以在Rails App上运行

2 个答案: