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

Commit

Permalink
Merge 6c6816a into 0e5eaff
Browse files Browse the repository at this point in the history
  • Loading branch information
@cgack
cgack committed Oct 16, 2015
2 parents 0e5eaff + 6c6816a commit 6f21d24
Show file tree
Hide file tree
Showing 13 changed files with 692 additions and 171 deletions.
4 changes: 4 additions & 0 deletions build/tasks/options/jscs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,9 @@ module.exports = {
"js/widgets/listview.backcompat.js",
"js/widgets/listview.hidedividers.js",
"js/widgets/listview.js",
"js/widgets/navbar.js",
"js/widgets/navbar.backcompat.js",
"js/widgets/navbar.morebutton.js",

// Tests
"tests/integration/listview/autodividers_core.js",
Expand All @@ -69,6 +72,7 @@ module.exports = {
"tests/unit/rangeslider/*.js",
"tests/unit/toolbar/*.js",
"tests/unit/fixed-toolbar/*.js",
"tests/unit/navbar/*.js",
"tests/integration/fixed-toolbar/*.js",
"tests/integration/toolbar/*.js",
"tests/unit/dialog/dialog_count.js",
Expand Down
72 changes: 26 additions & 46 deletions css/structure/jquery.mobile.navbar.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,80 +10,60 @@
clear: both;
}
.ui-navbar ul {
list-style: none;
margin: 0;
padding: 0;
position: relative;
display: block;
border: 0;
max-width: 100%;
overflow: visible;
display: table;
table-layout:fixed;
width: 100%;
margin: 0;
}
.ui-navbar li {
display: table-cell;
width: 100%;
}
.ui-navbar li .ui-button {
font-size: 12.5px;
display: block;
width: 100%;
margin: 0;
border-right-width: 0;
box-sizing: border-box;
}
.ui-header .ui-navbar li button.ui-button,
.ui-footer .ui-navbar li button.ui-button {
.ui-toolbar-header .ui-navbar li button.ui-button,
.ui-toolbar-footer .ui-navbar li button.ui-button {
margin: 0;
width: 100%;
}
.ui-navbar .ui-button:focus {
z-index: 1;
}

.ui-navbar-row li .ui-button {
border-top-width: 0;
}
/* fixes gaps caused by subpixel problem */
.ui-navbar li:last-child .ui-button {
margin-right: -4px;
}
.ui-navbar li:last-child .ui-button:after {
margin-right: 4px;
}

.ui-content .ui-navbar li:last-child .ui-button,
.ui-content .ui-navbar .ui-grid-duo .ui-block-b .ui-button {
.ui-content .ui-navbar li .ui-button {
border-right-width: 0;
border-radius: 0;
}
.ui-content .ui-navbar li:last-child .ui-button {
border-right-width: 1px;
margin-right: 0;
}
.ui-content .ui-navbar li:last-child .ui-button:after,
.ui-content .ui-navbar .ui-grid-duo .ui-block-b .ui-button:after {
.ui-content .ui-navbar li:last-child .ui-button:after {
margin-right: 0;
}
.ui-navbar .ui-grid-duo .ui-block-a:last-child .ui-button {
border-right-width: 1px;
margin-right: -1px;
}
.ui-navbar .ui-grid-duo .ui-block-a:last-child .ui-button:after {
margin-right: 1px;
}

.ui-navbar .ui-grid-duo .ui-button {
border-top-width: 0;
}
.ui-navbar .ui-grid-duo .ui-block-a:first-child .ui-button,
.ui-navbar .ui-grid-duo .ui-block-a:first-child + .ui-block-b .ui-button {
border-top-width: 1px;
}
.ui-header .ui-navbar .ui-button,
.ui-footer .ui-navbar .ui-button {
.ui-toolbar-header .ui-navbar .ui-button,
.ui-toolbar-footer .ui-navbar .ui-button {
border-top-width: 0;
border-bottom-width: 0;
display: inline-block;
}
.ui-header .ui-navbar .ui-grid-duo .ui-block-a:first-child .ui-button,
.ui-footer .ui-navbar .ui-grid-duo .ui-block-a:first-child .ui-button,
.ui-header .ui-navbar .ui-grid-duo .ui-block-a:first-child + .ui-block-b .ui-button,
.ui-footer .ui-navbar .ui-grid-duo .ui-block-a:first-child + .ui-block-b .ui-button {
border-top-width: 0;
}
.ui-header .ui-title ~ .ui-navbar .ui-button,
.ui-footer .ui-title ~ .ui-navbar .ui-button,
.ui-header .ui-navbar .ui-grid-duo .ui-button,
.ui-footer .ui-navbar .ui-grid-duo .ui-button,
.ui-header .ui-title ~ .ui-navbar .ui-grid-duo .ui-block-a:first-child .ui-button,
.ui-footer .ui-title ~ .ui-navbar .ui-grid-duo .ui-block-a:first-child .ui-button,
.ui-header .ui-title ~ .ui-navbar .ui-grid-duo .ui-block-a:first-child + .ui-block-b .ui-button,
.ui-footer .ui-title ~ .ui-navbar .ui-grid-duo .ui-block-a:first-child + .ui-block-b .ui-button {
.ui-toolbar-header .ui-title ~ .ui-navbar .ui-button,
.ui-toolbar-footer .ui-title ~ .ui-navbar .ui-button {
border-top-width: 1px;
}
124 changes: 89 additions & 35 deletions demos/navbar/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@

<h1>Navbar <a href="http://api.jquerymobile.com/navbar/" class="jqm-api-docs-link ui-button ui-nodisc-icon ui-alt-icon ui-button-inline ui-corner-all ui-mini">API <span class="ui-icon ui-icon-caret-r"></span></a></h1>

<p>jQuery Mobile has a very basic navbar widget that is useful for providing up to 5 buttons with optional icons in a bar.</p>
<p>jQuery Mobile has a navbar widget that is useful for providing buttons with optional icons in a bar. The navbar can support any number of buttons resorting to multiple rows when the number of buttons exceeds the <code>maxbuttons</code> option. Alternatively, if you set the <code>morebutton</code> option you will turn the final button in the row into a popup that contains the remaining buttons</p>

<h2>Navbar basics</h2>

Expand Down Expand Up @@ -90,7 +90,7 @@
</div><!-- /navbar -->
</div><!--/demo-html -->

<p>The navbar maxes out with 5 items, each 1/5 the width of the browser window:</p>
<p>The navbar defaults to a maximum of 5 buttons, each 1/5 the width of the browser window:</p>

<div data-demo-html="true">
<div data-role="navbar" data-grid="d">
Expand All @@ -106,10 +106,36 @@

<h2>Multi-row</h2>

<p>If more than 5 items are added, the navbar will simply wrap to multiple lines of two across:</p>
<p>If more than the set <code>maxbutton</code> items are added, the navbar will smart wrap the items
n-across up to the value of the <code>maxbutton</code>option and then fill the remaining rows to full width:</p>

<div data-demo-html="true">
<div data-role="navbar">
<div data-role="navbar" data-maxbutton="5" >
<ul>
<li><a href="#" class="ui-button-active">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
<li><a href="#">Five</a></li>
<li><a href="#">Six</a></li>
<li><a href="#">Seven</a></li>
<li><a href="#">Eight</a></li>
<li><a href="#">Nine</a></li>
<li><a href="#">Ten</a></li>
<li><a href="#">Eleven</a></li>
<li><a href="#">Twelve</a></li>
<li><a href="#">Thirteen</a></li>
</ul>
</div><!-- /navbar -->
</div><!--/demo-html -->

<h2> Show More Button </h2>
<p>If more than the set <code>maxbutton</code> items are added and the <code>morebutton</code>
option is set to <code>true</code>, the navbar will add the extra items to a popup that
resides on the last button in the row of buttons</p>

<div data-demo-html="true">
<div data-role="navbar" data-maxbutton="5" data-morebutton="true">
<ul>
<li><a href="#" class="ui-button-active">One</a></li>
<li><a href="#">Two</a></li>
Expand All @@ -121,18 +147,46 @@
<li><a href="#">Eight</a></li>
<li><a href="#">Nine</a></li>
<li><a href="#">Ten</a></li>
<li><a href="#">Eleven</a></li>
<li><a href="#">Twelve</a></li>
<li><a href="#">Thirteen</a></li>
</ul>
</div><!-- /navbar -->
</div><!--/demo-html -->

<h2> Show More Button with icon</h2>
<p>If more than the set <code>maxbutton</code> items are added and the <code>morebutton</code>
option is set to <code>true</code>, the navbar will add the extra items to a popup that
resides on the last button in the row of buttons. An icon can be added by adding the
<code>data-morebuttonicon</code> attribute and specifying an icon</p>

<div data-demo-html="true">
<div data-role="navbar" data-maxbutton="5" data-morebutton="true" data-morebuttonicon="ui-icon-grid">
<ul>
<li><a data-icon="ui-icon-star" href="#" class="ui-button-active">One</a></li>
<li><a data-icon="ui-icon-star" href="#">Two</a></li>
<li><a data-icon="ui-icon-star" href="#">Three</a></li>
<li><a data-icon="ui-icon-star" href="#">Four</a></li>
<li><a data-icon="ui-icon-star" href="#">Five</a></li>
<li><a data-icon="ui-icon-star" href="#">Six</a></li>
<li><a data-icon="ui-icon-star" href="#">Seven</a></li>
<li><a data-icon="ui-icon-star" href="#">Eight</a></li>
<li><a data-icon="ui-icon-star" href="#">Nine</a></li>
<li><a data-icon="ui-icon-star" href="#">Ten</a></li>
<li><a data-icon="ui-icon-star" href="#">Eleven</a></li>
<li><a data-icon="ui-icon-star" href="#">Twelve</a></li>
<li><a data-icon="ui-icon-star" href="#">Thirteen</a></li>
</ul>
</div><!-- /navbar -->
</div><!--/demo-html -->
<h2>Navbars in headers</h2>

<p>If you want to add a navbar to the top of the page, you can still have a page title and buttons. Just add the navbar container inside the header block, right after the title and buttons in the source order.</p>

<div data-demo-html="true">
<div data-role="toolbar" data-type="header" style="overflow:hidden;">
<h1>I'm a header</h1>
<a href="#" data-icon="gear" class="ui-toolbar-header-button-right">Options</a>
<a href="#" data-icon="ui-icon-gear" class="ui-button-right">Options</a>
<div data-role="navbar">
<ul>
<li><a href="#">One</a></li>
Expand Down Expand Up @@ -172,9 +226,9 @@
<div data-role="toolbar" data-type="footer">
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="grid">Summary</a></li>
<li><a href="#" data-icon="star" class="ui-button-active">Favs</a></li>
<li><a href="#" data-icon="gear">Setup</a></li>
<li><a href="#" data-icon="ui-icon-grid">Summary</a></li>
<li><a href="#" data-icon="ui-icon-star" class="ui-button-active">Favs</a></li>
<li><a href="#" data-icon="ui-icon-gear">Setup</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
Expand All @@ -189,9 +243,9 @@
<div data-role="toolbar" data-type="footer">
<div data-role="navbar" data-iconpos="bottom">
<ul>
<li><a href="#" data-icon="grid">Summary</a></li>
<li><a href="#" data-icon="star" class="ui-button-active">Favs</a></li>
<li><a href="#" data-icon="gear">Setup</a></li>
<li><a href="#" data-icon="ui-icon-grid">Summary</a></li>
<li><a href="#" data-icon="ui-icon-star" class="ui-button-active">Favs</a></li>
<li><a href="#" data-icon="ui-icon-gear">Setup</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
Expand All @@ -203,9 +257,9 @@
<div data-role="toolbar" data-type="footer">
<div data-role="navbar" data-iconpos="left">
<ul>
<li><a href="#" data-icon="grid">Summary</a></li>
<li><a href="#" data-icon="star" class="ui-button-active">Favs</a></li>
<li><a href="#" data-icon="gear">Setup</a></li>
<li><a href="#" data-icon="ui-icon-grid">Summary</a></li>
<li><a href="#" data-icon="ui-icon-star" class="ui-button-active">Favs</a></li>
<li><a href="#" data-icon="ui-icon-gear">Setup</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
Expand All @@ -217,9 +271,9 @@
<div data-role="toolbar" data-type="footer">
<div data-role="navbar" data-iconpos="right">
<ul>
<li><a href="#" data-icon="grid">Summary</a></li>
<li><a href="#" data-icon="star" class="ui-button-active">Favs</a></li>
<li><a href="#" data-icon="gear">Setup</a></li>
<li><a href="#" data-icon="ui-icon-grid">Summary</a></li>
<li><a href="#" data-icon="ui-icon-star" class="ui-button-active">Favs</a></li>
<li><a href="#" data-icon="ui-icon-gear">Setup</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
Expand Down Expand Up @@ -255,11 +309,11 @@
<h3>Swatch "a"</h3>
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="grid">A</a></li>
<li><a href="#" data-icon="star">B</a></li>
<li><a href="#" data-icon="gear">C</a></li>
<li><a href="#" data-icon="arrow-l">D</a></li>
<li><a href="#" data-icon="arrow-r">E</a></li>
<li><a href="#" data-icon="ui-icon-grid">A</a></li>
<li><a href="#" data-icon="ui-icon-star">B</a></li>
<li><a href="#" data-icon="ui-icon-gear">C</a></li>
<li><a href="#" data-icon="ui-icon-arrow-l">D</a></li>
<li><a href="#" data-icon="ui-icon-arrow-r">E</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /container -->
Expand All @@ -270,11 +324,11 @@
<h3>Swatch "b"</h3>
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="grid">A</a></li>
<li><a href="#" data-icon="star">B</a></li>
<li><a href="#" data-icon="gear">C</a></li>
<li><a href="#" data-icon="arrow-l">D</a></li>
<li><a href="#" data-icon="arrow-r">E</a></li>
<li><a href="#" data-icon="ui-icon-grid">A</a></li>
<li><a href="#" data-icon="ui-icon-star">B</a></li>
<li><a href="#" data-icon="ui-icon-gear">C</a></li>
<li><a href="#" data-icon="ui-icon-arrow-l">D</a></li>
<li><a href="#" data-icon="ui-icon-arrow-r">E</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /container -->
Expand All @@ -286,8 +340,8 @@
<div data-role="toolbar" data-type="footer">
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="grid" data-theme="a">A</a></li>
<li><a href="#" data-icon="star" data-theme="b">B</a></li>
<li><a href="#" data-icon="ui-icon-grid" data-theme="a">A</a></li>
<li><a href="#" data-icon="ui-icon-star" data-theme="b">B</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
Expand All @@ -300,9 +354,9 @@
<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>
<li><button data-icon="ui-icon-home">One</button></li>
<li><button data-icon="ui-icon-grid" data-theme="b">Two</button></li>
<li><button data-icon="ui-icon-search">Three</button></li>
</ul>
</div><!-- /navbar -->
</div><!--/demo-html -->
Expand All @@ -312,9 +366,9 @@
<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>
<li><button data-icon="ui-icon-home">One</button></li>
<li><button data-icon="ui-icon-grid" data-theme="b">Two</button></li>
<li><button data-icon="ui-icon-search">Three</button></li>
</ul>
</div><!-- /navbar -->
</div><!-- /header -->
Expand Down
1 change: 0 additions & 1 deletion js/.jshintrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
"immed": true,
"jquery": true,
"noarg": true,
"onevar": true,
"quotmark": "double",
"smarttabs": true,
"trailing": true,
Expand Down
2 changes: 2 additions & 0 deletions js/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,8 @@
'widgets/collapsibleSet.js',
'grid.js',
'widgets/navbar.js',
'widgets/navbar.backcompat.js',
'widgets/navbar.morebutton.js',
'widgets/listview.js',
'widgets/listview.backcompat.js',
'widgets/listview.autodividers.js',
Expand Down
2 changes: 2 additions & 0 deletions js/jquery.mobile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,8 @@
"./widgets/collapsibleSet",
"./grid",
"./widgets/navbar",
"./widgets/navbar.backcompat",
"./widgets/navbar.morebutton",
"./widgets/listview",
"./widgets/listview.backcompat",
"./widgets/listview.autodividers",
Expand Down

0 comments on commit 6f21d24

Please sign in to comment.