added demo with glyphish icons

2026-04-12 18:31:02 +00:00 · 2010-09-19 12:08:20 -04:00 · 2010-09-19 12:08:20 -04:00 · 0395289c76
commit 0395289c76
parent 458e7b5d2f
132 changed files with 136 additions and 0 deletions
--- a/_globalnav-glyphish.html
+++ b/_globalnav-glyphish.html
@ -0,0 +1,123 @@
+<?php /*gzip page*/ ob_start("ob_gzhandler"); ?>
+<!DOCTYPE html> 
+<html> 
+	<head> 
+	<title>jQuery Mobile Framework - GlobalNav Example</title> 
+	<link rel="stylesheet" type="text/css" href="css/all" /> 
+	<script type="text/javascript" src="js/all"></script>
+</head> 
+<body> 
+
+<div data-role="page">
+	<style type="text/css">	
+		.nav-glyphish-example .ui-btn .ui-btn-inner { padding-top: 40px !important; }
+		.ui-globalnav-expanded ul .ui-btn .ui-btn-inner { padding-top: 55px !important; }
+		.nav-glyphish-example .ui-btn .ui-icon, .ui-globalnav-expanded ul .ui-btn .ui-icon { width: 30px!important; height: 30px!important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: none !important; border-radius: none !important; }
+		.ui-globalnav-expanded ul .ui-btn .ui-icon { top: 20px; }
+		#chat .ui-icon { background:  url(/images/glyphish/09-chat2.png) 50% 50% no-repeat; }
+		#email .ui-icon { background:  url(/images/glyphish/18-envelope.png) 50% 50% no-repeat; }
+		.nav-glyphish-example .ui-globalnav-toggle .ui-icon { background:  url(/images/glyphish/19-gear.png) 50% 50% no-repeat !important; }
+		#login .ui-icon { background:  url(/images/glyphish/30-key.png) 50% 50% no-repeat; }
+		#beer .ui-icon { background:  url(/images/glyphish/88-beermug.png) 50% 50% no-repeat; }
+		#coffee .ui-icon { background:  url(/images/glyphish/100-coffee.png) 50% 50% no-repeat; }
+		#clock .ui-icon { background:  url(/images/glyphish/11-clock.png) 50% 50% no-repeat; }
+	</style>
+
+
+	<div class="ui-header">
+		<h1>Global Nav Example</h1>
+		<a href="index.html" class="ui-back" data-icon="arrow-l">Home</a>
+	</div>
+	
+	<div class="ui-content 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><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>
+						
+						<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="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>
+			<li><a href="_form-controls.html"  id="clock">Clock</a></li>
+			<li><a href="_dialog.html" data-transition="pop" data-rel="dialog"  id="login">Login</a></li>
+			<li><a href="_listview.html"  id="coffee">Coffee</a></li>
+			<li><a href="_events.html" id="beer">Beer</a></li>
+		</ul>
+	</div>
+
+</div>	
+
+
+
+
+
+</body>
+</html>
--- a/images/glyphish/01-refresh.png
+++ b/images/glyphish/01-refresh.png
--- a/images/glyphish/02-redo.png
+++ b/images/glyphish/02-redo.png
--- a/images/glyphish/03-loopback.png
+++ b/images/glyphish/03-loopback.png
--- a/images/glyphish/04-squiggle.png
+++ b/images/glyphish/04-squiggle.png
--- a/images/glyphish/05-shuffle.png
+++ b/images/glyphish/05-shuffle.png
--- a/images/glyphish/06-magnifying-glass.png
+++ b/images/glyphish/06-magnifying-glass.png
--- a/images/glyphish/07-map-marker.png
+++ b/images/glyphish/07-map-marker.png
--- a/images/glyphish/08-chat.png
+++ b/images/glyphish/08-chat.png
--- a/images/glyphish/09-chat2.png
+++ b/images/glyphish/09-chat2.png
--- a/images/glyphish/10-medical.png
+++ b/images/glyphish/10-medical.png
--- a/images/glyphish/100-coffee.png
+++ b/images/glyphish/100-coffee.png
--- a/images/glyphish/101-gameplan.png
+++ b/images/glyphish/101-gameplan.png
--- a/images/glyphish/102-walk.png
+++ b/images/glyphish/102-walk.png
--- a/images/glyphish/103-map.png
+++ b/images/glyphish/103-map.png
--- a/images/glyphish/104-index-cards.png
+++ b/images/glyphish/104-index-cards.png
--- a/images/glyphish/105-piano.png
+++ b/images/glyphish/105-piano.png
--- a/images/glyphish/106-sliders.png
+++ b/images/glyphish/106-sliders.png
--- a/images/glyphish/107-widescreen.png
+++ b/images/glyphish/107-widescreen.png
--- a/images/glyphish/108-badge.png
+++ b/images/glyphish/108-badge.png
--- a/images/glyphish/109-chicken.png
+++ b/images/glyphish/109-chicken.png
--- a/images/glyphish/11-clock.png
+++ b/images/glyphish/11-clock.png
--- a/images/glyphish/110-bug.png
+++ b/images/glyphish/110-bug.png
--- a/images/glyphish/111-user.png
+++ b/images/glyphish/111-user.png
--- a/images/glyphish/112-group.png
+++ b/images/glyphish/112-group.png
--- a/images/glyphish/113-navigation.png
+++ b/images/glyphish/113-navigation.png
--- a/images/glyphish/114-balloon.png
+++ b/images/glyphish/114-balloon.png
--- a/images/glyphish/115-bow-and-arrow.png
+++ b/images/glyphish/115-bow-and-arrow.png
--- a/images/glyphish/116-controller.png
+++ b/images/glyphish/116-controller.png
--- a/images/glyphish/117-todo.png
+++ b/images/glyphish/117-todo.png
--- a/images/glyphish/118-coathanger.png
+++ b/images/glyphish/118-coathanger.png
--- a/images/glyphish/119-piggybank.png
+++ b/images/glyphish/119-piggybank.png
--- a/images/glyphish/12-eye.png
+++ b/images/glyphish/12-eye.png
--- a/images/glyphish/120-headphones.png
+++ b/images/glyphish/120-headphones.png
--- a/images/glyphish/121-lanscape.png
+++ b/images/glyphish/121-lanscape.png
--- a/images/glyphish/122-stats.png
+++ b/images/glyphish/122-stats.png
--- a/images/glyphish/123-id-card.png
+++ b/images/glyphish/123-id-card.png
--- a/images/glyphish/124-bullhorn.png
+++ b/images/glyphish/124-bullhorn.png
--- a/images/glyphish/125-food.png
+++ b/images/glyphish/125-food.png
--- a/images/glyphish/126-moon.png
+++ b/images/glyphish/126-moon.png
--- a/images/glyphish/127-sock.png
+++ b/images/glyphish/127-sock.png
--- a/images/glyphish/128-bone.png
+++ b/images/glyphish/128-bone.png
--- a/images/glyphish/129-golf.png
+++ b/images/glyphish/129-golf.png
--- a/images/glyphish/13-target.png
+++ b/images/glyphish/13-target.png
--- a/images/glyphish/130-dice.png
+++ b/images/glyphish/130-dice.png
--- a/images/glyphish/14-tag.png
+++ b/images/glyphish/14-tag.png
--- a/images/glyphish/15-tags.png
+++ b/images/glyphish/15-tags.png
--- a/images/glyphish/16-line-chart.png
+++ b/images/glyphish/16-line-chart.png
--- a/images/glyphish/17-bar-chart.png
+++ b/images/glyphish/17-bar-chart.png
--- a/images/glyphish/18-envelope.png
+++ b/images/glyphish/18-envelope.png
--- a/images/glyphish/19-gear.png
+++ b/images/glyphish/19-gear.png
--- a/images/glyphish/20-gear2.png
+++ b/images/glyphish/20-gear2.png
--- a/images/glyphish/21-skull.png
+++ b/images/glyphish/21-skull.png
--- a/images/glyphish/22-skull-n-crossbones.png
+++ b/images/glyphish/22-skull-n-crossbones.png
--- a/images/glyphish/23-bird.png
+++ b/images/glyphish/23-bird.png
--- a/images/glyphish/24-gift.png
+++ b/images/glyphish/24-gift.png
--- a/images/glyphish/25-weather.png
+++ b/images/glyphish/25-weather.png
--- a/images/glyphish/26-bandaid.png
+++ b/images/glyphish/26-bandaid.png
--- a/images/glyphish/27-planet.png
+++ b/images/glyphish/27-planet.png
--- a/images/glyphish/28-star.png
+++ b/images/glyphish/28-star.png
--- a/images/glyphish/29-heart.png
+++ b/images/glyphish/29-heart.png
--- a/images/glyphish/30-key.png
+++ b/images/glyphish/30-key.png
--- a/images/glyphish/31-ipod.png
+++ b/images/glyphish/31-ipod.png
--- a/images/glyphish/32-iphone.png
+++ b/images/glyphish/32-iphone.png
--- a/images/glyphish/33-cabinet.png
+++ b/images/glyphish/33-cabinet.png
--- a/images/glyphish/34-coffee.png
+++ b/images/glyphish/34-coffee.png
--- a/images/glyphish/35-shopping-bag.png
+++ b/images/glyphish/35-shopping-bag.png
--- a/images/glyphish/36-toolbox.png
+++ b/images/glyphish/36-toolbox.png
--- a/images/glyphish/37-suitcase.png
+++ b/images/glyphish/37-suitcase.png
--- a/images/glyphish/38-airplane.png
+++ b/images/glyphish/38-airplane.png
--- a/images/glyphish/39-spraycan.png
+++ b/images/glyphish/39-spraycan.png
--- a/images/glyphish/40-inbox.png
+++ b/images/glyphish/40-inbox.png
--- a/images/glyphish/41-picture-frame.png
+++ b/images/glyphish/41-picture-frame.png
--- a/images/glyphish/42-photos.png
+++ b/images/glyphish/42-photos.png
--- a/images/glyphish/43-film-roll.png
+++ b/images/glyphish/43-film-roll.png
--- a/images/glyphish/44-shoebox.png
+++ b/images/glyphish/44-shoebox.png
--- a/images/glyphish/45-movie1.png
+++ b/images/glyphish/45-movie1.png
--- a/images/glyphish/46-movie2.png
+++ b/images/glyphish/46-movie2.png
--- a/images/glyphish/47-fuel.png
+++ b/images/glyphish/47-fuel.png
--- a/images/glyphish/48-fork-and-knife.png
+++ b/images/glyphish/48-fork-and-knife.png
--- a/images/glyphish/49-battery.png
+++ b/images/glyphish/49-battery.png
--- a/images/glyphish/50-beaker.png
+++ b/images/glyphish/50-beaker.png
--- a/images/glyphish/51-outlet.png
+++ b/images/glyphish/51-outlet.png
--- a/images/glyphish/52-pinetree.png
+++ b/images/glyphish/52-pinetree.png
--- a/images/glyphish/53-house.png
+++ b/images/glyphish/53-house.png
--- a/images/glyphish/54-lock.png
+++ b/images/glyphish/54-lock.png
--- a/images/glyphish/55-network.png
+++ b/images/glyphish/55-network.png
--- a/images/glyphish/56-cloud.png
+++ b/images/glyphish/56-cloud.png
--- a/images/glyphish/57-download.png
+++ b/images/glyphish/57-download.png
--- a/images/glyphish/58-bookmark.png
+++ b/images/glyphish/58-bookmark.png
--- a/images/glyphish/59-flag.png
+++ b/images/glyphish/59-flag.png
--- a/images/glyphish/60-signpost.png
+++ b/images/glyphish/60-signpost.png
--- a/images/glyphish/61-brightness.png
+++ b/images/glyphish/61-brightness.png
--- a/images/glyphish/62-contrast.png
+++ b/images/glyphish/62-contrast.png
--- a/images/glyphish/63-runner.png
+++ b/images/glyphish/63-runner.png
--- a/images/glyphish/64-zap.png
+++ b/images/glyphish/64-zap.png
--- a/images/glyphish/65-note.png
+++ b/images/glyphish/65-note.png
--- a/images/glyphish/66-microphone.png
+++ b/images/glyphish/66-microphone.png
--- a/images/glyphish/67-tshirt.png
+++ b/images/glyphish/67-tshirt.png
--- a/images/glyphish/68-paperclip.png
+++ b/images/glyphish/68-paperclip.png
--- a/Show more
+++ b/Show more