FB滑动操作失败
FB swipe action failing
相关的包装函数括号问题
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>
insert after your jquery ref
<script type="text/javascript">
(function (window) {
// This library re-implements setTimeout, setInterval, clearTimeout, clearInterval for iOS6.
// iOS6 suffers from a bug that kills timers that are created while a page is scrolling.
// This library fixes that problem by recreating timers after scrolling finishes (with interval correction).
// This code is free to use by anyone (MIT, blabla).
// Original Author: rkorving@wizcorp.jp
var timeouts = {};
var intervals = {};
var orgSetTimeout = window.setTimeout;
var orgSetInterval = window.setInterval;
var orgClearTimeout = window.clearTimeout;
var orgClearInterval = window.clearInterval;
// To prevent errors if loaded on older IE.
if (!window.addEventListener) return false;
function createTimer(set, map, args) {
var id, cb = args[0],
repeat = (set === orgSetInterval);
function callback() {
if (cb) {
cb.apply(window, arguments);
if (!repeat) {
delete map[id];
cb = null;
}
}
}
args[0] = callback;
id = set.apply(window, args);
map[id] = {
args: args,
created: Date.now(),
cb: cb,
id: id
};
return id;
}
function resetTimer(set, clear, map, virtualId, correctInterval) {
var timer = map[virtualId];
if (!timer) {
return;
}
var repeat = (set === orgSetInterval);
// cleanup
clear(timer.id);
// reduce the interval (arg 1 in the args array)
if (!repeat) {
var interval = timer.args[1];
var reduction = Date.now() - timer.created;
if (reduction < 0) {
reduction = 0;
}
interval -= reduction;
if (interval < 0) {
interval = 0;
}
timer.args[1] = interval;
}
// recreate
function callback() {
if (timer.cb) {
timer.cb.apply(window, arguments);
if (!repeat) {
delete map[virtualId];
timer.cb = null;
}
}
}
timer.args[0] = callback;
timer.created = Date.now();
timer.id = set.apply(window, timer.args);
}
window.setTimeout = function () {
return createTimer(orgSetTimeout, timeouts, arguments);
};
window.setInterval = function () {
return createTimer(orgSetInterval, intervals, arguments);
};
window.clearTimeout = function (id) {
var timer = timeouts[id];
if (timer) {
delete timeouts[id];
orgClearTimeout(timer.id);
}
};
window.clearInterval = function (id) {
var timer = intervals[id];
if (timer) {
delete intervals[id];
orgClearInterval(timer.id);
}
};
//check and add listener on the top window if loaded on frameset/iframe
var win = window;
while (win.location != win.parent.location) {
win = win.parent;
}
win.addEventListener('scroll', function () {
// recreate the timers using adjusted intervals
// we cannot know how long the scroll-freeze lasted, so we cannot take that into account
var virtualId;
for (virtualId in timeouts) {
resetTimer(orgSetTimeout, orgClearTimeout, timeouts, virtualId);
}
for (virtualId in intervals) {
resetTimer(orgSetInterval, orgClearInterval, intervals, virtualId);
}
});
}(window));
</script>
相关文章：
- 如何使jQuery插件函数可调用以供独立使用，而不在集合上操作
- Jquery菜单操作不稳定，定位不正确，存在一般错误
- 错误“由于与数据库无关的原因，操作失败..“，在 Firefox 中使用 indexedDB 时
- Visual Studio 中的 Ripple Emulator:252px 后 style.top 操作失败
- 验证码失败显示警报，但表单自动提交如何停止此操作
- 如何将 $http.put 封装到一个函数中，该函数执行某些操作，然后返回通过或失败的承诺
- 反应+通量:通知视图/组件操作失败
- 如何在 $ 中执行异步操作.延迟，然后失败过滤回调并传递回成功链
- 要防止回发失败，请执行以下操作: isValid=“undefined”
- 在复选框中存储表单操作URL'的值，并且使用该URL发出AJAX请求会导致无法解释的失败
- 在Firefox扩展中的输入文件元素上单击操作失败
- 使用obj.style.marginTop获取页边空白顶部失败，但如果首先显式设置了marginTop，则该操作有效
- MVC:使用javascript设置操作名称失败
- MVC3控制器操作以编程方式返回一个失败的发布请求
- 在Rails中，如何在视图中显示控制器操作成功或失败的JSON状态消息
- 如何在Dynamics CRM 2013中保存操作失败时获取客户端错误详细信息
- Chrome连接websocket服务器失败(操作码-1)“握手被取消”
- Json的Url.在新的MVC 5应用程序中操作失败
- 按位操作容易在运行时typescript失败
- FB滑动操作失败
