0

我正在尝试学习 jquery mobile 并且在过去的几天里一直在玩它并且事情进展顺利，但我不确定我是否采取了正确的方法。

我尝试制作一个与 facebook 应用程序具有类似 UI 的网站。页面标题的右上角和左上角是使页面像抽屉一样滑出的按钮。

左上角的按钮将页面向右滑出以显示菜单，而右上角的按钮将向左滑出以显示要填写的表格。

我所做的是在页面外创建 div 并使用 javascript 滑出活动页面，根据按下的按钮显示菜单或表单：

<body>

  <div id="my-menu">
    <ul>
      <li><a href="page1.html">Menu Item 1</a></li>
    </ul>
  </div> <!-- end of my-menu -->

  <div id="my-form">
    <form method="post" action="form-action.php">
      <!-- form elements -->
    </form>
  </div> <!-- end of my-form -->

  <div data-role="page" id="home">
    <div data-role="header">
    </div>

    <div data-role="content">
    </div>
  </div> <!-- end of home -->

</body>

我使用自己的 CSS 来设置菜单样式，但我也注意到我的主题并未应用于“my-form”，但“主页”页面中的所有元素都已正确设置样式。

我不能将表单放在“主页”页面内，因为我无法实现我用菜单完成的滑动抽屉效果。

我是否想将自己的样式应用于页面外部的表单，或者有没有办法将 jquery 移动主题应用于页面外部的元素？

这将是实现这种用户界面的最佳方法，还是有更好的方法使用 jquery mobile 中可用的功能？

由于这将是我的应用程序 UI，这是否意味着我只需将相同的代码复制到所有页面？还是有更好的方法来做到这一点？

我想对这个用例使用最佳实践，所以请提供任何建议！在此先感谢您的帮助！

顺便说一句，我根据这篇博文制作了幻灯片菜单：http: //blog.aldomatic.com/facebook-style-slide-out-menu-in-jquery-mobile/

4

1 回答 1

0

解决方案1：

正如我在评论中告诉你的，jQM 样式不能在页面容器之外应用，但这不应该阻止你使用它的 css。

如果您使用的是 firefox，请使用 firebug 插件并查看每个 jQM 页面元素，复制其结构和 css。使用它在页面容器外创建样式。

还有一件事，新元素将被样式化，但它们没有功能，你需要自己重做。

解决方案2：

在页面加载时将您的内容放在 data-role="page" div 中，让 jQuery Mobile 设置页面样式，然后将您的内容 div 移出 data-role="page" div 成为 body 标记的子项.

于 2012-12-20T13:51:25.860 回答