Browse Source

new example of different positions (inline/fixed/fullscreen )of toolbars (header/footer)

master
T. Meissner 12 years ago
parent
commit
fc49fcb356
5 changed files with 293 additions and 0 deletions
  1. +31
    -0
      ch03_01-0.html
  2. +66
    -0
      ch03_01-1.html
  3. +66
    -0
      ch03_01-2.html
  4. +65
    -0
      ch03_01-3.html
  5. +65
    -0
      ch03_01-4.html

+ 31
- 0
ch03_01-0.html View File

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My first jQuery Mobile code</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>First page</h1>
</div>
<div data-role="content">
<p>Test of different header and footer positions.</p>
<p>
<a href="ch03_01-1.html" data-role="button">Inline mode (default)</a>
<a href="ch03_01-2.html" data-role="button">Fixed mode</a>
<a href="ch03_01-3.html" data-role="button">Full-screen fixed mode</a>
<!--<a href="ch03_01-4.html" data-role="button">True fixed mode</a>-->
</p>
</div>
<div data-role="footer">
<h4>mobilexweb.com</h4>
</div>
</div>
</body>
</html>

+ 66
- 0
ch03_01-1.html View File

@ -0,0 +1,66 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My first jQuery Mobile code</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div data-role="page" id="inline" data-add-back-btn="true" data-back-btn-text="back">
<div data-role="header">
<h1>Inline header</h1>
</div>
<div data-role="content">
<p><h3>FAUST: Der Tragödie erster Teil</h3></p>
<p>Nacht.</p>
<p>
In einem hochgewölbten,<br/>
engen gotischen Zimmer Faust,<br/>
unruhig auf seinem Sessel am Pulte.<br/>
</p>
<p>
<h4>FAUST:</h4>
Habe nun, ach! Philosophie,<br/>
Juristerei und Medizin,<br/>
Und leider auch Theologie<br/>
Durchaus studiert, mit heißem Bemühn.<br/>
Da steh ich nun, ich armer Tor!<br/>
Und bin so klug als wie zuvor;<br/>
Heiße Magister, heiße Doktor gar<br/>
Und ziehe schon an die zehen Jahr<br/>
Herauf, herab und quer und krumm<br/>
Meine Schüler an der Nase herum-<br/>
Und sehe, daß wir nichts wissen können!<br/>
Das will mir schier das Herz verbrennen.<br/>
Zwar bin ich gescheiter als all die Laffen,<br/>
Doktoren, Magister, Schreiber und Pfaffen;<br/>
Mich plagen keine Skrupel noch Zweifel,<br/>
Fürchte mich weder vor Hölle noch Teufel-<br/>
Dafür ist mir auch alle Freud entrissen,<br/>
Bilde mir nicht ein, was Rechts zu wissen,<br/>
Bilde mir nicht ein, ich könnte was lehren,<br/>
Die Menschen zu bessern und zu bekehren.<br/>
Auch hab ich weder Gut noch Geld,<br/>
Noch Ehr und Herrlichkeit der Welt;<br/>
Es möchte kein Hund so länger leben!<br/>
Drum hab ich mich der Magie ergeben,<br/>
Ob mir durch Geistes Kraft und Mund<br/>
Nicht manch Geheimnis würde kund;<br/>
Daß ich nicht mehr mit saurem Schweiß<br/>
Zu sagen brauche, was ich nicht weiß;<br/>
Daß ich erkenne, was die Welt<br/>
Im Innersten zusammenhält,<br/>
Schau alle Wirkenskraft und Samen,<br/>
Und tu nicht mehr in Worten kramen.<br/>
</p>
</div>
<div data-role="footer">
<h4>Inline footer</h4>
</div>
</div>
</body>
</html>

+ 66
- 0
ch03_01-2.html View File

@ -0,0 +1,66 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My first jQuery Mobile code</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div data-role="page" id="standardfixed" data-add-back-btn="true" data-back-btn-text="back">
<div data-role="header" data-position="fixed">
<h1>Fixed header</h1>
</div>
<div data-role="content">
<p><h3>FAUST: Der Tragödie erster Teil</h3></p>
<p>Nacht.</p>
<p>
In einem hochgewölbten,<br/>
engen gotischen Zimmer Faust,<br/>
unruhig auf seinem Sessel am Pulte.<br/>
</p>
<p>
<h4>FAUST:</h4>
Habe nun, ach! Philosophie,<br/>
Juristerei und Medizin,<br/>
Und leider auch Theologie<br/>
Durchaus studiert, mit heißem Bemühn.<br/>
Da steh ich nun, ich armer Tor!<br/>
Und bin so klug als wie zuvor;<br/>
Heiße Magister, heiße Doktor gar<br/>
Und ziehe schon an die zehen Jahr<br/>
Herauf, herab und quer und krumm<br/>
Meine Schüler an der Nase herum-<br/>
Und sehe, daß wir nichts wissen können!<br/>
Das will mir schier das Herz verbrennen.<br/>
Zwar bin ich gescheiter als all die Laffen,<br/>
Doktoren, Magister, Schreiber und Pfaffen;<br/>
Mich plagen keine Skrupel noch Zweifel,<br/>
Fürchte mich weder vor Hölle noch Teufel-<br/>
Dafür ist mir auch alle Freud entrissen,<br/>
Bilde mir nicht ein, was Rechts zu wissen,<br/>
Bilde mir nicht ein, ich könnte was lehren,<br/>
Die Menschen zu bessern und zu bekehren.<br/>
Auch hab ich weder Gut noch Geld,<br/>
Noch Ehr und Herrlichkeit der Welt;<br/>
Es möchte kein Hund so länger leben!<br/>
Drum hab ich mich der Magie ergeben,<br/>
Ob mir durch Geistes Kraft und Mund<br/>
Nicht manch Geheimnis würde kund;<br/>
Daß ich nicht mehr mit saurem Schweiß<br/>
Zu sagen brauche, was ich nicht weiß;<br/>
Daß ich erkenne, was die Welt<br/>
Im Innersten zusammenhält,<br/>
Schau alle Wirkenskraft und Samen,<br/>
Und tu nicht mehr in Worten kramen.<br/>
</p>
</div>
<div data-role="footer" data-position="fixed">
<h4>Fixed footer</h4>
</div>
</div>
</body>
</html>

+ 65
- 0
ch03_01-3.html View File

@ -0,0 +1,65 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My first jQuery Mobile code</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div data-role="page" id="fullscreen" data-add-back-btn="true" data-back-btn-text="back">
<div data-role="header" data-position="fixed" data-fullscreen="yes">
<h1>Full-screen header</h1>
</div>
<div data-role="content">
<p>FAUST: Der Tragödie erster Teil</p>
<p>Nacht.</p>
<p>
In einem hochgewölbten, engen gotischen Zimmer Faust,<br/>
unruhig auf seinem Sessel am Pulte.<br/>
</p>
<p>
FAUST:<br/>
Habe nun, ach! Philosophie,<br/>
Juristerei und Medizin,<br/>
Und leider auch Theologie<br/>
Durchaus studiert, mit heißem Bemühn.<br/>
Da steh ich nun, ich armer Tor!<br/>
Und bin so klug als wie zuvor;<br/>
Heiße Magister, heiße Doktor gar<br/>
Und ziehe schon an die zehen Jahr<br/>
Herauf, herab und quer und krumm<br/>
Meine Schüler an der Nase herum-<br/>
Und sehe, daß wir nichts wissen können!<br/>
Das will mir schier das Herz verbrennen.<br/>
Zwar bin ich gescheiter als all die Laffen,<br/>
Doktoren, Magister, Schreiber und Pfaffen;<br/>
Mich plagen keine Skrupel noch Zweifel,<br/>
Fürchte mich weder vor Hölle noch Teufel-<br/>
Dafür ist mir auch alle Freud entrissen,<br/>
Bilde mir nicht ein, was Rechts zu wissen,<br/>
Bilde mir nicht ein, ich könnte was lehren,<br/>
Die Menschen zu bessern und zu bekehren.<br/>
Auch hab ich weder Gut noch Geld,<br/>
Noch Ehr und Herrlichkeit der Welt;<br/>
Es möchte kein Hund so länger leben!<br/>
Drum hab ich mich der Magie ergeben,<br/>
Ob mir durch Geistes Kraft und Mund<br/>
Nicht manch Geheimnis würde kund;<br/>
Daß ich nicht mehr mit saurem Schweiß<br/>
Zu sagen brauche, was ich nicht weiß;<br/>
Daß ich erkenne, was die Welt<br/>
Im Innersten zusammenhält,<br/>
Schau alle Wirkenskraft und Samen,<br/>
Und tu nicht mehr in Worten kramen.<br/>
</p>
</div>
<div data-role="footer" data-position="fixed" data-fullscreen="yes">
<h4>Full-screen footer</h4>
</div>
</div>
</body>
</html>

+ 65
- 0
ch03_01-4.html View File

@ -0,0 +1,65 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My first jQuery Mobile code</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div data-role="page" id="truefixed" data-add-back-btn="true" data-back-btn-text="back">
<div data-role="header">
<h1>True fixed mode</h1>
</div>
<div data-role="content">
<p>FAUST: Der Tragödie erster Teil</p>
<p>Nacht.</p>
<p>
In einem hochgewölbten, engen gotischen Zimmer Faust,<br/>
unruhig auf seinem Sessel am Pulte.<br/>
</p>
<p>
FAUST:<br/>
Habe nun, ach! Philosophie,<br/>
Juristerei und Medizin,<br/>
Und leider auch Theologie<br/>
Durchaus studiert, mit heißem Bemühn.<br/>
Da steh ich nun, ich armer Tor!<br/>
Und bin so klug als wie zuvor;<br/>
Heiße Magister, heiße Doktor gar<br/>
Und ziehe schon an die zehen Jahr<br/>
Herauf, herab und quer und krumm<br/>
Meine Schüler an der Nase herum-<br/>
Und sehe, daß wir nichts wissen können!<br/>
Das will mir schier das Herz verbrennen.<br/>
Zwar bin ich gescheiter als all die Laffen,<br/>
Doktoren, Magister, Schreiber und Pfaffen;<br/>
Mich plagen keine Skrupel noch Zweifel,<br/>
Fürchte mich weder vor Hölle noch Teufel-<br/>
Dafür ist mir auch alle Freud entrissen,<br/>
Bilde mir nicht ein, was Rechts zu wissen,<br/>
Bilde mir nicht ein, ich könnte was lehren,<br/>
Die Menschen zu bessern und zu bekehren.<br/>
Auch hab ich weder Gut noch Geld,<br/>
Noch Ehr und Herrlichkeit der Welt;<br/>
Es möchte kein Hund so länger leben!<br/>
Drum hab ich mich der Magie ergeben,<br/>
Ob mir durch Geistes Kraft und Mund<br/>
Nicht manch Geheimnis würde kund;<br/>
Daß ich nicht mehr mit saurem Schweiß<br/>
Zu sagen brauche, was ich nicht weiß;<br/>
Daß ich erkenne, was die Welt<br/>
Im Innersten zusammenhält,<br/>
Schau alle Wirkenskraft und Samen,<br/>
Und tu nicht mehr in Worten kramen.<br/>
</p>
</div>
<div data-role="footer">
<h4>mobilexweb.com</h4>
</div>
</div>
</body>
</html>

Loading…
Cancel
Save