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

renamed navlist to navbar.

Browse source 
Fixes #117
This commit is contained in:
scottjehl 2010-10-08 23:26:04 -04:00
parent db9f34e92a
commit 702173eaae
7 changed files with 5 additions and 236 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

136
_navlist.html
View file

@ -1,136 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Framework - navlist Example</title>
<link rel="stylesheet" media="only all" href="css/all" />
<script type="text/javascript" src="js/all"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Navlist Example</h1>
<div data-role="navlist">
<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 examples of the navlist 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>navlist in the content:</h2>
<div data-role="navlist">
<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>
</ol>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
<h1>HTML Ipsum Presents</h1>
<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>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
<h1>HTML Ipsum Presents</h1>
<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 data-role="footer">
<div data-role="navlist">
<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>
</div>
</body>
</html>

26
css/jquery.mobile.navlist.css
View file

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

2
css/manifest.php
View file

@ -5,7 +5,7 @@ $elements = array(
'jquery.mobile.transitions.css',
'jquery.mobile.grids.css',
'jquery.mobile.headerfooter.css',
'jquery.mobile.navlist.css',
'jquery.mobile.navbar.css',
'jquery.mobile.button.css',
'jquery.mobile.collapsible.css',
'jquery.mobile.controlgroup.css',

4
index.html
View file

@ -19,8 +19,8 @@
<li><a href="_fixed.html">Fixed Toolbars</a></li>
<li><a href="_footer-persist.html">Persistent Footer</a></li>
<li><a href="_form-controls.html">Form Controls</a></li>
<li><a href="_navlist.html">Navlist</a></li>
<li><a href="experiments/navlist-glyphish/">Navlist - Glyphish Icons Example</a></li>
<li><a href="_navbar.html">Navbar</a></li>
<li><a href="experiments/navbar-glyphish/">Navbar - Glyphish Icons Example</a></li>
<li><a href="_dialog.html" data-transition="pop" data-rel="dialog">Dialog</a></li>
<li><a href="_listview.html">List View</a></li>
<li><a href="_filter.html">Filterable List View</a></li>

2
js/jquery.mobile.js
View file

@ -371,7 +371,7 @@
break;
case 'collapsible':
case 'fieldcontain':
case 'navlist':
case 'navbar':
case 'listview':
case 'dialog':
case 'ajaxform':

69
js/jquery.mobile.navlist.js
View file

@ -1,69 +0,0 @@
/*
* jQuery Mobile Framework : prototype for "navlist" plugin
* Copyright (c) jQuery Project
* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
* Note: Code is in draft form and is subject to change
*/
(function($){
$.fn.navlist = function(settings){
return $(this).each(function(){
var o = $.extend({
moreText: 'More',
iconpos: $(this).data('iconpos') || 'top',
transition: $(this).data('transition') || 'slideup'
},settings);
//wrap it with footer classes
var $navlist = $(this).addClass('ui-navlist'),
numTabs = $navlist.find('li').length,
moreIcon = $navlist.find('a[data-icon]').length ? 'arrow-r' : null;
if( moreIcon == null ){
o.iconpos = null;
$navlist.add( $navlist.children(0) ).addClass('ui-navlist-noicons');
}
$navlist
.find('ul')
.grid({grid: numTabs > 2 ? 'b' : 'a'})
if(numTabs > 3 ){
var moreId = o.thisId + "&" + jQuery.mobile.subPageUrlKey + "=navlist",
$navToggle = $('<a href="#'+ moreId +'" data-transition="'+ o.transition +'">' + o.moreText + '</a>'),
$truncatedLis = $navlist.find('li:gt(2)'),
$newPage = $('<div id="'+ moreId +'" class="ui-page ui-navlist-expanded ui-body-a"><div data-role="header"><h1>' + o.moreText + '</h1></div><div data-role="content"></div></div>'),
$newPageContent = $navlist.find('ul').clone();
$newPageContent
.find('a')
.buttonMarkup({shadow: false, corners: false, iconpos: o.iconpos});
$newPage.append( $newPageContent ).appendTo('body');
$navToggle
.wrap('<div class="ui-navlist-toggle"></div>')
.parent()
.appendTo($navlist);
$navToggle.buttonMarkup({corners: false, shadow:false, iconpos: o.iconpos, icon: moreIcon});
$navlist.addClass('ui-navlist-collapsed');
$truncatedLis.addClass('ui-navlist-truncate');
}
$navlist
.find('ul a')
.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
$navlist.find('.ui-btn-active').removeClass('ui-btn-active');
$(this).addClass('ui-btn-active');
});
});
};
})(jQuery);

2
js/manifest.php
View file

@ -21,7 +21,7 @@ $elements = array(
'jquery.mobile.listview.js',
'jquery.mobile.listview.filter.js',
'jquery.mobile.dialog.js',
'jquery.mobile.navlist.js',
'jquery.mobile.navbar.js',
'jquery.mobile.grid.js',
'jquery.mobile.js'
);