我正在设置滑动导航以与 jquery mobile 一起使用。我创建了一个基于导航 ul 设置下一个和后退 url 的函数(使用变量传递到函数中)。
该函数在初始加载和使用 window.location 而不是正确的 $.mobile.changePage ajax 调用时效果很好。有没有办法在每次 ajax 页面加载后重置此函数的变量,以便它具有正确的路径。
我在每个页面的 data-role="page" 元素中调用它,但变量仍在加载时传递。
function swipeNav(targetList){
/* Setup Nav array - links and IDs */
var navIDs = new Array();
var navLinks = new Array();
var nextPage = 0;
var pervPage = 0;
/* Setup Nav array with links and ids */
$(targetList + ' li').each(function(){
navIDs.push($(this).find('a').attr('id'));
navLinks.push($(this).find('a').attr('href'));
});
/* Get current nav item based on location path */
var currentURL = window.location.pathname;
var htmlPage = currentURL.split('/');
var currentPage = $.inArray(htmlPage[htmlPage.length-1], navLinks);
if(currentURL == "/"){
currentPage = 0;
}
/* Get number of nav items, prepare for navigation loop */
var navLoop = navLinks.length;
/* Sets next & prev page number based on current URL path */
nextPage = currentPage + 1;
prevPage = currentPage - 1;
/* Add swipe support for navigation / based on navigation items */
$('body').live('swipeleft swiperight',function(event){
if (event.type == "swipeleft") {
if(nextPage == navLoop){ $.mobile.changePage(navLinks[0]); }
else{ $.mobile.changePage(navLinks[nextPage]); } /* If last page of nav, loop to page 1 */
}
if (event.type == "swiperight") {
if(prevPage < 0){ $.mobile.changePage(navLinks[navLoop - 1]); }
else{ $.mobile.changePage(navLinks[prevPage]); } /* If first page of nav, loop to last page */
}
});
}
这是每个页面中对该函数的调用
<div id="page-load" data-role="page" data-theme="a">
<script type='text/javascript' src='js/swipenav.js'></script>
<script>
$(document).ready(function() {
swipeNav('ul.nav-links');
});
</script>