mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-04-29 02:14:44 +00:00
fixed up globalnav.js plugin and demo page. This could potentially replace the tabs plugin...
CSS updates for globalnav styling. small changes to mobile.js to make globalNav demo init once at domready, not per ui-page.
This commit is contained in:
scottjehl
parent
3a41a8711f
commit
eb2805f9d9
4 changed files with 35 additions and 34 deletions
|
|
@ -15,23 +15,8 @@
|
|||
</div>
|
||||
|
||||
<div class="ui-content ui-body ui-body-b">
|
||||
|
||||
<ul data-role="globalnav">
|
||||
<li><a href="_containers-states.html" data-role="button">Containers & states</a></li>
|
||||
<li><a href="_fixed.html" data-role="button">Fixed Toolbars</a></li>
|
||||
<li><a href="_form-controls.html" data-role="button">Form Controls</a></li>
|
||||
<li><a href="_tabs.html" data-role="button" rel="external">Tabs</a></li>
|
||||
<li><a href="_tree.html" data-role="button">Tree</a></li>
|
||||
<li><a href="_transitions.html" data-role="button">Transitions</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<h1>Demo description</h1>
|
||||
|
||||
<p>This page demonstrates the behavior for the tabs control. The tab navigation can either be inline with the content (for tabs within sub-sections of a page), or optionally as a global fixed footer for page-level tabs. This page demonstrates the latter. It uses the fixed toolbars behavior, which allows you to display the tabs when you need them by tapping the screen.</p>
|
||||
<p>Also, the page header is a standard fixed toolbar that can bring you back to the previous page when you toggle its visibility.</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>
|
||||
|
||||
|
|
@ -97,12 +82,22 @@
|
|||
<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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="ui-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>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -223,10 +223,10 @@ div.ui-checkbox, div.ui-radio { position:relative; margin: .2em 0 .5em; }
|
|||
.ui-tabs-body div.ui-tabs-panel-selected { display:block; }
|
||||
|
||||
/*globalnav*/
|
||||
.ui-globalnav { overflow: hidden; width: 100%; }
|
||||
.ui-globalnav ul { list-style:none; padding: 0; margin: 0; position: relative; display: block; border: 0; float: left; width: 2000px; }
|
||||
.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 { font-size: 12px; text-align: center; margin: 0 -1px 0 0; outline: none; border-top-width: 0; border-bottom-width: 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; }
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -6,21 +6,26 @@
|
|||
*/
|
||||
(function($){
|
||||
$.fn.globalnav = function(settings){
|
||||
return $(this).each(function(){
|
||||
//configurable options
|
||||
var o = $.extend({},settings);
|
||||
|
||||
var globalnav = $(this).wrap('<div class="ui-globalnav"></div>');
|
||||
return $(this).each(function(){ //there should only ever be one of these... is each necessary?
|
||||
|
||||
//wrap it with footer classes
|
||||
var globalnav = $(this).wrap('<div class="ui-footer ui-bar-a"></div>');
|
||||
|
||||
globalnav.find('a').buttonMarkup({corners: false, iconPos: 'top', icon: 'arrow-u'});
|
||||
//apply fixed footer markup to ui-footer
|
||||
$(document).fixHeaderFooter();
|
||||
|
||||
var pageFooter = globalnav.parents('.ui-page:eq(0)').find('.ui-footer');
|
||||
if( !pageFooter.length ){
|
||||
pageFooter = $('<div class="ui-footer ui-bar-a"></div>').appendTo(globalnav.parents('.ui-page:eq(0)'));
|
||||
}
|
||||
//set up the nav tabs widths (currently evenly divided widths, to be improved later)
|
||||
var navtabs = globalnav.find('li');
|
||||
navtabs.width(100/navtabs.length+'%');
|
||||
|
||||
//add to footer
|
||||
globalnav.prependTo(pageFooter);
|
||||
//apply state on click and at load
|
||||
//NOTE: we'll need to find a way to highlight an active tab at load as well
|
||||
navtabs.find('a')
|
||||
.buttonMarkup({corners: false, iconPos: 'top', icon: 'arrow-u'})
|
||||
.bind('tap',function(){
|
||||
navtabs.find('.ui-btn-active').removeClass('ui-btn-active');
|
||||
$(this).addClass('ui-btn-active');
|
||||
});
|
||||
});
|
||||
};
|
||||
})(jQuery);
|
||||
|
|
@ -284,8 +284,6 @@
|
|||
$el.find('select').customSelect();
|
||||
//tabs
|
||||
$el.find('[data-role="tabs"]').tabs({fixedAsFooter:true});
|
||||
//global nav
|
||||
$el.find('[data-role="globalnav"]').globalnav();
|
||||
//fix toolbars
|
||||
$el.fixHeaderFooter();
|
||||
//buttons from links in headers,footers,bars, or with data-role
|
||||
|
|
@ -363,6 +361,9 @@
|
|||
});
|
||||
|
||||
hideBrowserChrome();
|
||||
|
||||
//global nav
|
||||
$('.ui-globalnav').globalnav();
|
||||
|
||||
//mobilize all pages present
|
||||
mobilize($('.ui-page'));
|
||||
|
|
|
|||
Loading…
Reference in a new issue