2014-01-07 2 views
1

Одна кнопка должна перенаправляться либо на страницу AAA, либо на страницу BBB. Это решение должно зависеть от выбора кнопок на странице раньше.jQuery mobile: запомнить переменную страницы до

Страница 1: #home

  • Кнопка А: ссылки на #setpage
  • Кнопка B: ссылки на #setpage

Страница 2: #setpage

  • Вход: пользователь может установить что-то
  • Кнопка: только одна кнопка (ссылки на страницы #AAA или страницы #BBB)

Page 3: #AAA

  • пользователя должен быть здесь, если кнопка A нажата на странице 1

или

Page 4: #BBB

  • Пользователь должен быть здесь, если кнопка B нажал на Page 1

Я думаю, я могу сделать это с LocalStorage моего телефон/браузер (я использую jQM + PhoneGap), но это лучшее решение или есть лучший способ?

+0

Я бы справиться с этим сервером через сеанс пользователя. Просто сохраните текущую страницу и предыдущую страницу. Когда вы переключаетесь, текущая страница становится предыдущей страницей и записывается новая текущая страница. – tymeJV

+0

Привет. Но мне не нужна предыдущая страница. Моя текущая страница должна знать, какая кнопка была нажата на предыдущей странице :) – Maddy

ответ

1

Если это одностраничное приложение, вы можете просто переключить HREF кнопки setpage при нажатии на кнопки A и B на главной странице.

Вот DEMO

$(document).on("pageinit", "#Home", function(){ 
    $('.btnAB').on("click", function(e){ 
     var id = $(this).prop("id"); 
     if (id === 'btnB'){ 
      $('#btnSetpage').prop('href', '#BBB'); 
     } else { 
      $('#btnSetpage').prop('href', '#AAA'); 
     } 
    }); 
}); 

Сценарий выше обрабатывает событие щелчка 2 кнопки (они имеют один и тот же класс). Он видит, какая кнопка была нажата, а затем устанавливает href одной кнопки на установочной странице.

<div data-role="page" id="Home"> 
    <div data-role="header"> 
     <h1>Home</h1> 
    </div> 
    <div data-role="content"> 
     <a class="btnAB" id="btnA" href="#setpage" data-role="button">A</a> 
     <a class="btnAB" id="btnB" href="#setpage" data-role="button">B</a> 
    </div> 
</div> 

<div data-role="page" id="setpage"> 
    <div data-role="header"> 
     <h1>setpage</h1> 
    </div> 
    <div data-role="content"> 
     <a id="btnSetpage" href="#AAA" data-role="button">Submit</a> 
    </div> 
</div> 

<div data-role="page" id="AAA"> 
    <div data-role="header"> 
     <h1>AAA</h1> 
    </div> 
    <div data-role="content"> 
     I am AAA 
     <a href="#Home" data-role="button">Home</a> 
    </div> 
</div> 

<div data-role="page" id="BBB"> 
    <div data-role="header"> 
     <h1>BBB</h1> 
    </div> 
    <div data-role="content"> 
     I am BBB 
     <a href="#Home" data-role="button">Home</a> 
    </div> 
</div> 
+0

Спасибо за ваше решение :) Как вы думаете, это лучше, чем localStorage? – Maddy

+0

На мой взгляд, для одностраничного приложения это проще и не требует дополнительной функции браузера (localStorage). – ezanker

2

В дополнении к ответу @ezanker «s, вы можете получить все детали, связанные с щелкнутыми кнопками, а также предыдущего и следующих страниц pagebeforechange события.

$(document).on("pagebeforechange", function (event, data) 

Эти данные могут быть получены из данных объекта.Например, данные с нажатыми/связанными кнопками извлекаются из объекта . предыдущий страница data.options.fromPage, и следующий страница data.toPage.

Это событие дважды срабатывает при переходе, для текущей страницы и страницы, на которую она движется.

$(document).on("pagebeforechange", function (e, data) { 
    /* when webpage is first initialized, .link and .toPage are undefined */ 
    if (data.options.link && data.toPage) { 
    if (data.toPage[0].id == "setpage") { 
     var button = data.options.link[0].text; 
     /* for demo */ 
     $("#setpage [data-role=content]").html("Clicked button: " + button); 
    } 
    } 
}); 

Demo

Смежные вопросы