需要:在 Jquery 移动中使用“data-role='header'/data-role='footer'”时,将图像显示为 Div 标签内的背景。
代码:(示例)
<link type="text/css" rel="stylesheet" href="jquery.mobile-1.2.0.css"/>
<script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery-1.8.2.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery.mobile-1.2.0.js"></script>
<style type="text/css">
#main_logo{
background:url(img/logo.png) no-repeat 0 0 #fff;
background-attachment:fixed;
background-position:center;
color: #000;
font-family: Arial, Verdana, sans-serif;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="page" data-role="page" data-theme="c">
<div id="header" **data-role="header"** data-theme="c">
<div id="nav" data-role="navbar">
<div id="nav_menu" data-role="none">
Header
</div>
</div> <!--- Nav Bar--->
</div> <!---header-->
<div id="content" data-role="content" data-theme="c">
Content Area.
<div id="main_logo">
</div>
</div> <!--content-->
<div id="footer" data-role="footer" data-theme="c">
footer
</div> <!--footer-->
</div> <!--pageX-->
</body>
问题:没有显示!
替代方式:如果我忽略这些属性,那么它可以正常工作,就像
代码:(示例)
<link type="text/css" rel="stylesheet" href="jquery.mobile-1.2.0.css"/>
<script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery-1.8.2.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery.mobile-1.2.0.js"></script>
<style type="text/css">
#**page**{
background:url(img/logo.png) no-repeat 0 0 #fff;
background-attachment:fixed;
background-position:center;
color: #000;
font-family: Arial, Verdana, sans-serif;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="page" data-role="page" data-theme="c">
<div id="header" >
<div id="nav" data-role="navbar">
<div id="nav_menu" data-role="none">
Header
</div>
</div> <!--- Nav Bar--->
</div> <!---header-->
<div id="content" >
Content Area.
<div id="main_logo">
</div>
</div> <!--content-->
<div id="footer" >
footer
</div> <!--footer-->
</div> <!--pageX-->
</body>
如果有人有答案,请发布!谢谢 !!
注:文件夹结构:
root/
../index.php
../[all .css files]
../[all .js files]
../img/logo.png
[和] 在模拟器中编译