Javascript和Ruby on Rails

Question

我正在学习如何使用Ruby on Rails（RoR）创建网站。 我有一个2年前与JSP一起工作时创建的HTML模板，现在我想在RoR网站中重用它。 这是HTML档案

<body>

<div id="container">

    <ul id="nav">
        <li><a href="index.html">Livingroom</a></li>
        <li><a href="about.html">Bedroom</a></li>
        <li><a href="#">Mattress</a></li>
        <li id="selected"><a href="#">Bathroom</a></li>
        <li><a href="#">Kitchen</a></li>
        <li><a href="#">Office</a></li>
        <li><a href="#">Outdoor</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">My Account</a></li>
        <li><a href="#">SearchBar</a></li>
    </ul>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.Nav.js"></script>

<script type="text/javascript">
    $('#nav').spasticNav();
</script>
</body>
</html>

这是javascript文件jquery.Nav.js

(function($) {

    $.fn.spasticNav = function(options) {

        options = $.extend({
            overlap : 20,
            speed : 500,
            reset : 1500,
            color : '#0b2b61',
            easing : 'easeOutExpo'
        }, options);

        return this.each(function() {

            var nav = $(this),
                currentPageItem = $('#selected', nav),
                blob,
                reset;

            $('<li id="blob"></li>').css({
                width : currentPageItem.outerWidth(),
                height : currentPageItem.outerHeight() + options.overlap,
                left : currentPageItem.position().left,
                top : currentPageItem.position().top - options.overlap / 2,
                backgroundColor : options.color
            }).appendTo(this);

            blob = $('#blob', nav);

            $('li:not(#blob)', nav).hover(function() {
                // mouse over
                clearTimeout(reset);
                blob.animate(
                    {
                        left : $(this).position().left,
                        width : $(this).width()
                    },
                    {
                        duration : options.speed,
                        easing : options.easing,
                        queue : false
                    }
                );
            }, function() {
                // mouse out    
                reset = setTimeout(function() {
                    blob.animate({
                        width : currentPageItem.outerWidth(),
                        left : currentPageItem.position().left
                    }, options.speed)
                }, options.reset);
            });
        }); // end each
    };
})(jQuery);

在RoR项目的application.html.erb中，我包含了这样的js文件

  <%= javascript_include_tag "jquery.Nav.js" %>

但是，即使我放入$（'＃nav'）。spasticNav（）;，我的主页也无法正常工作。 在RoR项目的主体标签中

<body>
  <div class="container">
      <%=  render 'layouts/header'%>

          <%=yield%>

      <%=  render 'layouts/footer'%>
  </div>

<script type="text/javascript">
    $('#nav').spasticNav();
</script>

</body>

无论如何，将$（'＃nav'）。spasticNav（）嵌入到js文件中。 我尝试了很多方法，但仍然无法正常工作。 非常感谢。

编辑：我在网上看到了一些示例，他们将函数嵌入到js文件中，如下所示。

jQuery(document).ready(function($){

    /*---------------------------------
        MENU Dropdowns
    -----------------------------------*/
    $('ul.menu').each(function(){

Answer 1

尝试放入$('#nav').spasticNav(); 放入$(document).ready函数中，以便在页面加载时执行：

<script type="text/javascript">
  $(document).ready(function() {
    $('#nav').spasticNav();
  });
</script>

还要确保页面上有#nav元素。 我无法从您的html布局中分辨出您是否拥有它。

Javascript和Ruby on Rails

问题描述

1 个解决方案

解决方案1
1 已采纳 2013-11-30 04:33:05

Javascript和Ruby on Rails

问题描述

1 个解决方案

解决方案1 1 已采纳 2013-11-30 04:33:05

解决方案1
1 已采纳 2013-11-30 04:33:05