MoleskineNotebook обновление страницы

Тема в разделе "JavaScript", создана пользователем мир, 15 авг 2012.

Статус темы:
Закрыта.
Модераторы: ZiX
  1. мир

    мир Постоялец

    Регистр.:
    15 мар 2008
    Сообщения:
    83
    Симпатии:
    5
    В прикрепленном скрипте можно перелистывать страницы, но при нажатии F5, перебрасывает на первую страницу.

    Как сделать, чтобы при нажатии F5 оставаться на той странице которую я смотрю?
     

    Вложения:

  2. dino

    dino

    Регистр.:
    28 май 2009
    Сообщения:
    550
    Симпатии:
    204
    Вам нужно передать в функцию booklet параметр startingPage содержащий номер последней просмотренной страницы (строка 243 в файле index.html)
    Удобнее всего для этого наверное использовать cookie. При перелистывании записывать в куки номер страницы, а при перезагрузке вытягивать этот параметр в функцию..
     
  3. мир

    мир Постоялец

    Регистр.:
    15 мар 2008
    Сообщения:
    83
    Симпатии:
    5
    Если не сложно, напиши пожалуйста подробно как это сделать?
     
  4. antiterror

    antiterror xProgramming

    Регистр.:
    22 авг 2007
    Сообщения:
    344
    Симпатии:
    135
    У меня тоже как то эта проблема была, и решил довольно быстро.
    Для начало вам нужен "jquery.cookie.js", нужно подключить в HEAD, найди можно здесь.

    Конечно нужно будет немного переписать свой код в js, это значит что после click нужно вписывать номер слайдера в куки:
    $.cookie( "startingPage", 1 ); - 1 это номер слайдера или в вашем случай страницы.
    удалить куки можно так:
    $.cookie( "startingPage", null );

    ну и получаем номер страницу при нажатии на F5;
    $(function(){
    if( $.cookie("startingPage") == "1" ) {
    //показываем страницу
    } else {
    //первая страница
    }
    });

    Код всё равно придётся дописать, если не получится, могу вечером посмотреть...
    Кстати здесь описывается как работает куки.
     
  5. мир

    мир Постоялец

    Регистр.:
    15 мар 2008
    Сообщения:
    83
    Симпатии:
    5
    Что-то у меня ни чего не получилось...
    Если не сложно посмотри пожалуйста!!!!!!!!!!
     
  6. antiterror

    antiterror xProgramming

    Регистр.:
    22 авг 2007
    Сообщения:
    344
    Симпатии:
    135
    Думаю что и не получится, так как что бы реализовать задуманное вами, нужно переписать сам плагин jquery.booklet.
    1: так как нам нужно работать с страницами нужно для каждого div создать свой id и желательно с номером. пример: <div id="content_1">текст</div><div id="content_2">текст</div>
    2: дальше нужно в jquery.booklet написать код так что бы при нажатии на next переходил на следующий div но уже используя id+номер и после чего нужно номер страницы в кики.
    3: при вызове плагина сделать проверку на куки и если кики есть то вызывать номер страницы.

    Так же вспомним ещё один способ, но это уже через url идёт, типо так: index.html#page=1, но здесь опять нужно переписывать плагин booklet.
     
  7. dino

    dino

    Регистр.:
    28 май 2009
    Сообщения:
    550
    Симпатии:
    204
    Боюсь вы не до конца изучили плагин booklet... изначально номер стартовой страницы берется из параметра startingPage передаваемого из index.html
    далее при клике на кнопки вперед или назад срабатывает функция gotoPage в которой номер страницы пересчитывается и записывается в переменную opts.curr Вот её и нужно передать после срабатывания функции в куки, а в index.html проверять наличие данной куки и подставлять её значение в параметр startingPage
     
    antiterror нравится это.
  8. antiterror

    antiterror xProgramming

    Регистр.:
    22 авг 2007
    Сообщения:
    344
    Симпатии:
    135
    Да ты прав, не досмотрел вчера до конца, ну спасибо тебе.

    HTML:
            <script type="text/javascript">
    function setCurrCockie(num){
        $.cookie( 'startingPage', num );
    };
                $(function() {
    var setStartPage    = 0;
    if( $.cookie('startingPage') ){
        setStartPage    = $.cookie('startingPage');
    }
                    var $mybook        = $('#mybook');
                    var $bttn_next        = $('#next_page_button');
                    var $bttn_prev        = $('#prev_page_button');
                    var $loading        = $('#loading');
                    var $mybook_images    = $mybook.find('img');
                    var cnt_images        = $mybook_images.length;
                    var loaded            = 0;
                    $mybook_images.each(function(){
                        var $img    = $(this);
                        var source    = $img.attr('src');
                        $('<img/>').load(function(){
                            ++loaded;
                            if(loaded == cnt_images){
                                $loading.hide();
                                $bttn_next.show();
                                $bttn_prev.show();
                                $mybook.show().booklet({
                                    name:              null,
                                    width:              800,
                                    height:            500,
                                    speed:              600,
                                    direction:          'LTR',
    startingPage:      setStartPage,
                                    easing:            'easeInOutQuad',
                                    easeIn:            'easeInQuad',
                                    easeOut:            'easeOutQuad',
                                    closed:            true,
                                    closedFrontTitle:  null,
                                    closedFrontChapter: null,
                                    closedBackTitle:    null,
                                    closedBackChapter:  null,
                                    covers:            false,
                                    pagePadding:        10,
                                    pageNumbers:        true,
                                    hovers:            false,   
                                    overlays:          false,
                                    tabs:              false,   
                                    tabWidth:          60,     
                                    tabHeight:          20, 
                                    arrows:            false,
                                    cursor:            'pointer',
                                    hash:              false,
                                    keyboard:          true,
                                    next:              $bttn_next,
                                    prev:              $bttn_prev,
                                    menu:              null,
                                    pageSelector:      false,
                                    chapterSelector:    false,
                                    shadows:            true,
                                    shadowTopFwdWidth:  166,
                                    shadowTopBackWidth: 166,
                                    shadowBtmWidth:    50,
                                    before:            function(){},
    after:            function(obj){ setCurrCockie(obj.curr) }
                                });
                                Cufon.refresh();
                            }
                        }).attr('src',source);
                    });
                });
            </script>
    Там один косяк остался, но не знаю с чем это связано. Место того что бы кидать на страницу с куки он кидает на последнею страницу.
     
    мир нравится это.
  9. dino

    dino

    Регистр.:
    28 май 2009
    Сообщения:
    550
    Симпатии:
    204
    В куки передается строка! Нужно явно указать тип переменной:
    PHP:
    if( $.cookie('startingPage') ){
        
    setStartPage    parseInt($.cookie('startingPage'));
    }
    однако это работает в опере, хром напрочь не принимает куки :( ... разбираемсо...
     
    мир и antiterror нравится это.
  10. antiterror

    antiterror xProgramming

    Регистр.:
    22 авг 2007
    Сообщения:
    344
    Симпатии:
    135
    была идея, но пока смотрел код забыл даже, спасибо за подправку.
    А у на счёт хром, я как понял в хроме много чаго локально не работает, какой то странный браузе. Одним словом скрипт работает на хроме, только если скрипт находится на сервере или денвере. Так что загрузите на хостинг и посмотрите на работоспособность.

    Тест скрипта:
    Firefox 14 = успешно
    Chrom 21 = успешно
    IE 9 = успешно
     
    dino нравится это.
Статус темы:
Закрыта.