Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-04-24 16:14:44 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

a little refactor to improve support for icons, text-only, among other things. Demo page has 3 different globalnav variations now.

Browse source
This commit is contained in:
scottjehl 2010-10-04 12:50:25 -04:00
parent 00e68353fa
commit 2e4c537783
3 changed files with 67 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
_globalnav.html
View file

@ -11,15 +11,41 @@
<div data-role="header">
<h1>Global Nav Example</h1>
<a href="index.html" class="ui-back" data-icon="arrow-l">Home</a>
<div data-role="globalnav">
<ul>
<li><a href="_containers-states.html">Containers</a></li>
<li><a href="_fixed.html">Toolbars dasfs</a></li>
<li><a href="_form-controls.html">Forms</a></li>
<li><a href="_dialog.html" data-transition="pop" data-rel="dialog">Dialog</a></li>
<li><a href="_listview.html">Listview</a></li>
<li><a href="_events.html">Events</a></li>
<li><a href="_transitions.html">Transitions</a></li>
</ul>
</div>
</div>
<div data-role="content" class=" ui-body ui-body-b">
<h1>Demo description</h1>
<p>This page includes a globalnav plugin, which will fix to the footer as a tabbed navigation, and persist as pages switch out behind it.</p>
<p>This page includes a examples of the globalnav plugin, which can be called on a div containing a UL.</p>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Globalnav in the content:</h2>
<div data-role="globalnav">
<ul>
<li><a href="_containers-states.html">Containers</a></li>
<li><a href="_fixed.html">Toolbars dasfs</a></li>
<li><a href="_form-controls.html">Forms</a></li>
<li><a href="_dialog.html" data-transition="pop" data-rel="dialog">Dialog</a></li>
<li><a href="_listview.html">Listview</a></li>
<li><a href="_events.html">Events</a></li>
<li><a href="_transitions.html">Transitions</a></li>
</ul>
</div>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
@ -88,15 +114,15 @@
<div data-role="footer">
<div data-role="globalnav">
<ul>
<li><a href="_containers-states.html">Containers</a></li>
<li><a href="_fixed.html">Toolbars</a></li>
<li><a href="_form-controls.html">Forms</a></li>
<li><a href="_dialog.html" data-transition="pop" data-rel="dialog">Dialog</a></li>
<li><a href="_listview.html">Listview</a></li>
<li><a href="_events.html">Events</a></li>
<li><a href="_transitions.html">Transitions</a></li>
</ul>
<ul>
<li><a href="_containers-states.html" data-icon="arrow-u">Containers</a></li>
<li><a href="_fixed.html" data-icon="arrow-u">Toolbars dasfs</a></li>
<li><a href="_form-controls.html" data-icon="arrow-u">Forms</a></li>
<li><a href="_dialog.html" data-transition="pop" data-rel="dialog" data-icon="arrow-u">Dialog</a></li>
<li><a href="_listview.html" data-icon="arrow-u">Listview</a></li>
<li><a href="_events.html" data-icon="arrow-u">Events</a></li>
<li><a href="_transitions.html" data-icon="arrow-u">Transitions</a></li>
</ul>
</div>
</div>

20
css/jQuery.mobile.globalnav.css
View file

@ -3,14 +3,24 @@
* Copyright (c) jQuery Project
* Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
*/
.ui-globalnav { overflow: hidden; }
.ui-globalnav { overflow: hidden; }
.ui-globalnav ul, .ui-globalnav-expanded ul { list-style:none; padding: 0; margin: 0; position: relative; display: block; border: 0;}
.ui-globalnav-collapsed ul { float: left; width: 75%; }
.ui-globalnav-collapsed ul { float: left; width: 75%; margin-right: -2px; }
.ui-globalnav-collapsed .ui-globalnav-toggle { float: left; width: 25%; }
.ui-globalnav li.ui-globalnav-truncate { position: absolute; left: -99999px; top: -99999px; }
.ui-globalnav li .ui-btn, .ui-globalnav .ui-globalnav-toggle .ui-btn { display: block; font-size: 12px; text-align: center; margin: 0 -1px; outline: none; border-top-width: 0; border-bottom-width: 0; }
.ui-globalnav .ui-btn-inner { padding-left: 15px; padding-right: 15px; }
.ui-globalnav li .ui-btn, .ui-globalnav .ui-globalnav-toggle .ui-btn { display: block; font-size: 12px; text-align: center; margin: 0; outline: none; border-right-width: 0; }
.ui-globalnav li .ui-btn { margin-right: -1px; }
.ui-globalnav li .ui-btn:last-child { margin-right: 0; }
.ui-header .ui-globalnav li .ui-btn, .ui-header .ui-globalnav .ui-globalnav-toggle .ui-btn,
.ui-footer .ui-globalnav li .ui-btn, .ui-footer .ui-globalnav .ui-globalnav-toggle .ui-btn { border-top-width: 0; border-bottom-width: 0; }
.ui-globalnav .ui-btn-inner { padding-left: 2px; padding-right: 2px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.ui-globalnav-noicons li .ui-btn .ui-btn-inner, .ui-globalnav-noicons .ui-globalnav-toggle .ui-btn-inner { padding-top: .8em; padding-bottom: .9em; }
/*expanded page styles*/
.ui-globalnav-expanded .ui-btn { margin: 0; font-size: 14px; }
.ui-globalnav-expanded .ui-btn-inner { padding-left: 5px; padding-right: 5px; }
.ui-globalnav-expanded .ui-btn-icon-top .ui-btn-inner { padding: 45px 5px 15px; text-align: center; }
.ui-globalnav-expanded .ui-btn-icon-top .ui-icon { top: 15px; }
.ui-globalnav-expanded .ui-btn-icon-top .ui-icon { top: 15px; }
.ui-globalnav-expanded .ui-btn-icon-bottom .ui-btn-inner { padding: 15px 5px 45px; text-align: center; }
.ui-globalnav-expanded .ui-btn-icon-bottom .ui-icon { bottom: 15px; }
.ui-globalnav-expanded li .ui-btn .ui-btn-inner { min-height: 2.5em; }
.ui-globalnav-expanded .ui-globalnav-noicons .ui-btn .ui-btn-inner { padding-top: 1.8em; padding-bottom: 1.9em; }

22
js/jQuery.mobile.globalnav.js
View file

@ -9,12 +9,20 @@ $.fn.globalnav = function(settings){
return $(this).each(function(){
var o = $.extend({
moreText: 'More...'
moreText: 'More',
iconPos: $(this).data('iconPos') || 'top',
transition: $(this).data('transition') || 'slideup'
},settings);
//wrap it with footer classes
var $globalnav = $(this).addClass('ui-globalnav'),
numTabs = $globalnav.find('li').length;
numTabs = $globalnav.find('li').length,
moreIcon = $globalnav.find('a[data-icon]').length ? 'arrow-r' : null;
if( moreIcon == null ){
o.iconPos = null;
$globalnav.add( $globalnav.children(0) ).addClass('ui-globalnav-noicons');
}
$globalnav
.find('ul')
@ -22,14 +30,14 @@ $.fn.globalnav = function(settings){
if(numTabs > 3 ){
var moreId = o.thisId + "&" + jQuery.mobile.subPageUrlKey + "=globalnav",
$navToggle = $('<a href="#'+ moreId +'" data-transition="slideup">' + o.moreText + '</a>'),
$navToggle = $('<a href="#'+ moreId +'" data-transition="'+ o.transition +'">' + o.moreText + '</a>'),
$truncatedLis = $globalnav.find('li:gt(2)'),
$newPage = $('<div id="'+ moreId +'" class="ui-page ui-globalnav-expanded ui-body-a"><div data-role="header"><h1>' + o.moreText + '</h1></div><div data-role="content"></div></div>'),
$newPageContent = $globalnav.find('ul').clone();
$newPageContent
.find('a')
.buttonMarkup({iconPos: 'top', shadow: false, corners: false, theme: 'a', icon: 'arrow-r'})
.buttonMarkup({shadow: false, corners: false, iconPos: o.iconPos});
$newPage.append( $newPageContent ).appendTo('body');
@ -38,16 +46,18 @@ $.fn.globalnav = function(settings){
.parent()
.appendTo($globalnav);
$navToggle.buttonMarkup({corners: false, iconPos: 'top', icon: 'arrow-r'});
$navToggle.buttonMarkup({corners: false, shadow:false, iconPos: o.iconPos, icon: moreIcon});
$globalnav.addClass('ui-globalnav-collapsed');
$truncatedLis.addClass('ui-globalnav-truncate');
}
$globalnav
.find('ul a')
.buttonMarkup({corners: false, iconPos: 'top', icon: 'arrow-u'})
.buttonMarkup({corners: false, shadow:false, iconPos: o.iconPos})
.bind('tap',function(){
//NOTE: we'll need to find a way to highlight an active tab at load as well
$globalnav.find('.ui-btn-active').removeClass('ui-btn-active');