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

refactored. globalnavs can now be generated on any div, and all they do is the "more" nav behavior. Plugin may need renaming...

Browse source 
in these demos, the globalnavs are inside a footer div.
This commit is contained in:
scottjehl 2010-10-01 23:37:43 -04:00
parent ed96011a28
commit 22eecd11dc
4 changed files with 18 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
_globalnav-glyphish.html
View file

@ -102,7 +102,8 @@
</div>
<div data-role="globalnav" class="nav-glyphish-example">
<div data-role="footer" class="nav-glyphish-example">
<div data-role="globalnav" class="nav-glyphish-example">
<ul>
<li><a href="_containers-states.html" id="chat">Chat</a></li>
<li><a href="_fixed.html" id="email">Email</a></li>
@ -111,6 +112,7 @@
<li><a href="_listview.html" id="coffee">Coffee</a></li>
<li><a href="_events.html" id="beer">Beer</a></li>
</ul>
</div>
</div>
</div>

16
_globalnav.html
View file

@ -87,16 +87,18 @@
</div>
<div data-role="globalnav">
<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>
<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>
</div>
</div>

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

@ -3,8 +3,7 @@
* Copyright (c) jQuery Project
* Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
*/
.ui-globalnav { overflow: hidden; width: 100%; overflow: hidden; }
.ui-globalnav-disable { display: none; }
.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 .ui-globalnav-toggle { float: left; width: 25%; }

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

@ -6,24 +6,14 @@
*/
(function($){
$.fn.globalnav = function(settings){
return $(this).each(function(){ //there should only ever be one of these... is each necessary?
if($(this).find('.ui-globalnav').length){ return; }
//remove any other globalnav currently present
$('[data-role="globalnav"]:has(.ui-globalnav)').remove();
return $(this).each(function(){
var o = $.extend({
fixedAs: 'footer',
moreText: 'More...',
thisId: $(this).parents('.ui-page').attr('id')
moreText: 'More...'
},settings);
$(this)
.attr('id', o.thisId + '-globalnav')
.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'),
var $globalnav = $(this).addClass('ui-globalnav'),
numTabs = $globalnav.find('li').length;
$globalnav
@ -63,10 +53,7 @@ $.fn.globalnav = function(settings){
$globalnav.find('.ui-btn-active').removeClass('ui-btn-active');
$(this).addClass('ui-btn-active');
});
$(this)
.appendTo('body')
.fixHeaderFooter();
});
};
})(jQuery);