jQuery mobile: remember variable of page before

后端 未结 2 1356
野性不改
野性不改 2021-01-24 02:11

One button should redirect either to page AAA or to page BBB. This decision should depend on the choice of the buttons on the page before.

Page 1: #home

相关标签:
2条回答
  • 2021-01-24 03:06

    If this is a single page app, you could just switch the HREF of the setpage button when clicking the A and B buttons on the home page.

    Here is a 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');
            }
        });
    });
    

    The script above handles the click event of the 2 buttons (they have the same class). It sees which button was clicked and then sets the href of the one button on the setpage.

    <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 讨论(0)
  • 2021-01-24 03:07

    In addition to @ezanker's answer, you can retrieve all details related to the clicked button as well as previous and next pages on pagebeforechange event.

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

    Those details can be obtained from data object. For example, clicked / linked button details are retrieved from data.options.link object. previous page data.options.fromPage, and next page data.toPage.

    This event fires twice on transition, for the current page and the page it's moving to.

    $(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

    0 讨论(0)
提交回复
热议问题