控制檯狀態方法不可用，但它似乎應該是

我有一個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>

這裏的控制檯錯誤：

Uncaught TypeError: Object [object Object] has no method 'thumbnailScroller' 138:168 
window.onload 138:168 
window.onload

這裏的thumbnailScroller方法中jquery.thumbnailScroller.js：

(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文件是爲加載到導軌應用程序（輸出從鉻開發工具的資源標籤：

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

有沒有人知道爲什麼這種方法不可用？

來源

2013-09-29 Joe Essey

你確定你的應用上有jQuery UI嗎？ –

我將編輯以顯示整個.js加載 –

好吧，我已經嘗試使用縮略圖scroller jQuery插件在我的培訓應用程序和成功。

首先，從您的應用中移除jquery-ui-1.8.13.custom.min.js，

讓您的Gemfile確保這種寶石

gem 'jquery-rails' 
gem 'jquery-ui-rails'

刪除Gemfile.lock和運行捆綁安裝

確保在application.js lookslike：

//= require jquery 
//= require jquery_ujs 
//= require jquery.ui.all

試試這個f或方法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>

來源

2013-09-29 16:11:24

JavaScript現在可以工作，但它仍然表現得很時髦。例如，如果您重新加載頁面，它只會顯示一些圖像，並且js停止工作。 –

控制檯狀態方法不可用，但它似乎應該是

回答

相關問題