jquery モバイルで使用するスワイプ ナビゲーションをセットアップしています。ナビゲーション ul (変数を使用して関数に渡される) に基づいて、次の URL と戻る URL を設定する関数を作成します。
この関数は、初期ロード時と、適切な $.mobile.changePage ajax 呼び出しの代わりに window.location を使用するときにうまく機能します。各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>