StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>there is a context loading option in splitview. Why not use this? </p> <p>I can't find the sample page anymore, but I'm using the same logic in my script, so... if you can't find it, try something like this:</p> <p>1) give your links context attributes:</p> <pre><code><a href="#some" data-panel="menu" data-context="#otherPage" data-context-panel="main">click me</a> </code></pre> <p>2) Listen for clicks on these context links like so:</p> <pre><code>$(document).bind( "click", function( event ) { console.log("click registered"); var link = $( self.findClosestLink(event.target) ); if ( !link || event.which > 1) { return; } console.log( link ); console.log( link.jqmData('context') ); // context routine fires with context links if ( link.length === 1 && link.jqmData('context') ) { // fire your context function, RENAME THIS console.log("firing context routine"); self.context( link ); } </code></pre> <p>3) Put a context function somewhere:</p> <pre><code> context: function( object ) { var self = this, $context = object, $targetPanelID = $context.jqmData('context-panel'); console.log("contextpage="+$context.href+" contextPanel="+targetPanelID); // make sure the pageContainer is correctly set for the 2nd transition $.mobile.pageContainer = $('div:jqmData(panel="'+$targetPanelID+'")'); // context changePage $.mobile.changePage( $( $context.jqmData('context') ), { transition:'slide', changeHash:true, fromHashChange: false, pageContainer: $.mobile.pageContainer }); }; </code></pre> <p>4) Add the JQM findclosestLink function (I forgot)</p> <pre><code> findClosestLink: function (ele) { var self = this; while (ele){ if (ele.nodeName.toLowerCase() == "a"){ break; } ele = ele.parentNode; return ele; } </code></pre> <p>Your link will fire the first changePage, your context function will fire the second changePage. Depending on where you use this, your context changePage call will also trigger another hashChange event, which JQM may not block (every changePage also fires a hashChange which is blocked by JQM using <strong>ignoreNextHashChange</strong> - check the source). </p> <p>So you may have to do something like this after making your second call to ensure the hashChange is blocked:</p> <pre><code> $.mobile.ignoreNextHashChange = true; </code></pre> <p>The whole thing is working inside my <a href="http://www.stokkers.mobi/valuables/multiview/show/index.html" rel="nofollow">multiview</a> plugin, BUT the plugin is not finished, buggy and I haven't had the time to work on it lately. Context is working though, so you might just pull it out and use it as you need. </p> <p>Cheers! </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