Question

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

我尝试制作一个与Facebook应用程序类似的用户界面。页面右上角和左上角的标题是按钮，使页面像抽屉一样滑出。

左上方的按钮会将页面向右滑动以显示菜单，而右上方的按钮将向左滑动以显示要填写的表单。

我所做的是在页面外创建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”，但页面“home”中的所有元素都有正确的样式。

我无法将表单放在页面“home”中，因为我无法使用菜单进行滑动抽屉效果。

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

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

因为这将是我的应用程序UI，这意味着我只会将相同的代码复制到所有页面？或者有更好的方法吗？

我想使用此用例的最佳做法，所以请提供任何建议！在此先感谢您的帮助！

BTW我根据这篇博客文章做了幻灯片菜单： http://blog.aldomatic.com/facebook-style-slide-out-menu-in-jquery-mobile/

Answer 1

解决方案1：

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

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

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

<强>溶液2：

将您的内容放在页面加载的data-role =“page”div中，让jQuery Mobile为页面设置样式，然后将您的内容div移出data-role =“page”div作为子项身体标签。

在页面外应用主题

1 个答案: