PhoneGap中文网
标题:
求大侠看看 内容滑动到底部，头部和尾部会隐藏掉
[打印本页]
作者:
洛阳城
时间:
2014-8-8 11:57
标题:
求大侠看看 内容滑动到底部，头部和尾部会隐藏掉
附上源码，不胜感激：<!DOCTYPE html>
<!--HTML5 doctype-->
<html>
<head>
<script>
(function () {
if ("-ms-user-select" in document.documentElement.style && navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement("style");
msViewportStyle.appendChild(
document.createTextNode("@-ms-viewport{width:auto!important}")
);
document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
}
})();
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>huanying</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" type="text/css" href="ui/plugins/css/af.scroller.css" />
<link rel="stylesheet" type="text/css" href="css/icons.css" />
<link rel="stylesheet" type="text/css" href="css/af.ui.css" title="default" />
<script type="text/javascript" charset="utf-8" src="js/appframework.js"></script>
<script type="text/javascript" charset="utf-8" src="ui/appframework.ui.js"></script>
<script src="ui/plugins/af.scroller.js"></script>
<script src="ui/plugins/af.scrollScreen.js"></script>
<script src="ui/plugins/af.actionsheet.js"></script>
<script src="js/af.plugins.min.js"></script>
<script type="text/javascript">
$(function () {
//$.ui.toggleHeaderMenu(showHide);
//$.ui.toggleNavMenu(showHide);
})
function showHide(obj, objToHide) {
var el = $("#" + objToHide)[0];
if (obj.className == "expanded") {
obj.className = "collapsed";
} else {
obj.className = "expanded";
}
$(el).toggle();
}
</script>
<style type="text/css">
.travel_List a { color: #333; text-decoration: none; }
.travel_List li { margin: 10px; padding: 10px; border-radius: 6px; border: 1px solid #ccc; }
.travel_List li h2, .travel_List li p { margin: 0; padding: 0; }
.travel_List li img { float: left; width: 90px; height: 90px; margin-right: 10px; border-radius: 6px; }
.travel_List li h2 { margin-bottom: 5px; font-weight: normal; color: #ff6400; }
.travel_List .intro_Item { --height: 42px; line-height: 20px; }
.travel_List .price_Item em { float: right; font-style: normal; color: #ff6400; }
#afui .price_Item { margin: 0; padding: 0; }
#main .list > li > a { padding: 10px; }
/* 详细页css */
.section img { width: 100%; }
.header_ h2 { background: none repeat scroll 100% 100% #fff; font-size: 18px; font-weight: bold; line-height: 44px; text-align: center; }
.section .artde { padding: 0 10px; box-shadow: 1px 1px 1px 0 #ccc; }
.section .artde p { line-height: 30px!important; }
.section .artde .price_Item2 strong { font-style: normal; color: #ff6400; }
.section .artde .price_Item2 em { float: right; font-style: normal; color: #ff6400; padding-right: 10px; }
.section .artde .price_Item2 { border-bottom: 1px solid #ccc; padding-bottom: 5px; }
.section .artde .info_Item2 span, .section .artde .info_Item2 em { font-size: 12px; color: #80a1bf; font-style: normal; }
.section .artde .info_Item2 em { float: right; padding-right: 10px; }
.warp-content {padding:20px; }
/*覆盖默认UI*/
#afui .panel { padding-left: 0; padding-right: 0; }
</style>
</head>
<body>
<div id="afui">
<div id="content">
<div id="main" class="panel" selected="true" data-header="custom_header" data-footer="custom_footer">
<ul class="list travel_List">
<li>
<a href="#Pdetail">
<img src="http://img0.ilvxing.com/item/201406/20/53a40a941d60a.jpg">
<h2>长沙出发</h2>
<p class="intro_Item">超值新加坡超值新加坡超值新加坡超值新加坡</p>
<p class="price_Item"><em>￥4699起</em><del>￥5499</del></p>
</a>
</li>
<li>
<a href="#afuidemo">
<img src="http://img0.ilvxing.com/item/201406/20/53a40a941d60a.jpg">
<h2>长沙出发</h2>
<p class="intro_Item">超值新加坡超值新加坡超值新加坡超值新加坡</p>
<p class="price_Item"><em>￥4699起</em><del>￥5499</del></p>
</a>
</li>
<li>
<a href="#afuidemo">
<img src="http://img0.ilvxing.com/item/201406/20/53a40a941d60a.jpg">
<h2>长沙出发</h2>
<p class="intro_Item">超值新加坡超值新加坡超值新加坡超值新加坡</p>
<p class="price_Item"><em>￥4699起</em><del>￥5499</del></p>
</a>
</li>
<li>
<a href="#afuidemo">
<img src="http://img0.ilvxing.com/item/201406/20/53a40a941d60a.jpg">
<h2>长沙出发</h2>
<p class="intro_Item">超值新加坡超值新加坡超值新加坡超值新加坡</p>
<p class="price_Item"><em>￥4699起</em><del>￥5499</del></p>
</a>
</li>
<li>
<a href="#afuidemo">
<img src="http://img0.ilvxing.com/item/201406/20/53a40a941d60a.jpg">
<h2>长沙出发</h2>
<p class="intro_Item">超值新加坡超值新加坡超值新加坡超值新加坡</p>
<p class="price_Item"><em>￥4699起</em><del>￥5499</del></p>
</a>
</li>
</ul>
</div>
<!-- 详细页面 -->
<div id="Pdetail" class="panel" data-header="custom_header" data-footer="custom_footer">
<div class="header_">
<h2>产品详情</h2>
</div>
<div class="section">
<a href="#">
<img src="http://img0.ilvxing.com/item/201406/26/53abf1e2f36cf.jpg" alt="" /></a>
<div class="artde">
<p>畅游济州|济州岛3晚4日跟团游</p>
<p class="price_Item2"><strong>￥1999起</strong><em>跟团游</em></p>
<p class="info_Item2"><span>出发地：北京</span><em>目的地韩国</em></p>
</div>
</div>
<div class="warp-content">
<a class="button block">出发日期：10月9日（可更改）</a>
详细页内容详细页内容详细页内容
</div>
</div>
<header id="custom_header">
<h1>欢迎</h1>
</header>
<footer id="custom_footer">
<a href="#main" style="float: right;" class="icon home stack" data-transition="up">首页</a>
<a href='#Pdetail' class='icon info'>详细页</a>
<a href="#main" style="float: right;" class="icon camera">搜索</a>
</footer>
</div>
</div>
<script>
$("#content").scroller({ useJsScroller: true });
function showCustomJsonSheet() {
$("#afui").actionsheet(
[{
text: '返回上一页',
cssClasses: 'red',
handler: function () {
$.ui.goBack();
}
}, {
text: '10月22日（星期五）',
cssClasses: 'blue',
handler: function () {
alert("10月22日（星期五）");
}
}, {
text: '12月3日（星期五）',
cssClasses: '',
handler: function () {
alert("ok（12月3日（星期五））");
}
},
{
text: '12月6日（星期五）',
cssClasses: '',
handler: function () {
alert("ok（12月6日（星期五））");
}
},
{
text: '12月2日（星期五）',
cssClasses: '',
handler: function () {
alert("ok（12月2日（星期五））");
}
}]);
}
</script>
</body>
</html>
作者:
洛阳城
时间:
2014-8-8 12:04
自己顶一下下
作者:
lobtao
时间:
2014-8-8 14:07
看不懂，帮你顶
作者:
admin
时间:
2014-8-8 14:21
参考官方文档 css js全部引入
运行正常后在删掉没有用的css js
作者:
洛阳城
时间:
2014-8-8 14:38
admin 发表于 2014-8-8 14:21
参考官方文档 css js全部引入
运行正常后在删掉没有用的css js
好了
欢迎光临 PhoneGap中文网 (http://bbs.phonegap100.com/)
Powered by Discuz! X3.2
.gif)
好了