Rails 的 jquery 移动布局的一个很好的例子是什么?

发布于 2024-10-29 00:42:37 字数 845 浏览 1 评论 0原文

下面是我用作针对移动设备的 Rails 项目的主要布局的内容。我根据 jquery mobile 文档导出了页面、页眉、内容和页脚数据角色。有 jquery 移动经验的人是否发现以下 haml 布局中存在明显的缺陷?

!!! 5
%html

  %head
    %title= h(yield(:title))
    %meta{"http-equiv"=>"Content-Type", :content=>"text/html; charset=utf-8"}/
    %meta{:name => "viewport", :content => "width=device-width, initial-scale=1"}/
    = stylesheet_link_tag "http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css"
    = javascript_include_tag "http://code.jquery.com/jquery-1.6.1.min.js", "http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"
    = yield(:head)

  %body
    .app_page{"data-role" => :page, "data-theme" => :b}
      = yield(:header)

      .app_content{"data-role" => :content}
        ~ yield

      .app_footer{"data-role" => :footer}
        = yield(:footer)

Below is what I'm using as my main layout for a Rails project targeting mobile devices. I derived the page, header, content, and footer data-roles per the jquery mobile docs. Does anyone with jquery mobile experience see any glaring deficiencies in the following haml layout?

!!! 5
%html

  %head
    %title= h(yield(:title))
    %meta{"http-equiv"=>"Content-Type", :content=>"text/html; charset=utf-8"}/
    %meta{:name => "viewport", :content => "width=device-width, initial-scale=1"}/
    = stylesheet_link_tag "http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css"
    = javascript_include_tag "http://code.jquery.com/jquery-1.6.1.min.js", "http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"
    = yield(:head)

  %body
    .app_page{"data-role" => :page, "data-theme" => :b}
      = yield(:header)

      .app_content{"data-role" => :content}
        ~ yield

      .app_footer{"data-role" => :footer}
        = yield(:footer)

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

无需解释 2024-11-05 00:42:37

我会确保您的标头位于带有 "data-role"=>:header 的 div 中,但否则您的布局看起来是正确的。

是什么让您认为它有缺陷?它似乎遵循 jquery-mobile 的页面对象规范,并且没有任何特定于 Rails 的布局需要考虑。

I'd make sure your header is in a div with "data-role"=>:header, but otherwise your layout looks correct.

What makes you think it has deficiencies? It appears to follow jquery-mobile's spec for page objects, and there's nothing Rails-specific to consider for layout.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文