Skip to content
This repository was archived by the owner on Oct 8, 2021. It is now read-only.

Fixes issue #2425: Set navbar buttons to the active state #4411

Closed
wants to merge 2 commits into from
Closed

Fixes issue #2425: Set navbar buttons to the active state #4411

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0d34943
auto add ui-state-persist class to buttons with class ui-btn-active
jaspermdegroot May 20, 2012
8004610
change info in docs about manually adding class ui-state-persist
jaspermdegroot May 20, 2012
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/toolbars/footer-persist-a.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ <h3>More in this section</h3>
<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="footer-persist-a.html" data-prefetch="true" class="ui-btn-active ui-state-persist">Friends</a></li>
<li><a href="footer-persist-a.html" data-prefetch="true" class="ui-btn-active">Friends</a></li>
<li><a href="footer-persist-b.html" data-prefetch="true">Albums</a></li>
<li><a href="footer-persist-c.html" data-prefetch="true">Emails</a></li>
<li><a href="footer-persist-d.html" data-prefetch="true" data-transition="slideup">Info</a></li>
Expand Down
2 changes: 1 addition & 1 deletion docs/toolbars/footer-persist-b.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@ <h3>More in this section</h3>
<div data-role="navbar">
<ul>
<li><a href="footer-persist-a.html" data-prefetch="true">Friends</a></li>
<li><a href="footer-persist-b.html" data-prefetch="true" class="ui-btn-active ui-state-persist">Albums</a></li>
<li><a href="footer-persist-b.html" data-prefetch="true" class="ui-btn-active">Albums</a></li>
<li><a href="footer-persist-c.html" data-prefetch="true">Emails</a></li>
<li><a href="footer-persist-d.html" data-prefetch="true" data-transition="slideup">Info</a></li>
</ul>
Expand Down
2 changes: 1 addition & 1 deletion docs/toolbars/footer-persist-c.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ <h3>More in this section</h3>
<ul>
<li><a href="footer-persist-a.html" data-prefetch="true">Friends</a></li>
<li><a href="footer-persist-b.html" data-prefetch="true">Albums</a></li>
<li><a href="footer-persist-c.html" data-prefetch="true" class="ui-btn-active ui-state-persist">Emails</a></li>
<li><a href="footer-persist-c.html" data-prefetch="true" class="ui-btn-active">Emails</a></li>
<li><a href="footer-persist-d.html" data-prefetch="true" data-transition="slideup">Info</a></li>
</ul>
</div><!-- /navbar -->
Expand Down
8 changes: 4 additions & 4 deletions docs/toolbars/footer-persist-d.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,15 +36,15 @@ <h2>About persistent toolbars</h2>
&lt;li&gt;&lt;a href=&quot;a.html&quot;&gt;Friends&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;b.html&quot;&gt;Albums&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;c.html&quot;&gt;Emails&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;d.html&quot; &gt;Info&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;d.html&quot;&gt;Info&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;&lt;!-- /navbar --&gt;
&lt;/div&gt;&lt;!-- /footer --&gt;
</code></pre>
<p>To set the active state of an item in a persistent toolbar, add a class of <code>ui-state-persist</code> in addition to <code>ui-btn-active</code> to the corresponding anchor.</p>
<p>To set one of the navbar buttons to the active (selected) state, add <code>class="ui-btn-active"</code> to the corresponding anchor.</p>

<pre><code>
&lt;li&gt;&lt;a href=&quot;d.html&quot; <strong>class=&quot;ui-btn-active ui-state-persist&quot;</strong>&gt;Info&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;d.html&quot; <strong>class=&quot;ui-btn-active&quot;</strong>&gt;Info&lt;/a&gt;&lt;/li&gt;
</code></pre>

<h3>A note about transitions</h3>
Expand Down Expand Up @@ -81,7 +81,7 @@ <h3>More in this section</h3>
<li><a href="footer-persist-a.html" data-prefetch="true">Friends</a></li>
<li><a href="footer-persist-b.html" data-prefetch="true">Albums</a></li>
<li><a href="footer-persist-c.html" data-prefetch="true">Emails</a></li>
<li><a href="footer-persist-d.html" data-prefetch="true" data-transition="slideup" class="ui-btn-active ui-state-persist">Info</a></li>
<li><a href="footer-persist-d.html" data-prefetch="true" data-transition="slideup" class="ui-btn-active">Info</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
Expand Down
4 changes: 3 additions & 1 deletion js/jquery.mobile.navbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,8 @@ $.widget( "mobile.navbar", $.mobile.widget, {
if ( !iconpos ) {
$navbar.addClass( "ui-navbar-noicons" );
}

$navbtns.filter( ".ui-btn-active" ).addClass( "ui-state-persist" );

$navbtns.buttonMarkup({
corners: false,
Expand All @@ -49,7 +51,7 @@ $.widget( "mobile.navbar", $.mobile.widget, {

// Buttons in the navbar with ui-state-persist class should regain their active state before page show
$navbar.closest( ".ui-page" ).bind( "pagebeforeshow", function() {
$navbtns.filter( ".ui-state-persist" ).addClass( $.mobile.activeBtnClass );
$navbtns.removeClass( $.mobile.activeBtnClass ).filter( ".ui-state-persist" ).addClass( $.mobile.activeBtnClass );
});
}
});
Expand Down