与 包装函数括号 问题有关
Rion 和 Jan 足以使该脚本工作,但它只能工作一段时间(并且与添加的行完全无关)所以看起来原始代码失败了,我假设这是我在做的,因为这个 FB 风格的东西似乎无处不在。当用户滚动到页面底部时,它会“破坏”代码。我猜内容区域的类别正在改变?我对这种东西很绿色。
如果它因为 jquery 而不能工作,没什么大不了的,Showmenu 点击工作,滑动效果非常棒,保留它会很好,因为该网站基于 1.6.4 我真的不想重新- 做这一切。
这是代码
$(document).bind("mobileinit", function () {
$.mobile.pushStateEnabled = true;
});
$(function () {
var menuStatus;
// Show menu
$("a.showMenu").click(function () {
if (menuStatus != true) {
$(".ui-page-active").animate({
marginLeft: "165px",
}, 300, function () {
menuStatus = true
});
return false;
} else {
$(".ui-page-active").animate({
marginLeft: "0px",
}, 300, function () {
menuStatus = false
});
return false;
}
});
$('#menu, .pages').live("swipeleft", function () {
if (menuStatus) {
$(".ui-page-active").animate({
marginLeft: "0px",
}, 300, function () {
menuStatus = false
});
}
});
$('.pages').live("swiperight", function () {
if (!menuStatus) {
$(".ui-page-active").animate({
marginLeft: "165px",
}, 300, function () {
menuStatus = true
});
$("html, body").animate({ scrollTop: 0 }, "slow");
}
});
and the HTML
<!DOCTYPE html>
<html manifest="island.manifest">
<head>
<title></title>
<meta id="extViewportMeta" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="stylesheet" href="css/jquery.mobile-1.0rc2.min.css" />
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="js/flexslider/flexslider.css" type="text/css" media="screen"/>
<!--webapp stay-->
<!--test-->
<link rel="apple-touch-icon" href="images/add-to-home/touch-icon-iphone.png"/>
<link rel="apple-touch-icon-precomposed" href="images/add-to-home/touch-icon-iphone.png"/>
</head>
<body>
<div id="menu">
<ul>
<li><a target="_blank" href="" class="noeffect" style="height:50px;border-right:none;padding:15px;background:#075191;"><img src="images/YouIn.png" width="120"></a></li>
<li><a href="index.html" class="contentLink" rel="external" >Main </a></li>
<li><a href="nav_2.html" class="contentLink" rel="external" >January 30, 2013</a></li>
<li class="active"><a href="nav_3.html" class="contentLink" rel="external" style="border-right:solid 0px #9a9999" >January 31, 2013 </a></li>
<li><a href="nav_4.html" class="contentLink" rel="external" >February 1, 2013 </a></li>
<li><a href="nav_5.html" class="contentLink" rel="external" >February 2, 2013</a></li>
<li><a href="nav_6.html" class="contentLink" rel="external" style="color:red;text-align:center">Game Day!!!</a></li>
<li><a href="nav_7.html" class="contentLink" rel="external" >February 4, 2013 </a></li>
<li><a href="nav_8.html" class="contentLink" rel="external" >Map </a></li>
<li><a href="nav_9.html" class="contentLink" rel="external" >Contact Staff </a></li>
<li><a target="_blank" href="" class="noeffect" style="min-height:300px;border-top:solid 1px #3c7db3;padding:250px 0 0 15px;background:#075191;"><img src="images/YouIn.png" width="120"></a></li>
</ul>
</div>
<div data-role="page" class="pages" id="home">
<div data-role="header" style="min-height: 80px; background:#075191; ">
<span><a href="#" class="showMenu" style="float:left;margin:10px 10px 10px 10px;"><img src="images/MenuPSD3C.png" height= "64"></a></span>
<span ><a href="index.html" style="float:right;margin:10px 10px 10px 10px;"><img src="images/add-to-home/touch-icon-iphone.png" height= "64" ></a></span>
</div><!-- /header -->
<div data-role="content" style="min-height:1400px;border-top:solid #b2b3b5 1px">
content stuff
</div><!-- /content -->
</div><!-- /page -->
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.0rc2.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript">
function fullscreen() {
$('a').click(function() {
if(!$(this).hasClass('noeffect')) {
window.location = $(this).attr('href');
return false;
}
});
}
fullscreen();
</script>
</body>
</html>