0

我有这个文件：geoView.html.erb

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<%= stylesheet_link_tag 'application' %>
<%= javascript_include_tag  'application'%>
<body onload="initialize()">

 <div id="top_vendors"></div>
<div id="left_control_panel">
 <input type="button" onclick="getlistings();" value="Add Markers">
 <input type="button" onclick="clearMarkers();" value="Remove Markers">
</div>

<div id="mid_wrapper">
  <div id="map_canvas"></div>
  <div id="right_control_panel">
   <input type="button" onclick="getlistings();" value="Add Markers">
   <input type="button" onclick="clearMarkers();" value="Remove Markers">
  </div>
  </div>
</div>

</body>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=XXsensor=false"></script>

我的问题是我想将 jQuery Cupertino 主题库中的水平滚动条小部件添加到此处的 div“top_vendors”。

我将本教程视为指南，但是我没有成功

到目前为止，我已经完成了以下步骤：1) 将 jQuery 缩小库复制到我的 Assets/javascripts 文件夹中 2) 也将 jqueryUI 库复制到那里 3) 将 Cupertino 主题图像复制到样式表/图像中 4) 复制 jquery-ui-。 .custom.css 文件到 stylsheets 文件夹 5) 这是我的 application.js 文件的头标签

<!DOCTYPE html>
<html>
<head>
<title>App0521</title>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"  type="text/javascript"></script>
<![endif]-->
<%= stylesheet_link_tag   'jquery-ui-1.8.21.custom.css', "application", :media =>  "all" %>
<%= javascript_include_tag 'jquery-1.4.2.min.js ', 'jquery-ui-1.8.2.custom.min.js',"application" %>
<%= csrf_meta_tags %>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

我仍然没有在浏览器中看到任何滚动条。

我错过了什么？谢谢

4

1 回答 1

1

您不需要在 application.html.erb 中包含所有CSSs 和JSs。您可以配置 Rails 为您包含它。

application.html.erb:

<%= stylesheet_link_tag    "application", :media => :all %>
<%= javascript_include_tag "application" %>

将文件保存在js文件assets/javascript夹中并将它们包含在application.js

应用程序.js

//= require jquery
//= require jquery_ujs
//= require jquery-ui      #here you are including the jQUERY-UI
//= require_tree .

同样在你的application.js你需要以一种不显眼的方式创建函数（我认为你缺少它）。

如果您想调用您 ID中的幻灯片#top_vendors，例如：

$(function() {
    $( "#top_vendors" ).slider();
});

任何其他jQuery-UI 插件也可以这样做。

我希望它有帮助...

于 2012-07-04T22:21:19.280 回答