jquery mobile - навигация по истории на динамических страницах - PullRequest
Новая
       33

jquery mobile - навигация по истории на динамических страницах

1 голос
/ 18 марта 2012

У меня есть мобильное приложение, которое я создаю на jqm.

Оно состоит из одной страницы, которая динамически обновляется новым контентом при нажатии на ссылку.Разбор URL и логика происходит в $(document).bind( "pagebeforechange").То, что я хочу сделать, это иметь пользовательскую историю назад, обновить, переслать и т.д. Я добавил класс истории ниже и то, что происходит.Я в основном сохраняю функцию, которая приносит новый контент в стек, и вызываю его, когда возвращаюсь, щелкает обновление.

У меня проблемы с объяснением вопроса, поэтому я собираюсь поставить ссылку на приложение, и вы можете увидетьчто происходит, когда вы щелкаете мышью по представлению списка и пытаетесь нажать кнопку «Назад» Мобильное приложение

Как видно, при нажатии кнопки «Назад» все на странице исчезает.Как я могу реализовать пользовательскую историю в jqm? 

$(document).bind( "pagebeforechange", function( e, data ) {
    if ( typeof data.toPage === "string" ) { 
        var u = $.mobile.path.parseUrl( data.toPage ),
        re = /^#wallmsg_page/;
        re1 = /^#public_post_page/;
        $.mobile.showPageLoadingMsg();
        var $page = $( '#index_page' );
        if ( u.hash.search(re) !== -1 ) {

            window.nHistory.add(function ()
            {
                var edata=data;
                var eu=u;
                var $epage=$page;
                console.log(data.toPage);
                showPublicPost( eu, edata.options );
                $epage.page();
                edata.options.dataUrl = eu.href;
                edata.options.transition = 'flip';
                $.mobile.changePage( $epage, edata.options );                        
            });
            window.nHistory.getStack()[(window.nHistory.getStack().length-1)]();
            e.preventDefault();
        } else
            if ( u.hash.search(re1) !== -1 ) {
            var edata=data;
            window.nHistory.add(function ()
            {                
                var edata=data;
                var eu=u;
                var $epage=$page;

                showNextPage(eu,edata.options);
                $epage.page();
                edata.options.dataUrl = eu.href;
                edata.options.transition = 'flip';
                $.mobile.changePage( $epage, edata.options );                        
            });
            window.nHistory.getStack()[(window.nHistory.getStack().length-1)]();
            e.preventDefault(); 
        }
        //console.log(window.nHistory.getStack());
    }
});

//implement history
var Stack = function () {
    var stack = [];
    this.add = function (cFunc) {
        stack.push(cFunc);
        return this;
    };
    this.get = function () {
        return stack.pop();
    };
    this.size = function () {
        return stack.length;
    };
    this.isEmpty = function () {
        return (stack.length == 0);
    };
    this.getStack = function () {
        return stack;
    };
};
window.nHistory = new Stack();
var moveBack = function () {
    if (!(window.nHistory.isEmpty())) {
        var c = window.nHistory.get();
        c();
    } else {
        goHome();
    }
}
var refreshPage = function () {
    window.nHistory.getStack()[(window.nHistory.getStack().length-1)]();
}
...