Fatal编程技术网

Jquery mobile 在页面外应用主题

jquery-mobile

Jquery mobile 在页面外应用主题,jquery-mobile,Jquery Mobile,我正在尝试学习jquerymobile，在过去的几天里一直在使用它，一切都很顺利，但我不确定我是否采取了正确的方法 我试着制作一个与facebook应用程序界面相似的网站。在页面标题的右上角和左上角有按钮，可使页面像抽屉一样滑出 左上角按钮将向右滑动页面以显示菜单，而右上角按钮将向左滑动以显示要填写的表单 我所做的是在页面外创建div，并使用javascript滑出活动页面，根据按下的按钮显示菜单或表单： <body> <div id="my-menu">

我正在尝试学习jquerymobile，在过去的几天里一直在使用它，一切都很顺利，但我不确定我是否采取了正确的方法

我试着制作一个与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来设计菜单的样式，但我也注意到我的主题没有应用到“我的表单”，但是“主页”页面中的所有元素都有正确的样式

我不能把表格放在主页里，因为我不能像用菜单做的那样做滑动抽屉的效果

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

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

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

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

顺便说一句，我根据这篇博文制作了幻灯片菜单：

解决方案1:

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

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

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

解决方案2:

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

您在page div标记中出错。将id=“home”更改为id=“home”“并且只有页面内容才会应用jQM样式。你的表格在外面。哎呀！谢谢你抓到那个打字错误。是的，我意识到这些样式无法应用，但是有没有更好的方法来实现这一点，或者我必须为外部的表单制作一个新样式？我想使用相同的样式，并使用翻转开关和其他表单元素，它们是jQM的一部分。您需要创建自己的样式，如果您查看该博客文章，它的所有者正在使用自己的css来设置左侧菜单的样式。再说一遍，我不知道这是否可行，但您可以添加data role=“page”以形成div容器，也许这会有所帮助。但是我不认为有2个活动页面是可能的。是的，菜单没有jQM功能是可以的，因为它是所有链接，但希望有某种方式可以有jQM表单功能和样式，即使它的元素在数据角色=“页面”之外。仅仅因为它在页面之外，就觉得重新做一次是不对的。我会尝试探索其他的解决方案，如果我发现了什么，我会更新这个。谢谢你的输入！