Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-03-16 22:10:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

rewrite of globalnav plugin. Anything beyond 3 links auto-generates a "more..." button and creates a fully navigable, scrollable page with all the links in a grid view.

Browse source
This commit is contained in:
scottjehl 2010-09-19 10:51:21 -04:00
parent 456d754a87
commit 08f1ec9bf8
3 changed files with 62 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
_globalnav.html
View file

@ -89,10 +89,13 @@
<div data-role="globalnav">
<ul>
<li><a href="_containers-states.html" data-role="button">Containers</a></li>
<li><a href="_form-controls.html" data-role="button">Forms</a></li>
<li><a href="_transitions.html" data-role="button">Transitions</a></li>
<li><a href="_events.html" data-role="button">Events</a></li>
<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>
</div>

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

@ -4,7 +4,16 @@
* Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
*/
.ui-globalnav { overflow: hidden; width: 100%; overflow: hidden; }
.ui-globalnav ul { list-style:none; padding: 0; margin: 0; position: relative; display: block; border: 0;}
.ui-globalnav li { float: left; margin:0; padding:0; }
.ui-globalnav li .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 li .ui-btn-inner { padding-left: 15px; padding-right: 15px; }
.ui-globalnav-disable { display: none; }
.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 .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-expanded .ui-btn { margin-left: 7px; margin-top: 7px; }
.ui-globalnav-expanded .ui-block-c .ui-btn { margin-right: 7px; }
.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; }

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

@ -10,24 +10,53 @@ $.fn.globalnav = function(settings){
if($(this).find('.ui-globalnav').length){ return; }
//remove any other globalnav currently present
$('.ui-globalnav').remove();
$('[data-role="globalnav"]:has(.ui-globalnav)').remove();
var o = $.extend({
fixedAs: 'footer'
fixedAs: 'footer',
moreText: 'More...',
thisId: $(this).parents('.ui-page').attr('id') + '-nav'
},settings);
//wrap it with footer classes
var $globalnav = $(this);
$globalnav
.wrapInner('<div class="ui-globalnav ui-bar-a"></div>')
.children(0)
.addClass(o.fixedAs == 'footer' ? 'ui-footer' : 'ui-header');
$(this)
.attr('id', o.thisId)
.wrapInner('<div class="ui-bar-a ' + (o.fixedAs == 'footer' ? 'ui-footer' : 'ui-header') + '"><div class="ui-globalnav"></div></div>');
//wrap it with footer classes
var $globalnav = $(this).find('.ui-globalnav'),
numTabs = $globalnav.find('li').length;
$globalnav
.find('ul')
.grid({grid: numTabs > 2 ? 'b' : 'a'})
if(numTabs > 3 ){
var moreId = o.thisId + '-more',
$navToggle = $('<a href="#'+ moreId +'" data-transition="slideup">' + o.moreText + '</a>'),
$truncatedLis = $globalnav.find('li:gt(2)'),
$newPage = $('<div id="'+ moreId +'" class="ui-page ui-globalnav-expanded ui-body-a"><div class="ui-header"><h1>' + o.moreText + '</h1></div><div class="ui-content"></div></div>'),
$newPageContent = $globalnav.find('ul').clone();
$newPageContent
.find('a')
.buttonMarkup({iconPos: 'top', theme: 'b', icon: 'arrow-r'})
$newPage.append( $newPageContent ).appendTo('body');
$navToggle
.wrap('<div class="ui-globalnav-toggle"></div>')
.parent()
.appendTo($globalnav);
$navToggle.buttonMarkup({corners: false, iconPos: 'top', icon: 'arrow-r'});
$globalnav.addClass('ui-globalnav-collapsed');
$truncatedLis.addClass('ui-globalnav-truncate');
}
//set up the nav tabs widths (currently evenly divided widths, to be improved later)
$globalnav
.find('ul')
.grid({grid: $globalnav.find('li').length > 2 ? 'b' : 'a'})
.find('a')
.find('ul a')
.buttonMarkup({corners: false, iconPos: 'top', icon: 'arrow-u'})
.bind('tap',function(){
//NOTE: we'll need to find a way to highlight an active tab at load as well
@ -35,10 +64,9 @@ $.fn.globalnav = function(settings){
$(this).addClass('ui-btn-active');
});
$globalnav
$(this)
.appendTo('body')
.fixHeaderFooter();
});
};
})(jQuery);