Showing with 34 additions and 2 deletions.
  1. +5 −0 css/structure/jquery.mobile.navbar.css
  2. +27 −0 demos/navbar/index.php
  3. +1 −1 js/buttonMarkup.js
  4. +1 −1 js/widgets/navbar.js
5 css/structure/jquery.mobile.navbar.css
View file
@@ -25,6 +25,11 @@
margin: 0;
border-right-width: 0;
}
.ui-header .ui-navbar li button.ui-btn,
.ui-footer .ui-navbar li button.ui-btn {
margin: 0;
width: 100%;
}
.ui-navbar .ui-btn:focus {
z-index: 1;
}
27 demos/navbar/index.php
View file
@@ -293,6 +293,33 @@
</div><!-- /footer -->
</div><!--/demo-html -->

<h2>Navbars with button elements</h2>

<p>Instead of links you can also use button elements inside navbars.</p>

<div data-demo-html="true">
<div data-role="navbar" data-iconpos="left">
<ul>
<li><button data-icon="home">One</button></li>
<li><button data-icon="grid" data-theme="b">Two</button></li>
<li><button data-icon="search">Three</button></li>
</ul>
</div><!-- /navbar -->
</div><!--/demo-html -->

<div data-demo-html="true">
<div data-role="header" style="overflow:hidden;">
<h1>I'm a header</h1>
<div data-role="navbar" data-iconpos="right">
<ul>
<li><button data-icon="home">One</button></li>
<li><button data-icon="grid" data-theme="b">Two</button></li>
<li><button data-icon="search">Three</button></li>
</ul>
</div><!-- /navbar -->
</div><!-- /header -->
</div><!--/demo-html -->

</div><!-- /content -->

<?php include( '../jqm-navmenu.php' ); ?>
2 js/buttonMarkup.js
View file
@@ -259,7 +259,7 @@ $.fn.buttonMarkup.defaults = {
};

$.extend( $.fn.buttonMarkup, {
initSelector: "a:jqmData(role='button'), .ui-bar > a, .ui-bar > :jqmData(role='controlgroup') > a, button"
initSelector: "a:jqmData(role='button'), .ui-bar > a, .ui-bar > :jqmData(role='controlgroup') > a, button:not(:jqmData(role='navbar') button)"
});

})( jQuery );
2 js/widgets/navbar.js
View file
@@ -18,7 +18,7 @@ $.widget( "mobile.navbar", {
_create: function() {

var $navbar = this.element,
$navbtns = $navbar.find( "a" ),
$navbtns = $navbar.find( "a, button" ),
iconpos = $navbtns.filter( ":jqmData(icon)" ).length ? this.options.iconpos : undefined;

$navbar.addClass( "ui-navbar" )