Jquery Mobile导航使用不同的面板,打破css

时间:2011-05-25 11:46:27

标签: jquery css jquery-mobile navbar

我遇到一个问题,我无法清楚地将其视为内容问题的导航问题或动态显示。首先,我使用单个html页面,其中包含多个页面,每个页面有两个导航栏:页眉和页脚。

第一页显示使用 getJSON()从后端的php作为JSON对象动态获取的内容。使用这些可折叠项目的html()函数将内容显示为三个可折叠项目的子项。内容分别填入可折叠项目的 H1 和两个列表子标记。

我的上方导航栏有三个条目(第1页,第2页,第3页)。当我从第1页导航到第2页,然后点击第2页中的第1页条目时,一切都按预期工作,,我得到 page1 ,就像我第一次离开它一样。

下方导航栏是 glyphish 菜单,有三页以及(page_a,page_b,page_c) 问题 在我从 page1 转到 page_c 然后点击 page1 时发生>链接返回(或者甚至当我使用JQM默认“返回”按钮)时, page1 的CSS中断既不显示标题导航栏也不显示第一个可折叠,而是合并第一个可折叠的内容 H1 ,第二次崩溃的内容令人困惑。

我使用listview()在动态填充列表视图后刷新它们(在每次调用pageshow()之后)。

我有不同的尝试来解决问题,其中一个是在消失的可折叠项目上使用page()但它没有用。

有必要提一下,我正在它的webkit浏览器上直接在Blackberry Bold 9700设备上进行开发(它在那里打破!);但是,该功能在桌面浏览器Firefox 4,Chrome及其扩展Ripple上运行良好。

如果有人遇到此类问题并设法解决问题,我将非常感谢您的见解/解决方案。

干杯。


[编辑]按照cpak提供的链接,我将以下CSS规则添加到我的自定义css文件中,并设法解决了这个问题。

.ui-mobile [data-role=page], .ui-mobile [data-role=dialog], .ui-page { height:0; overflow:hidden}

.ui-mobile .ui-page-active { display: block; overflow: visible; height:auto; min-height:100%;}

然后,我一起删除了上述规则并使用了最新构建的JQM,它默认解决了这个问题。对于那里的任何人,当我遇到问题时,我正在使用 v1.0a4.1 ,但似乎在最新版本的JQM (日期为5月24日) < / p>

1 个答案:

答案 0 :(得分:1)

在#home页面与Chrome和MobileSafari中的其他页面之间来回切换时遇到类似问题,但在原生Android浏览器中没有。 几天前找到了这个:

Layout of home page gets screwed up in Safari and MobileSafari when using the jQuery Mobile "Back" button

我还没时间尝试一下,但这可能与您遇到的情况有关。

[编辑]:在重新阅读你的问题后,我不确定这会有什么帮助,但我会留下这里的帖子,以供社区决定=)