StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Basically you have two history "pots" you need to tamper with. Browser and JQM. </p> <p><strong>JQM urlHistory</strong><br> You can modify JQMs urlHistory very easily. From the JQM code:</p> <pre><code>urlHistory = { // Array of pages that are visited during a single page load. // Each has a url and optional transition, title, and pageUrl // (which represents the file path, in cases where URL is obscured, such as dialogs) stack: [], // maintain an index number for the active page in the stack activeIndex: 0, // get active getActive: function () { return urlHistory.stack[urlHistory.activeIndex]; }, getPrev: function () { return urlHistory.stack[urlHistory.activeIndex - 1]; }, getNext: function () { return urlHistory.stack[urlHistory.activeIndex + 1]; }, // addNew is used whenever a new page is added addNew: function (url, transition, title, pageUrl, role) { // if there's forward history, wipe it if (urlHistory.getNext()) { urlHistory.clearForward(); } urlHistory.stack.push({ url: url, transition: transition, title: title, pageUrl: pageUrl, role: role }); urlHistory.activeIndex = urlHistory.stack.length - 1; }, //wipe urls ahead of active index clearForward: function () { urlHistory.stack = urlHistory.stack.slice(0, urlHistory.activeIndex + 1); } }; </code></pre> <p>So all of the above functions are available and can be called like this for example:</p> <pre><code>$.mobile.urlHistory.clearForward(); </code></pre> <p>To monitor your history, put this somewhere and listen for pageChange (once transitions are done) to see what is inside the urlHistory:</p> <pre><code>$(document).on('pagechange', 'div:jqmData(role="page")', function(){ console.log($.mobile.urlHistory.stack); }); </code></pre> <p>From there you can start to see what should be in the history and clean it up as you need. </p> <p>I'm using this a lot for my own navigation layer to modify what is stored in the urlHistory and what should not be stored. Sync-ing with the browser is the difficult part...</p> <p><strong>On sync-ing with the browser:</strong><br> In my navigation layer I'm only removing double entries from the urlHistory, so there is always a page to go to (and not two), when you click the browser back button. In your case, you will presumable have 4 entries in the browser history, but if you remove 2 entries from JQM urlHistory, you will have <strong>two pages "not to got to"</strong> when the back button is clicked. So if your browser history looks like this:</p> <pre><code>www.google.com www.somePage.com www.YOUR_APP.com = page1 page2 page3 page4 </code></pre> <p>And your remove <em>page2</em> and <em>page3</em>, clicking back-button should result in:</p> <pre><code>1st back-click = page4 > page1 2nd back-click = page1 > www.somePage.com [because you removed page3] 3rd back-click = www.somePage.com > www.google.com [because you removed page2] </code></pre> <p>A theoretical workaround would be: </p> <ol> <li>keep a counter how "deep" you go into a page</li> <li>remove pages from JQM urlHistory and get a "jump" value = counter-removedPages</li> <li>on next browser back click, do jump x window.history(back) and only let one JQM transition pass. You url will unwind page4>page3>page2>page1 in one step and you only allow JQM to do a single transition from page4 to page1</li> <li>check what's in the urlHistory and clean up after your "triple back" </li> </ol> <p>Beware this is <strong>not an optimal solution</strong> and you have to consider a lot of things (user clicks somewhere else before going back etc). I tried forever to get something like this to work in a more complicated setup and eventually just stopped using it, because it never worked as it should. But for a simpler setup it may very well work. </p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload