9

我正在将我的 Rails 3.1 应用程序与 jQuery mobile（目前为 Beta 2）集成，但我不确定如何组织我的 JS 和 CSS。

我在 application.mobile.erb 的头部标签中有这个（从http://jquerymobile.com/download/复制）：

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>

我应该把我的 stylesheet_link_tag for 'application' 放在上面，这样我的 CSS 样式就不会覆盖 jQuery mobile 的精美 CSS 吗？'application' 的 javascript_include_tag 怎么样？

或者也许所有这些都应该完全分开？

我只是不确定如何组织所有这些/如果有传统的方法可以做到这一点。输入赞赏。

（如有需要，请询问更多详情。）

编辑：*我也想知道将我的移动专用 JS 和 CSS 放在哪里......

4

3 回答 3

6

就像你一样，我很困惑如何将 jQuery Mobile（现在是最终版本 1.0）与 Rails 3.1 的新资产管道一起使用。

首先，将 jquery.mobile.js 和 jquery.mobile.css 分别放到 assets/javascripts 和 assets/stylesheets 中。

其次，在您的 application.js 清单中插入“require jquery.mobile”

//= require jquery
//= require jquery_ujs
//= require jquery.mobile

与您的 application.css 清单相同：

*= require_self
*= require_tree .
*= require jquery.mobile

三、将“application.js”和“application.css”放入布局，application.html.erb

<meta name="viewport" content="width=device-width, initial-scale=1">
<%= javascript_include_tag "application" %>
<%= stylesheet_link_tag    "application" %>
<%= csrf_meta_tags %>

第四，不要忘记添加'meta name~~~'行以使其正常工作。

<meta content="width=device-width, minimum-scale=1, maximum-scale=1" name="viewport">

还要正确使用 jQuery 移动属性，例如页面中的 'data-role="page"'。其他人建议使用像“jquery-mobile-rails”或类似的宝石，但我不会。

于 2012-01-08T03:14:47.370 回答
6

现在有一个jQuery Mobile Ruby gem，它将使您可以在资产管道中使用 jQuery Mobile 文件。

安装很容易。只需将 gem 添加到您的应用程序中Gemfile

gem "jquery-mobile-rails"

并运行bundle install。然后，您可以添加

//= require jquery.mobile

到您application.js或您想要包含文件的任何其他地方。

于 2011-09-19T15:24:53.827 回答
1

这真的是你决定你想要什么优先。根据您调用事物的顺序，某些事物可能必须优先于其他事物（如果在 file2 中调用函数，请确保定义该函数的 file1 包含在它之前）。

至于如何使用asset_pipeline，您可以自己下载资产并将它们捆绑在一起，或者按照适合您的顺序application.css/application.js保留它。<head>

于 2011-08-05T08:21:33.963 回答