Databases
StackOverflow2013
Postsdbo
POReplace Content Only with Navbar
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POReplace Content Only with Navbar
    primarykey
    data
    text
    <p>I've been searching how to replace content with navbar, and I found this site : <a href="http://matthewturland.com/2012/08/18/nested-content-with-navbars-using-jquery-mobile/" rel="nofollow">Nested Content with Navbars using jQuery Mobile</a>, &amp; completely can't understand how's the javascript works. yes, I'm a newbie in this field.</p> <p>so, somehow he managed to create content like <a href="http://i.imgur.com/P5qnK.gif" rel="nofollow">this</a> with this code :</p> <pre><code>&lt;div data-role="page"&gt; &lt;div data-role="header"&gt; &lt;div data-role="navbar"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#one" class="ui-btn-active ui-btn-persist"&gt;One&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#two"&gt;Two&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#three"&gt;Three&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;div data-role="content"&gt; &lt;div id="one"&gt;One content&lt;/div&gt; &lt;div id="two"&gt;Two content&lt;/div&gt; &lt;div id="three"&gt;Three content&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>and</p> <pre><code>(function($) { // Before handling a page change... $(document).bind("pagebeforechange", function(e, data) { // If the new page is not being loaded by URL, bail if (typeof data.toPage !== "string") { return; } // If the new page has a corresponding navbar link, activate its content div var url = $.mobile.path.parseUrl(data.toPage); var $a = $("div[data-role='navbar'] a[href='" + url.hash + "']"); if ($a.length) { // Suppress normal page change handling since we're handling it here for this case e.preventDefault(); } // If the new page has a navbar, activate the content div for its active item else { $a = $(url.hash + " div[data-role='navbar']").find("a.ui-btn-active"); // Allow normal page change handling to continue in this case so the new page finishes rendering } // Show the content div to be activated and hide other content divs for this page var $content = $($a.attr("href")); $content.siblings().hide(); $content.show(); }); })(jQuery); </code></pre> <p>I was going to create 3 contents with my navbars, and here's my code :</p> <pre><code>&lt;div data-role="navbar" data-iconpos="bottom"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#one" id="home" data-transition="fade" data-theme="" data-icon="home" class="ui-btn-active"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#two" id="vmap" data-transition="fade" data-theme="" data-icon="star"&gt;V-Map&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#three" id="login" data-transition="fade" data-theme="" data-icon="check"&gt;Login&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;div data-role="content" align="center" style="margin:2em 1em 2em 1em;"&gt; &lt;div id="one"&gt;First Content&lt;/div&gt; &lt;div id="two"&gt;Second Content&lt;/div&gt; &lt;div id="three"&gt;Third Content&lt;/div&gt; &lt;/div&gt; </code></pre> <p>I don't have a previous page like the sample gave, can anyone help me with the javascript?</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USHikmah Az
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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