1

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>
4

0 に答える 0