ラッパー関数の括弧の 質問に関連する
Rion と Jan はそのスクリプトを機能させるのに十分でしたが、しばらくしか機能しません (追加された行とはまったく関係ありません)。そのため、元のコードが失敗しているように見えます。どこにでもいること。ユーザーがページの一番下までスクロールすると、コードが「中断」します。コンテンツ領域のクラスが変更されていると思いますか? 私はこの種のものにかなりグリーンです。
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>