jquery - jQuery Mobile - 基于设备方向的固定标题

Question

我目前正在为移动设备开发一个网站，并且我正在使用 jquery mobile。

我使用以下方法将标题放在固定位置：

<header data-role="header" data-position="fixed">

这工作得很好，但是当在设备上以横向模式查看页面时，标题会占用大量空间。

jquery mobile 是否可以仅在纵向模式下设置 data-position="fixed" 而在横向模式下具有不固定的标题？

提前致谢！

Answer 1

您可以绑定到orientationchange事件并调用$("[data-position='fixed']").fixedtoolbar('hide');标题。

这是讨论固定工具栏http://jquerymobile.com/demos/1.1.0/docs/toolbars/bars-fixed-methods.html上可用方法的 jQuery Mobile 页面。

这些是可用的事件http://jquerymobile.com/demos/1.1.0/docs/api/events.html，其中之一是orientationchange.

您可以尝试使用带有 data-position 属性而不是 #header 的实际选择器。可能需要进行一些调试才能使其正常工作，但没有理由不这样做。