Fatal编程技术网
  • javascript/
  • Javascript 控制台声明方法不可用，但似乎应该可用

Javascript 控制台声明方法不可用，但似乎应该可用

javascript jquery ruby-on-rails

Javascript 控制台声明方法不可用，但似乎应该可用,javascript,jquery,ruby-on-rails,Javascript,Jquery,Ruby On Rails,我有一个rails应用程序，我正在尝试添加一个缩略图滚动条。它打印div，但js不工作。以下是文件： <div id="tS2" class="jThumbnailScroller"> <div class="jTscrollerContainer"> <div class="jTscroller"> <% @illustrations.each do |illustration| %>

我有一个rails应用程序，我正在尝试添加一个缩略图滚动条。它打印div，但js不工作。以下是文件：

<div id="tS2" class="jThumbnailScroller">
    <div class="jTscrollerContainer">
        <div class="jTscroller">
          <% @illustrations.each do |illustration| %>
              <% if illustration.aws_image_thumbnail_url %>
                <%= link_to image_tag(illustration.aws_image_thumbnail_url, :title => illustration.name), illustration %>
              <% else %>
                <%= link_to image_tag(illustration.image.url(:thumb), :title => illustration.name), illustration %>
              <% end %>
          <% end %>
        </div>
    </div>

</div>

<script>
jQuery.noConflict();
(function($){
window.onload=function(){
    $("#tS2").thumbnailScroller({
        scrollerType:"hoverPrecise",
        scrollerOrientation:"horizontal",
        scrollSpeed:2,
        scrollEasing:"easeOutCirc",
        scrollEasingAmount:600,
        acceleration:4,
        scrollSpeed:800,
        noScrollCenterSpace:10,
        autoScrolling:0,
        autoScrollingSpeed:2000,
        autoScrollingEasing:"easeInOutQuad",
        autoScrollingDelay:500
    });
}
})(jQuery);
</script>
以下是
jquery.thumbnailScroller.js
中的
thumbnailScroller
方法：

(function($){  
 $.fn.thumbnailScroller=function(options){  
    var defaults={ //default options
        scrollerType:"hoverPrecise", //values: "hoverPrecise", "hoverAccelerate", "clickButtons"
        scrollerOrientation:"horizontal", //values: "horizontal", "vertical"
        scrollEasing:"easeOutCirc", //easing type
        scrollEasingAmount:800, //value: milliseconds
        acceleration:2, //value: integer
        scrollSpeed:600, //value: milliseconds
        noScrollCenterSpace:0, //value: pixels
        autoScrolling:0, //value: integer
        autoScrollingSpeed:8000, //value: milliseconds
        autoScrollingEasing:"easeInOutQuad", //easing type
        autoScrollingDelay:2500 //value: milliseconds
    };
在这里，您可以看到js文件正在加载到rails应用程序中（chrome DevelopmentNet工具“资源”选项卡的输出：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
  <link href="https://s3-us-west-2.amazonaws.com/haggard/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
  <title>Visual Haggard</title>
  <link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/reset.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/archive.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/blog_posts.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/booklist.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap_and_overrides.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/comments.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/contact_forms.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/editions.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/illustrations.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/jquery-ui-1.10.3.custom/css/no-theme/jquery-ui-1.10.3.custom.min.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/jquery.thumbnailscroller.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/novels.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/scaffolds.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/sessions.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/users.css?body=1" media="all" rel="stylesheet" type="text/css" />
  <link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic' rel='stylesheet' type='text/css'>
  <script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-transition.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-alert.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-modal.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-dropdown.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-scrollspy.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-tab.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-tooltip.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-popover.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-button.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-collapse.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-carousel.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-typeahead.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-affix.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap.js?body=1" type="text/javascript"></script>
<script src="/assets/archive.js?body=1" type="text/javascript"></script>
<script src="/assets/blog_posts.js?body=1" type="text/javascript"></script>
<script src="/assets/booklist.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap.js?body=1" type="text/javascript"></script>
<script src="/assets/comments.js?body=1" type="text/javascript"></script>
<script src="/assets/contact_forms.js?body=1" type="text/javascript"></script>
<script src="/assets/editions.js?body=1" type="text/javascript"></script>
<script src="/assets/illustrations.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-ui-1.8.13.custom.min.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.easing.1.3.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.thumbnailScroller.js?body=1" type="text/javascript"></script>
<script src="/assets/novels.js?body=1" type="text/javascript"></script>
<script src="/assets/sessions.js?body=1" type="text/javascript"></script>
<script src="/assets/users.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
  <meta content="authenticity_token" name="csrf-param" />
<meta content="IlafOuTVut9RwVQZwQrI4JpuieQp2lHla7HxIiCI2e0=" name="csrf-token" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>


视觉憔悴
有人知道为什么这个方法不可用吗？

好的，我已经试过在我的培训应用程序上使用缩略图滚动程序jQuery插件，并且成功了

首先，从应用程序中删除
jquery-ui-1.8.13.custom.min.js

确保你的gem文件中有这个gem

gem 'jquery-rails'
gem 'jquery-ui-rails'
删除
Gemfile.lock
并运行bundle安装

确保
application.js
看起来像：

//= require jquery
//= require jquery_ujs
//= require jquery.ui.all
对于jquery缩略图，请尝试此方法，将其放在
head
标记之间

  <script type="text/javascript">
  $(function () {
    $("#tS2").thumbnailScroller({
        scrollerType:"hoverPrecise",
        scrollerOrientation:"horizontal",
        scrollSpeed:2,
        scrollEasing:"easeOutCirc",
        scrollEasingAmount:600,
        acceleration:4,
        scrollSpeed:800,
        noScrollCenterSpace:10,
        autoScrolling:0,
        autoScrollingSpeed:2000,
        autoScrollingEasing:"easeInOutQuad",
        autoScrollingDelay:500
    });
});</script>


$（函数（）{
$（“#tS2”）.缩略图滚动条({
scrollerType:“hoverPrecise”，
滚动方向：“水平”，
滚动速度：2，
滚动条：“easeOutCirc”，
滚动测量装载量：600，
加速度：4，
滚动速度：800，
noScrollCenterSpace:10，
自动滚动：0，
自动扫描速度：2000，
自动克隆：“easeInOutQuad”，
自动克隆延迟：500
});
});
你确定你的应用程序上有jquery ui吗？我会编辑以显示整个.js加载。javascript现在可以工作，但它的行为仍然很怪异。例如，如果你重新加载一个页面，它只会显示一些图像，而js停止工作。 
  <script type="text/javascript">
  $(function () {
    $("#tS2").thumbnailScroller({
        scrollerType:"hoverPrecise",
        scrollerOrientation:"horizontal",
        scrollSpeed:2,
        scrollEasing:"easeOutCirc",
        scrollEasingAmount:600,
        acceleration:4,
        scrollSpeed:800,
        noScrollCenterSpace:10,
        autoScrolling:0,
        autoScrollingSpeed:2000,
        autoScrollingEasing:"easeInOutQuad",
        autoScrollingDelay:500
    });
});</script>