gpt4 book ai didi

jQuery Mobile 样式未应用于数据角色之外的元素 ="page"

转载 作者:行者123 更新时间:2023-12-01 00:15:55 25 4
gpt4 key购买 nike

在我的 jQM 应用程序中,我有一个标题导航栏,我想保持固定。由于 jQM 中固定 header 的问题,我决定采用如下结构:

<!DOCTYPE html> 
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body style="overflow:hidden;">
<div data-role="navbar">
<ul>
<li><a href="#page1" class="ui-btn-active">One</a></li>
<li><a href="#page2">Two</a></li>
</ul>
</div>
<div id="page1" data-role="page" style="top:80px">
<div data-role="content">
Page1
<input type="button" value="Click"/>
</div>
</div>

<div id="page2" data-role="page" style="top:80px">
<div data-role="content">
Page2
<input type="button" value="Click2"/>
</div>
</div>
</body>
</html>

目的是使导航栏固定在顶部。当您单击相应的选项卡时,它应该加载页面。由于我已经为 data-role="page" div 指定了 padding-top ,因此它看起来就像标题保持固定在顶部一样。但它没有按预期工作,因为 data-role="navbar" 样式没有应用于标题中的导航栏。

有什么解决办法可以让它工作吗?提前致谢。

此处演示 - http://jsfiddle.net/UPZrs/

最佳答案

我遇到了完全相同的问题。在 jQuery Mobile 对它进行风格化(通过 FireBug)之后,我最终只是从导航栏中获取了 HTML,并且我使用了如下所示的代码:

<div id="edge_menu">
<ul data-role="listview" data-inset="true" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
<li data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-corner-top ui-btn-up-c">
<div class="ui-btn-inner ui-li ui-corner-top" aria-hidden="true">
<div class="ui-btn-text">
<a href="/m/default.html" class="ui-link-inherit">Home</a>
</div>
<span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span>
</div>
</li>
</ul>
</div>

如果您检查 jQuery Mobile 添加的类,实际上很容易更改这些类以更改主题或舍入/阴影选项。

我发现有效的另一个解决方法是在页面加载时将菜单放在 data-role="page" div 中,让 jQuery Mobile 设置页面样式,然后移动data-role="page" div 中的菜单 div 成为 body 标记的子级。

关于jQuery Mobile 样式未应用于数据角色之外的元素 ="page",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8240134/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com