FB滑动动作失败

时间:2013-01-11 17:58:11

标签: javascript action swipe

与此相关 wrapper function bracketing 问题

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>

1 个答案:

答案 0 :(得分:0)

在你的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>