0

...事实上，我放在前面的所有标记

<div data-role="page">...</div>

在很短的时间内可见，当页面完全呈现时，所有这些内容都会消失。虽然它在 Source / Firebug 中仍然可见。

我正在为这个项目使用 HTML5Boilerplate。这是一些代码 - 也许有一些我没有找到的碰撞？！

<head>
<link rel="stylesheet" href="styles/normalize.css"/>
<link rel="stylesheet" href="styles/vendor/jquery.mobile-1.2.0.css"/>
<link rel="stylesheet" href="styles/vendor/jquery.mobile.structure-1.2.0.css"/>
<link rel="stylesheet" href="styles/vendor/jquery.mobile.theme-1.2.0.css"/>
<script type="text/javascript" src="scripts/vendor/modernizr-2.6.1.min.js">
</script>
</head>

<body>
<!-- header disappears after page is rendered :( //-->
<div data-role="header">
 Here goes the Head-Content
</div>

<h3>This content disappears also :( ... </h3>

<!-- everything below this point stays visible! //-->
<div data-role="page">...</div>    
</body>

...

<script type="text/javascript" src="scripts/vendor/jquery-1.8.3.min.js">
</script>
<script type="text/javascript" src="scripts/vendor/jquery.mobile-1.2.0.min.js">
</script>
4

1 回答 1

2

如问:)

在 jQuery mobile 中，data-role="page"它不是您内容的容器，它实际上是您想要服务的页面，其他任何内容都不会显示。你需要把你的data-role="header"里面data-role="page"，它会起作用的

来自jquerymobile.com的基本 jQuery 移动页面：

<!DOCTYPE html> 
<html> 
<head> 
  <title>Page Title</title> 
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
  <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head> 
<body> 

  // Anything here will not be on the page   

  <div data-role="page"> 
    <div data-role="header">...</div> 
    <div data-role="content">...</div> 
    <div data-role="footer">...</div> 
  </div> 

  // Anything here will not be on the page

</body>
</html>

证明在这里

于 2013-01-08T14:19:33.243 回答