tmeissner
/
learning-by-doing
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Merge branch 'master' of https://github.com/tmeissner/jquery_mobile-up_and_running 

moved jquery_mobile-up_and_running into learning-by-doing repo, because that's what it is ;)
master
T. Meissner 10 years ago
parent
674a86e596 feab777260
commit
4d0b6fc56e
54 changed files with 2151 additions and 0 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +4
    -0
      .gitignore
  2. +36
    -0
      jquery_mobile-up_and_running/ch01_01.html
  3. +25
    -0
      jquery_mobile-up_and_running/ch01_02.html
  4. +39
    -0
      jquery_mobile-up_and_running/ch01_03.html
  5. +26
    -0
      jquery_mobile-up_and_running/ch01_04-0.html
  6. +27
    -0
      jquery_mobile-up_and_running/ch01_04-1.html
  7. +26
    -0
      jquery_mobile-up_and_running/ch01_05.html
  8. +44
    -0
      jquery_mobile-up_and_running/ch01_06.html
  9. +30
    -0
      jquery_mobile-up_and_running/ch01_07-0.html
  10. +25
    -0
      jquery_mobile-up_and_running/ch01_07-1.html
  11. +27
    -0
      jquery_mobile-up_and_running/ch01_07-2.html
  12. +33
    -0
      jquery_mobile-up_and_running/ch01_08.html
  13. +31
    -0
      jquery_mobile-up_and_running/ch03_01-0.html
  14. +93
    -0
      jquery_mobile-up_and_running/ch03_01-1.html
  15. +93
    -0
      jquery_mobile-up_and_running/ch03_01-2.html
  16. +94
    -0
      jquery_mobile-up_and_running/ch03_01-3.html
  17. +26
    -0
      jquery_mobile-up_and_running/ch03_02.html
  18. +27
    -0
      jquery_mobile-up_and_running/ch03_03.html
  19. +29
    -0
      jquery_mobile-up_and_running/ch03_04.html
  20. +39
    -0
      jquery_mobile-up_and_running/ch03_05.html
  21. +46
    -0
      jquery_mobile-up_and_running/ch03_06.html
  22. +41
    -0
      jquery_mobile-up_and_running/ch03_07.html
  23. +62
    -0
      jquery_mobile-up_and_running/ch03_08.html
  24. +43
    -0
      jquery_mobile-up_and_running/ch03_09.html
  25. +38
    -0
      jquery_mobile-up_and_running/ch03_10.html
  26. +30
    -0
      jquery_mobile-up_and_running/ch03_11.html
  27. +34
    -0
      jquery_mobile-up_and_running/ch03_12.html
  28. +37
    -0
      jquery_mobile-up_and_running/ch03_13.html
  29. +31
    -0
      jquery_mobile-up_and_running/ch03_14.html
  30. +31
    -0
      jquery_mobile-up_and_running/ch03_15.html
  31. +31
    -0
      jquery_mobile-up_and_running/ch03_16.html
  32. +40
    -0
      jquery_mobile-up_and_running/ch03_17.html
  33. +30
    -0
      jquery_mobile-up_and_running/ch03_18.html
  34. +70
    -0
      jquery_mobile-up_and_running/ch03_19.html
  35. +47
    -0
      jquery_mobile-up_and_running/ch03_20.html
  36. +30
    -0
      jquery_mobile-up_and_running/ch03_21.html
  37. +37
    -0
      jquery_mobile-up_and_running/ch03_22.html
  38. +34
    -0
      jquery_mobile-up_and_running/ch03_23.html
  39. +37
    -0
      jquery_mobile-up_and_running/ch03_24.html
  40. +37
    -0
      jquery_mobile-up_and_running/ch03_25.html
  41. +40
    -0
      jquery_mobile-up_and_running/ch05_01.html
  42. +32
    -0
      jquery_mobile-up_and_running/ch05_02.html
  43. +32
    -0
      jquery_mobile-up_and_running/ch05_03.html
  44. +33
    -0
      jquery_mobile-up_and_running/ch05_04.html
  45. +31
    -0
      jquery_mobile-up_and_running/ch05_05.html
  46. +35
    -0
      jquery_mobile-up_and_running/ch05_06.html
  47. +40
    -0
      jquery_mobile-up_and_running/ch05_07.html
  48. +58
    -0
      jquery_mobile-up_and_running/ch05_08.html
  49. +43
    -0
      jquery_mobile-up_and_running/ch05_09.html
  50. +47
    -0
      jquery_mobile-up_and_running/ch05_10.html
  51. +35
    -0
      jquery_mobile-up_and_running/ch05_11.html
  52. +60
    -0
      jquery_mobile-up_and_running/ch05_12.html
  53. +46
    -0
      jquery_mobile-up_and_running/ch05_13.html
  54. +59
    -0
      jquery_mobile-up_and_running/index.html

+ 4
- 0
.gitignore View File

@ -0,0 +1,4 @@
.DS_Store
*.swp
*.*#*
.idea

+ 36
- 0
jquery_mobile-up_and_running/ch01_01.html View File

@ -0,0 +1,36 @@
<!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" data-theme="a">
<div data-role="header">
<h1>jQuery Mobile</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" data-divider-theme="b">
<li data-role="list-divider">Summary</li>
<li><a href="ch1.html">The Platform</a></li>
<li><a href="cap2.html">The Page</a></li>
<li><a href="cap3.html">Lists</a></li>
<li><a href="cap4.html">Components</a></li>
</ul>
<ul data-role="listview" data-inset="true" data-divider-theme="d">
<li data-role="list-divider">Links</li>
<li><a href="http://www.mobilexweb.com">Mobile Web Blog</a></li>
<li><a href="http://www.oreilly.com">O'Reilly Media</a></li>
</ul>
</div>
<div data-role="footer">
<h4>&copy; 2011 Maximiliano Firtman @firt</h4>
</div>
</div>
</body>
</html>

+ 25
- 0
jquery_mobile-up_and_running/ch01_02.html View File

@ -0,0 +1,25 @@
<!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" data-theme="a">
<div data-role="header">
<h1>Our first webapp</h1>
</div>
<div data-role="content">
<p>This is the main content of the page</p>
</div>
<div data-role="footer">
<h4>More on mobilexweb.com</h4>
</div>
</div>
</body>
</html>

+ 39
- 0
jquery_mobile-up_and_running/ch01_03.html View File

@ -0,0 +1,39 @@
<!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>This is the main content of the page.</p>
<p>You can go to the <a href="#page2">second page</a>.</p>
</div>
<div data-role="footer">
<h4>mobilexweb.com</h4>
</div>
</div>
<div data-role="page" id="page2" data-title="This is the second page" data-add-back-btn="true" data-back-btn-theme="b">
<div data-role="header">
<h1>Second page</h1>
</div>
<div data-role="content">
<p>This is the main content of the second page.</p>
<p>You can go back using the header's button, <a href="#page1">clicking here</a>
or using your browser's back button.</p>
</div>
<div data-role="footer">
<h4>mobilexweb.com</h4>
</div>
</div>
</body>
</html>

+ 26
- 0
jquery_mobile-up_and_running/ch01_04-0.html View File

@ -0,0 +1,26 @@
<!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>This is the main content of the page.</p>
<p>You can go to the <a href="ch01_04-1.html">second page</a>.</p>
</div>
<div data-role="footer">
<h4>mobilexweb.com</h4>
</div>
</div>
</body>
</html>

+ 27
- 0
jquery_mobile-up_and_running/ch01_04-1.html View File

@ -0,0 +1,27 @@
<!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="page2" data-title="This is the second page" data-add-back-btn="true" data-back-btn-theme="b">
<div data-role="header">
<h1>Second page</h1>
</div>
<div data-role="content">
<p>This is the main content of the second page.</p>
<p>You can go back using the header's button, <a href="#page1">clicking here</a>
or using your browser's back button.</p>
</div>
<div data-role="footer">
<h4>mobilexweb.com</h4>
</div>
</div>
</body>
</html>

+ 26
- 0
jquery_mobile-up_and_running/ch01_05.html View File

@ -0,0 +1,26 @@
<!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" data-theme="b">
<div data-role="header">
<h1>Our first webapp</h1>
</div>
<div data-role="content">
<p>This is an absolute link to a page at another domain.</p>
<p><a href="http://blog.goodcleanfun.de">Check my blog</a></p>
</div>
<div data-role="footer">
<h4>More on mobilexweb.com</h4>
</div>
</div>
</body>
</html>

+ 44
- 0
jquery_mobile-up_and_running/ch01_06.html View File

@ -0,0 +1,44 @@
<!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>Examples of various transition effects when switching to a new page.</p>
<p>Go to the <a href="#page2" data-transition="slide">second page</a> with a slide.</p>
<p>Go to the <a href="#page2" data-transition="slideup">second page</a> with a slide up.</p>
<p>Go to the <a href="#page2" data-transition="slidedown">second page</a> with a slide down.</p>
<p>Go to the <a href="#page2" data-transition="pop">second page</a> with a pop.</p>
<p>Go to the <a href="#page2" data-transition="fade">second page</a> with a fade.</p>
<p>Go to the <a href="#page2" data-transition="flip">second page</a> with a flip.</p>
</div>
<div data-role="footer">
<h4>mobilexweb.com</h4>
</div>
</div>
<div data-role="page" id="page2" data-title="This is the second page" data-add-back-btn="true" data-back-btn-theme="b">
<div data-role="header">
<h1>Second page</h1>
</div>
<div data-role="content">
<p>This is the main content of the second page.</p>
<p>You can go back using the header's button, <a href="#page1">clicking here</a>
or using your browser's back button.</p>
</div>
<div data-role="footer">
<h4>mobilexweb.com</h4>
</div>
</div>
</body>
</html>

+ 30
- 0
jquery_mobile-up_and_running/ch01_07-0.html View File

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Up and Running with jQuery Mobile</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="main" data-theme="b">
<div data-role="header">
<h1>Book properties</h1>
</div>
<div data-role="content">
<h2>Up and Running with jQuery Mobile</h2>
<p>Author: <b>Maximiliano Firtman</b></p>
<p>This book has no reviews yet in our database.</p>
<p><a href="ch01_07-1.html" data-rel="dialog" data-transition="pop" data-role="button">
Delete this book</a></p>
<p><a href="" data-role="button">Modify this book</a></p>
</div>
<div data-role="footer">
<h4>O'Reilly store</h4>
</div>
</div>
</body>
</html>

+ 25
- 0
jquery_mobile-up_and_running/ch01_07-1.html View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Delete confirmation</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="alert" data-theme="b">
<div data-role="header">
<h1>Conirmation</h1>
</div>
<div data-role="content">
<h2>Are you sure to delete this book?</h2>
<p>Author: <b>Maximiliano Firtman</b></p>
<p><a href="ch01_07-2.html" data-role="button">Yes, delete</a></p>
<p><a href="ch01_07-0.html" data-role="button" data-rel="back">Cancel</a></p>
</div>
</div>
</body>
</html>

+ 27
- 0
jquery_mobile-up_and_running/ch01_07-2.html View File

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Up and Running with jQuery Mobile</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="deleted" data-title="Book deleted" data-add-back-btn="true" data-back-btn-theme="b">
<div data-role="header">
<h1>Book deleted</h1>
</div>
<div data-role="content">
<p>Your book was deleted.</p>
<p>You can go back using the header's button, <a href="ch01_07-0.html">clicking here</a>
or using your browser's back button.</p>
</div>
<div data-role="footer">
<h4>O'Reilly store</h4>
</div>
</div>
</body>
</html>

+ 33
- 0
jquery_mobile-up_and_running/ch01_08.html View File

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Up and Running with jQuery Mobile</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="main">
<div data-role="header">
<h1>Special links</h1>
</div>
<div data-role="content">
<p>
<a href="tel:+1800229933" data-role="button">Call the White House</a>
<a href="sms:+1800229933" data-role="button">SMS the White House</a>
<a href="sms:+1800229933?body=Hello!" data-role="button">SMS with body text</a>
<a href="mailto:info@mobilexweb.com?subject=Sent%20from%20the%20web" data-role="button">
Mail me</a>
<a href="skype:maximiliano.firtman?call" data-role="button">Skype me</a>
<a href="facetime:+1800229933" data-role="button">Call using Facetime</a>
</p>
</div>
<div data-role="footer">
<h4>www.mobilexweb.com</h4>
</div>
</div>
</body>
</html>

+ 31
- 0
jquery_mobile-up_and_running/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>

+ 93
- 0
jquery_mobile-up_and_running/ch03_01-1.html View File

@ -0,0 +1,93 @@
<!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>
O sähst du, voller Mondenschein,<br/>
Zum letztenmal auf meine Pein,<br/>
Den ich so manche Mitternacht<br/>
An diesem Pult herangewacht:<br/>
Dann über Büchern und Papier,<br/>
Trübsel'ger Freund, erschienst du mir!<br/>
Ach! könnt ich doch auf Bergeshöhn<br/>
In deinem lieben Lichte gehn,<br/>
Um Bergeshöhle mit Geistern schweben,<br/>
Auf Wiesen in deinem Dämmer weben,<br/>
Von allem Wissensqualm entladen,<br/>
In deinem Tau gesund mich baden!<br/>
</p>
<p>
Weh! steck ich in dem Kerker noch?<br/>
Verfluchtes dumpfes Mauerloch,<br/>
Wo selbst das liebe Himmelslicht<br/>
Trüb durch gemalte Scheiben bricht!<br/>
Beschränkt mit diesem Bücherhauf,<br/>
den Würme nagen, Staub bedeckt,<br/>
Den bis ans hohe Gewölb hinauf<br/>
Ein angeraucht Papier umsteckt;<br/>
Mit Gläsern, Büchsen rings umstellt,<br/>
Mit Instrumenten vollgepfropft,<br/>
Urväter Hausrat drein gestopft-<br/>
Das ist deine Welt! das heißt eine Welt!<br/>
</p>
</div>
<div data-role="footer">
<h4>Inline footer</h4>
</div>
</div>
</body>
</html>

+ 93
- 0
jquery_mobile-up_and_running/ch03_01-2.html View File

@ -0,0 +1,93 @@
<!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>
O sähst du, voller Mondenschein,<br/>
Zum letztenmal auf meine Pein,<br/>
Den ich so manche Mitternacht<br/>
An diesem Pult herangewacht:<br/>
Dann über Büchern und Papier,<br/>
Trübsel'ger Freund, erschienst du mir!<br/>
Ach! könnt ich doch auf Bergeshöhn<br/>
In deinem lieben Lichte gehn,<br/>
Um Bergeshöhle mit Geistern schweben,<br/>
Auf Wiesen in deinem Dämmer weben,<br/>
Von allem Wissensqualm entladen,<br/>
In deinem Tau gesund mich baden!<br/>
</p>
<p>
Weh! steck ich in dem Kerker noch?<br/>
Verfluchtes dumpfes Mauerloch,<br/>
Wo selbst das liebe Himmelslicht<br/>
Trüb durch gemalte Scheiben bricht!<br/>
Beschränkt mit diesem Bücherhauf,<br/>
den Würme nagen, Staub bedeckt,<br/>
Den bis ans hohe Gewölb hinauf<br/>
Ein angeraucht Papier umsteckt;<br/>
Mit Gläsern, Büchsen rings umstellt,<br/>
Mit Instrumenten vollgepfropft,<br/>
Urväter Hausrat drein gestopft-<br/>
Das ist deine Welt! das heißt eine Welt!<br/>
</p>
</div>
<div data-role="footer" data-position="fixed">
<h4>Fixed footer</h4>
</div>
</div>
</body>
</html>

+ 94
- 0
jquery_mobile-up_and_running/ch03_01-3.html View File

@ -0,0 +1,94 @@
<!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><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>
<p>
O sähst du, voller Mondenschein,<br/>
Zum letztenmal auf meine Pein,<br/>
Den ich so manche Mitternacht<br/>
An diesem Pult herangewacht:<br/>
Dann über Büchern und Papier,<br/>
Trübsel'ger Freund, erschienst du mir!<br/>
Ach! könnt ich doch auf Bergeshöhn<br/>
In deinem lieben Lichte gehn,<br/>
Um Bergeshöhle mit Geistern schweben,<br/>
Auf Wiesen in deinem Dämmer weben,<br/>
Von allem Wissensqualm entladen,<br/>
In deinem Tau gesund mich baden!<br/>
</p>
<p>
Weh! steck ich in dem Kerker noch?<br/>
Verfluchtes dumpfes Mauerloch,<br/>
Wo selbst das liebe Himmelslicht<br/>
Trüb durch gemalte Scheiben bricht!<br/>
Beschränkt mit diesem Bücherhauf,<br/>
den Würme nagen, Staub bedeckt,<br/>
Den bis ans hohe Gewölb hinauf<br/>
Ein angeraucht Papier umsteckt;<br/>
Mit Gläsern, Büchsen rings umstellt,<br/>
Mit Instrumenten vollgepfropft,<br/>
Urväter Hausrat drein gestopft-<br/>
Das ist deine Welt! das heißt eine Welt!<br/>
</p>
</div>
<div data-role="footer" data-position="fixed" data-fullscreen="yes">
<h4>Full-screen footer</h4>
</div>
</div>
</body>
</html>

+ 26
- 0
jquery_mobile-up_and_running/ch03_02.html View File

@ -0,0 +1,26 @@
<!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" data-position="fixed">
<a href="" data-icon="delete">Cancel</a>
<h1>New record</h1>
<a href="" data-icon="check" data-theme="b">Save</a>
</div>
<div data-role="content">
</div>
<div data-role="footer" data-position="fixed">
<h4>www.goodcleanfun.de</h4>
</div>
</div>
</body>
</html>

+ 27
- 0
jquery_mobile-up_and_running/ch03_03.html View File

@ -0,0 +1,27 @@
<!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" data-position="fixed">
<div>
<h1>Custom header</h1>
<a href="">Non-button link</a>
</div>
</div>
<div data-role="content">
</div>
<div data-role="footer" data-position="fixed">
<h4>www.goodcleanfun.de</h4>
</div>
</div>
</body>
</html>

+ 29
- 0
jquery_mobile-up_and_running/ch03_04.html View File

@ -0,0 +1,29 @@
<!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" data-position="fixed">
<a href="" data-icon="delete">Cancel</a>
<h1>New record</h1>
<a href="" data-icon="check" data-theme="b">Save</a>
</div>
<div data-role="content">
</div>
<div data-role="footer" data-position="fixed" class="ui-bar">
<a href="" data-icon="refresh">Refresh</a>
<a href="">Filter</a>
<a href="" data-icon="search">Search</a>
<a href="" data-theme="b">New item</a>
</div>
</div>
</body>
</html>

+ 39
- 0
jquery_mobile-up_and_running/ch03_05.html View File

@ -0,0 +1,39 @@
<!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" data-position="fixed">
<h1>Navigation bars</h1>
<div data-role="navbar">
<ul>
<li><a href="">Refresh</a></li>
<li><a href="">Filter</a></li>
<li><a href="">Search</a></li>
<li><a href="">New item</a></li>
</ul>
</div>
</div>
<div data-role="content">
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="" data-icon="home" class="ui-btn-active">Home</a></li>
<li><a href="" data-icon="search">Contacts</a></li>
<li><a href="" data-icon="info">Events</a></li>
<li><a href="" data-icon="grid">News</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>

+ 46
- 0
jquery_mobile-up_and_running/ch03_06.html View File

@ -0,0 +1,46 @@
<!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="home">
<div data-role="header" data-position="fixed">
<h1>Home</h1>
</div>
<div data-role="content">
<p>Home content</p>
</div>
<div data-role="footer" data-id="main" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a data-icon="home" class="ui-btn-active ui-state-persist">Home</a></li>
<li><a href="#help" data-icon="alert">Help</a></li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="help">
<div data-role="header" data-position="fixed">
<h1>Help</h1>
</div>
<div data-role="content">
<p>Help content</p>
</div>
<div data-role="footer" data-id="main" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#home" data-icon="home">Home</a></li>
<li><a href="#help" data-icon="alert" class="ui-btn-active ui-state-persist">Help</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>

+ 41
- 0
jquery_mobile-up_and_running/ch03_07.html View File

@ -0,0 +1,41 @@
<!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="home">
<div data-role="header" data-position="fixed">
<h1>Collapsible content</h1>
</div>
<div data-role="content">
<div data-role="collapsible" data-collapsed="false">
<h2>History of Rome</h2>
<p>
There is archaeological evidence of human occupation in the Rome area
from at least 14,000 years, but the dense layer of much younger debris
obscures Palaeolithic and Neolithic sites.[11] Evidence of stone tools,
pottery ans stone weapons attest to at least 10,000 years of human presence.
</p>
</div>
<div data-role="collapsible" >
<h2>Government of Rome</h2>
<p>
Rome constitutes one of Italy's 8,101 communes, and is the largest both
in terms of land area and population. it is governed by a mayor, currently
Gianni Alemanno, and a city council.
</p>
</div>
</div>
<div data-role="footer" data-position="fixed">
<h1>www.goodcleanfun.de</h1>
</div>
</div>
</body>
</html>

+ 62
- 0
jquery_mobile-up_and_running/ch03_08.html View File

@ -0,0 +1,62 @@
<!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="home">
<div data-role="header" data-position="fixed">
<h1>Nested collapsible content</h1>
</div>
<div data-role="content">
<div data-role="collapsible">
<h2>Rome</h2>
<div data-role="collapsible">
<h3>History</h3>
<p>
There is archaeological evidence of human occupation in the Rome area
from at least 14,000 years, but the dense layer of much younger debris
obscures Palaeolithic and Neolithic sites.[11] Evidence of stone tools,
pottery ans stone weapons attest to at least 10,000 years of human presence.
</p>
</div>
<div data-role="collapsible" >
<h3>Government of Rome</h3>
<p>
Rome constitutes one of Italy's 8,101 communes, and is the largest both
in terms of land area and population. it is governed by a mayor, currently
Gianni Alemanno, and a city council.
</p>
</div>
</div>
<div data-role="collapsible" >
<h2>Madrid</h2>
<div data-role="collapsible">
<h3>History</h3>
<p>
Although the site of modern-day Madrid has been occupied since pre-historic
times,[23] in the Roman era this territory belonged to the diocese of
Complutum (present-day Alcalá de Henares).
</p>
</div>
<div data-role="collapsible" >
<h3>Government of Rome</h3>
<p>
The City Council consists of 57 members, one of them being the Mayor, currently
Alberto Ruiz-Callardón Jiménez. The Mayor presides over the Council.
</p>
</div>
</div>
</div>
<div data-role="footer" data-position="fixed">
<h1>www.goodcleanfun.de</h1>
</div>
</div>
</body>
</html>

+ 43
- 0
jquery_mobile-up_and_running/ch03_09.html View File

@ -0,0 +1,43 @@
<!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="home">
<div data-role="header" data-position="fixed">
<h1>Collapsible sets</h1>
</div>
<div data-role="content">
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="false">
<h2>Books</h2>
<ul>
<li>Programming the Mobile Web</li>
<li>jQuery Mobile: Up and Running</li>
<li>Mobile HTML5</li>
</ul>
</div>
<div data-role="collapsible">
<h2>Talks</h2>
<ul>
<li>Velocity Conference</li>
<li>OSCON</li>
<li>Mobile World Congress</li>
<li>Google DevFest</li>
</ul>
</div>
</div>
</div>
<div data-role="footer" data-position="fixed">
<h1>www.goodcleanfun.de</h1>
</div>
</div>
</body>
</html>

+ 38
- 0
jquery_mobile-up_and_running/ch03_10.html View File

@ -0,0 +1,38 @@
<!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="home">
<div data-role="header" data-position="fixed">
<h1>Layout grids</h1>
</div>
<div data-role="content">
<section class="ui-grid-a">
<div class="ui-block-a">Column 1</div>
<div class="ui-block-b">Column 2</div>
</section>
<section class="ui-grid-b">
<!-- row 1 -->
<div class="ui-block-a">Cell 1.1</div>
<div class="ui-block-b">Cell 1.1</div>
<div class="ui-block-c">Cell 1.1</div>
<!-- row 2 -->
<div class="ui-block-a">Cell 2.1</div>
<div class="ui-block-b">Cell 2.1</div>
<div class="ui-block-c">Cell 2.1</div>
</section>
</div>
<div data-role="footer" data-position="fixed">
<h1>www.goodcleanfun.de</h1>
</div>
</div>
</body>
</html>

+ 30
- 0
jquery_mobile-up_and_running/ch03_11.html View File

@ -0,0 +1,30 @@
<!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="home">
<div data-role="header" data-position="fixed">
<h1>Buttons</h1>
</div>
<div data-role="content">
<a href="#" data-role="button">Click me!</a>
<button data-theme="b">Click me too!</button>
<input type="button" value="Don't forget me!">
<a href="#" data-role="button" data-inline="true">Button 1</a>
<a href="#" data-role="button" data-inline="true">Button 2</a>
<a href="#" data-role="button" data-inline="true">Button 3</a>
</div>
<div data-role="footer" data-position="fixed">
<h1>www.goodcleanfun.de</h1>
</div>
</div>
</body>
</html>

+ 34
- 0
jquery_mobile-up_and_running/ch03_12.html View File

@ -0,0 +1,34 @@
<!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="home">
<div data-role="header" data-position="fixed">
<h1>Buttons</h1>
</div>
<div data-role="content">
<div data-role="controlgroup">
<a href="#" data-role="button">Button 1</a>
<a href="#" data-role="button">Button 2</a>
<a href="#" data-role="button">Button 3</a>
</div>
<div data-role="controlgroup" data-type="horizontal">
<a href="#" data-role="button" data-inline="true">Button 1</a>
<a href="#" data-role="button" data-inline="true">Button 2</a>
<a href="#" data-role="button" data-inline="true">Button 3</a>
</div>
</div>
<div data-role="footer" data-position="fixed">
<h1>www.goodcleanfun.de</h1>
</div>
</div>
</body>
</html>

+ 37
- 0
jquery_mobile-up_and_running/ch03_13.html View File

@ -0,0 +1,37 @@
<!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="home">
<div data-role="header" data-position="fixed">
<h1>Buttons</h1>
</div>
<div data-role="content">
<a href="#" data-role="button" data-icon="plus" data-iconpos="right">Button 1</a>
<a href="#" data-role="button" data-icon="check" data-iconpos="left">Button 2</a>
<a href="#" data-role="button">Button 3</a>
<div data-role="controlgroup" data-type="horizontal">
<a href="#" data-role="button" data-icon="refresh" data-iconpos="bottom">Button 1</a>
<a href="#" data-role="button" data-icon="gear" data-iconpos="top">Button 2</a>
</div>
<div data-role="controlgroup" data-type="horizontal">
<a href="#" data-role="button" data-icon="refresh" data-iconpos="notext">Button 1</a>
<a href="#" data-role="button" data-icon="gear" data-iconpos="notext">Button 2</a>
</div>
<a href="#" data-role="button" data-icon="refresh" data-iconpos="left" data-iconshadow="false">Button 1</a>
<a href="#" data-role="button" data-icon="gear" data-iconpos="right" data-iconshadow="false">Button 2</a>
</div>
<div data-role="footer" data-position="fixed">
<h1>www.goodcleanfun.de</h1>
</div>
</div>
</body>
</html>

+ 31
- 0
jquery_mobile-up_and_running/ch03_14.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="home">
<div data-role="header">
<h1>unordered list</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li>Offline access</li>
<li>Geolocation API</li>
<li>Canvas</li>
<li>Offline storage</li>
<li>New semantic tags</li>
</ul>
</div>
<div data-role="footer">
<h1>www.goodcleanfun.de</h1>
</div>
</div>
</body>
</html>

+ 31
- 0
jquery_mobile-up_and_running/ch03_15.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="home">
<div data-role="header">
<h1>ordered list</h1>
</div>
<div data-role="content">
<ol data-role="listview">
<li>Offline access</li>
<li>Geolocation API</li>
<li>Canvas</li>
<li>Offline storage</li>
<li>New semantic tags</li>
</ol>
</div>
<div data-role="footer">
<h1>www.goodcleanfun.de</h1>
</div>
</div>
</body>
</html>

+ 31
- 0
jquery_mobile-up_and_running/ch03_16.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="home">
<div data-role="header">
<h1>ordered inset list</h1>
</div>
<div data-role="content">
<ol data-role="listview" data-inset="true">
<li>Offline access</li>
<li>Geolocation API</li>
<li>Canvas</li>
<li>Offline storage</li>
<li>New semantic tags</li>
</ol>
</div>
<div data-role="footer">
<h1>www.goodcleanfun.de</h1>
</div>
</div>
</body>
</html>

+ 40
- 0
jquery_mobile-up_and_running/ch03_17.html View File

@ -0,0 +1,40 @@
<!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="home">
<div data-role="header">
<h1>list with row separators</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li data-role="list-divider">Group A</li>
<li>Argentina</li>
<li>Nigeria</li>
<li>England</li>
<li>Japan</li>
<li data-role="list-divider">Group B</li>
<li>United States</li>
<li>Mexico</li>
<li>Korea</li>
<li>Greece</li>
<li data-role="list-divider">Group C</li>
<li>Germany</li>
<li>Finland</li>
<li>Chile</li>
<li>South Africa</li>
</ul>
</div>
<div data-role="footer">
<h1>www.goodcleanfun.de</h1>
</div>
</div>
</body>
</html>

+ 30
- 0
jquery_mobile-up_and_running/ch03_18.html View File

@ -0,0 +1,30 @@
<!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="home">
<div data-role="header">
<h1>interactive list</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a href="#page2">Internal page link</a></li>
<li data-icon="info"><a href="other.html">External page link</a></li>
<li data-icon="help"><a href="http://mobilexweb.com">Absolute external link</a></li>
<li><a href="tel:+123456789">Call to a phone number using a link</a></li>
<li data-icon="false"><a href="javascript:alert('Hi!')">JavaScript link</a></li>
</ul>
</div>
<div data-role="footer">
<h1>www.goodcleanfun.de</h1>
</div>
</div>
</body>
</html>

+ 70
- 0
jquery_mobile-up_and_running/ch03_19.html View File

@ -0,0 +1,70 @@
<!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>
<!-- activate back buttons with the addBackBtn option of the page plugin-->
<script type="text/javascript">
$(document).bind("mobileinit", function() {
$.mobile.page.prototype.options.addBackBtn = true;
});
</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="home" data-add-back-btn="false">
<div data-role="header">
<h1>nested lists</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a href="order.html">Order now!</a></li>
<li>Cities available
<ul data-role="listview">
<li>Boston</li>
<li>New York</li>
<li>Miami</li>
<li>San Francisco</li>
<li>San Jose</li>
</ul>
</li>
<li>Topics
<ul data-role="listview">
<li>Intro to mobile web
<ul data-role="listview">
<li>WML and other oldies</li>
<li>XHTML MP</li>
<li>HTML 4.01</li>
<li>HTML5</li>
</ul>
</li>
<li>Mobile browsers
<ul data-role="listview">
<li>Safari for iOS</li>
<li>Android browser</li>
<li>Firefox for mobile</li>
<li>Opera</li>
</ul>
</li>
<li>Tablet browsers</li>
<li>Using jQuery</li>
</ul>
</li>
<li>Promotions
<ul data-role="listview">
<li>10% off before may</li>
<li><a href="promo3x2.html">3x2</a></li>
<li>10% off to subscribers</li>
</ul>
</li>
</ul>
</div>
<div data-role="footer">
<h1>www.goodcleanfun.de</h1>
</div>
</div>
</body>
</html>

+ 47
- 0
jquery_mobile-up_and_running/ch03_20.html View File

@ -0,0 +1,47 @@
<!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>
<!-- activate back buttons with the addBackBtn option of the page plugin-->
<script type="text/javascript">
$(document).bind("mobileinit", function() {
$.mobile.page.prototype.options.addBackBtn = true;
});
</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="home" data-add-back-btn="false">
<div data-role="header">
<h1>nested lists</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-split-icon="help">
<li>
<a href="details/bill"><h1>Bill Gates</h1></a>
<a href="edit/bill"></a>
</li>
<li>
<a href="details/steve">Steve Jobs</a>
<a href="edit/steve"></a>
</li>
<li>
<a href="details/mark"><p>Mark Zuckerberg</p></a>
<a href="edit/mark"></a>
</li>
<li>
<a href="details/larry">Larry Page</a>
<a href="edit/larry"></a>
</li>
</ul>
</div>
<div data-role="footer">
<h1>www.goodcleanfun.de</h1>
</div>
</div>
</body>
</html>

+ 30
- 0
jquery_mobile-up_and_running/ch03_21.html View File

@ -0,0 +1,30 @@
<!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="home">
<div data-role="header">
<h1>interactive (ordered) list</h1>
</div>
<div data-role="content">
<ol data-role="listview">
<li><a href="#page2">Internal page link</a></li>
<li data-icon="info"><a href="other.html">External page link</a></li>
<li data-icon="help"><a href="http://mobilexweb.com">Absolute external link</a></li>
<li><a href="tel:+123456789">Call to a phone number using a link</a></li>
<li data-icon="false"><a href="javascript:alert('Hi!')">JavaScript link</a></li>
</ol>
</div>
<div data-role="footer">
<h1>www.goodcleanfun.de</h1>
</div>
</div>
</body>
</html>

+ 37
- 0
jquery_mobile-up_and_running/ch03_22.html View File

@ -0,0 +1,37 @@
<!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="home">
<div data-role="header">
<h1>list with aside content</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li>
<a href="buy.html">Soda
<span class="ui-li-aside">1.00€</span></a>
</li>
<li>
<a href="buy.html">Sandwich
<span class="ui-li-aside">3.20€</span></a>
</li>
<li>
<a href="buy.html">Ice cream
<span class="ui-li-aside">1.50€</span></a>
</li>
</ul>
</div>
<div data-role="footer">
<h1>www.goodcleanfun.de</h1>
</div>
</div>
</body>
</html>

+ 34
- 0
jquery_mobile-up_and_running/ch03_23.html View File

@ -0,0 +1,34 @@
<!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="home">
<div data-role="header">
<h1>list with text hierarchy</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li>
<a href="buy.html"><h1>Soda</h1><p>1.00€</p></a>
</li>
<li>
<a href="buy.html"><h1>Sandwich</h1><p>3.20€</p></a>
</li>
<li>
<a href="buy.html"><h1>Ice cream</h1><p>1.50€</p></a>
</li>
</ul>
</div>
<div data-role="footer">
<h1>www.goodcleanfun.de</h1>
</div>
</div>
</body>
</html>

+ 37
- 0
jquery_mobile-up_and_running/ch03_24.html View File

@ -0,0 +1,37 @@
<!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="home">
<div data-role="header">
<h1>list with count bubbles</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li>
<a href="inbox.html">Inbox
<span class="ui-li-count">4</span></a>
</li>
<li>
<a href="sent.html">Sent
<span class="ui-li-count">13</span></a>
</li>
<li>
<a href="trash.html">Trash
<span class="ui-li-count">128</span></a>
</li>
</ul>
</div>
<div data-role="footer">
<h1>www.goodcleanfun.de</h1>
</div>
</div>
</body>
</html>

+ 37
- 0
jquery_mobile-up_and_running/ch03_25.html View File

@ -0,0 +1,37 @@
<!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="home">
<div data-role="header">
<h1>list with count bubbles & search filter</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-filter="true" data-filter-placeholder="Search folders ...">
<li>
<a href="inbox.html">Inbox
<span class="ui-li-count">4</span></a>
</li>
<li>
<a href="sent.html">Sent
<span class="ui-li-count">13</span></a>
</li>
<li>
<a href="trash.html">Trash
<span class="ui-li-count">128</span></a>
</li>
</ul>
</div>
<div data-role="footer">
<h1>www.goodcleanfun.de</h1>
</div>
</div>
</body>
</html>

+ 40
- 0
jquery_mobile-up_and_running/ch05_01.html View File

@ -0,0 +1,40 @@
<!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="home">
<div data-role="header">
<h1>Simple form with field containers</h1>
</div>
<form action="wurst.php" method="get">
<div data-role="fieldcontain">
<label for="company">Company name:</label>
<input type="text" id="company" name="company">
</div>
<div data-role="fieldcontain">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
</div>
<div data-role="fieldcontain">
<label for="search">Search:</label>
<input type="search" id="search" name="search">
</div>
<div data-role="fieldcontain">
<label for="comments">Your comments:</label>
<textarea id="comments" name="comments"></textarea>
</div>
<button type="submit" name="submit" value="submit-value">Submit</button>
</form>
<div data-role="footer">
<h1>www.goodcleanfun.de</h1>
</div>
</div>
</body>
</html>

+ 32
- 0
jquery_mobile-up_and_running/ch05_02.html View File

@ -0,0 +1,32 @@
<!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="home">
<div data-role="header">
<h1>Form with new HTML5 attributes</h1>
</div>
<form action="wurst.php" method="get">
<div data-role="fieldcontain">
<label for="name">Your name:</label>
<input type="text" id="name" required placeholder="Enter your name">
</div>
<div data-role="fieldcontain">
<label for="age">Your age:</label>
<input type="number" id="age" required placeholder="Enter your age" min="10" max="110">
</div>
<button type="submit" name="submit" value="submit-value">Submit</button>
</form>
<div data-role="footer">
<h1>www.goodcleanfun.de</h1>
</div>
</div>
</body>
</html>

+ 32
- 0
jquery_mobile-up_and_running/ch05_03.html View File

@ -0,0 +1,32 @@
<!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="home">
<div data-role="header">
<h1>Form with HTML5 date fields</h1>
</div>
<form action="wurst.php" method="get">
<div data-role="fieldcontain">
<label for="birth">Your birthdate:</label>
<input type="date" id="birth" name="birth">
</div>
<div data-role="fieldcontain">
<label for="favemonth">Your favourite month:</label>
<input type="month" id="favemonth" name="favemonth">
</div>
<button type="submit" name="submit" value="submit-value">Submit</button>
</form>
<div data-role="footer">
<h1>www.goodcleanfun.de</h1>
</div>
</div>
</body>
</html>

+ 33
- 0
jquery_mobile-up_and_running/ch05_04.html View File

@ -0,0 +1,33 @@
<!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="home">
<div data-role="header">
<h1>Form with HTML5 range (slider)</h1>
</div>
<form action="wurst.php" method="get">
<div data-role="fieldcontain">
<label for="quantity1">Quantity:</label>
<input type="range" id="quantity1" name="quantity1" min="1" max="100" value="5">
</div>
<div data-role="fieldcontain">
<label for="quantity2">Quantity:</label>
<input type="range" id="quantity2" name="quantity2" min="1" max="100" value="5"
data-theme="e" data-track-theme="b">
</div>
<button type="submit" name="submit" value="submit-value">Submit</button>
</form>
<div data-role="footer">
<h1>www.goodcleanfun.de</h1>
</div>
</div>
</body>
</html>

+ 31
- 0
jquery_mobile-up_and_running/ch05_05.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="home">
<div data-role="header">
<h1>Form with Flip toggle switch</h1>
</div>
<form action="wurst.php" method="get">
<div data-role="fieldcontain">
<label for="updated">Receive updates?</label>
<select id="updated" name="updated" data-role="slider">
<option value="no">No</option>
<option value="yes">Yes</option>
</select>
</div>
<button type="submit" name="submit" value="submit-value">Submit</button>
</form>
<div data-role="footer">
<h1>www.goodcleanfun.de</h1>
</div>
</div>
</body>
</html>

+ 35
- 0
jquery_mobile-up_and_running/ch05_06.html View File

@ -0,0 +1,35 @@
<!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="home">
<div data-role="header">
<h1>Form with simple select menu</h1>
</div>
<form action="wurst.php" method="get">
<div data-role="fieldcontain">
<label for="training">Training</label>
<select id="training" name="training">
<option value="1">HTML5</option>
<option value="2">jQuery Mobile</option>
<option value="3">iOS</option>
<option value="4">Android</option>
<option value="5">Blackberry</option>
<option value="6">Qt for Meego</option>
</select>
</div>
<button type="submit" name="submit" value="submit-value">Submit</button>
</form>
<div data-role="footer">
<h1>www.goodcleanfun.de</h1>
</div>
</div>
</body>
</html>

+ 40
- 0
jquery_mobile-up_and_running/ch05_07.html View File

@ -0,0 +1,40 @@
<!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="home">
<div data-role="header">
<h1>Form with multiple select menu</h1>
</div>
<form action="wurst.php" method="get">
<div data-role="fieldcontain">
<label for="lang">Languages you like</label>
<select id="lang" name="lang" multiple>
<option value="1">C/C++</option>
<option value="2">Objective C</option>
<option value="3">Java</option>
<option value="4">C#</option>
<option value="5">Visual Basic</option>
<option value="6">ActionScript</option>
<option value="7">Delphi</option>
<option value="8">Python</option>
<option value="9">JavaScript</option>
<option value="10">Ruby</option>
<option value="11">PHP</option>
</select>
</div>
<button type="submit" name="submit" value="submit-value">Submit</button>
</form>
<div data-role="footer">
<h1>www.goodcleanfun.de</h1>
</div>
</div>
</body>
</html>

+ 58
- 0
jquery_mobile-up_and_running/ch05_08.html View File

@ -0,0 +1,58 @@
<!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="home">
<div data-role="header">
<h1>Form with multiple select menu</h1>
</div>
<form action="wurst.php" method="get">
<div data-role="fieldcontain">
<div data-role="controlgroup">
<legend>Color and Size</legend>
<select id="color" name="color">
<option value="1">Blue</option>
<option value="2">White</option>
<option value="3">Red</option>
<option value="4">Black</option>
<option value="5">Pink</option>
</select>
<select id="size" name="size">
<option value="1">X-Small</option>
<option value="2">Small</option>
<option value="3">Medium</option>
<option value="4">Large</option>
<option value="5">X-Large</option>
</select>
</div>
<div data-role="controlgroup" data-type="horizontal">
<legend>Week day and time</legend>
<select id="weekday" name="weekday">
<option value="1">Mon</option>
<option value="2">Tue</option>
<option value="3">Wed</option>
<option value="4">Thu</option>
<option value="5">Fri</option>
</select>
<select id="time" name="time">
<option value="1">Morning</option>
<option value="2">Midday</option>
<option value="3">Afternoon</option>
</select>
</div>
</div>
<button type="submit" name="submit" value="submit-value">Submit</button>
</form>
<div data-role="footer">
<h1>www.goodcleanfun.de</h1>
</div>
</div>
</body>
</html>

+ 43
- 0
jquery_mobile-up_and_running/ch05_09.html View File

@ -0,0 +1,43 @@
<!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="home">
<div data-role="header">
<h1>Form with multiple select menu</h1>
</div>
<form action="wurst.php" method="get">
<div data-role="fieldcontain">
<div data-role="controlgroup" data-type="horizontal">
<legend>Delivery options</legend>
<label for="weekday">Weekday</label>
<select id="weekday" name="weekday">
<option value="1">Mon</option>
<option value="2">Tue</option>
<option value="3">Wed</option>
<option value="4">Thu</option>
<option value="5">Fri</option>
</select>
<label for="time">Time</label>
<select id="time" name="time">
<option value="1">Morning</option>
<option value="2">Midday</option>
<option value="3">Afternoon</option>
</select>
</div>
</div>
<button type="submit" name="submit" value="submit-value">Submit</button>
</form>
<div data-role="footer">
<h1>www.goodcleanfun.de</h1>
</div>
</div>
</body>
</html>

+ 47
- 0
jquery_mobile-up_and_running/ch05_10.html View File

@ -0,0 +1,47 @@
<!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="home">
<div data-role="header">
<h1>Form with non-native select menu</h1>
</div>
<form action="wurst.php" method="get">
<div data-role="fieldcontain">
<label for="training">Training</label>
<select id="training" name="training" data-native-menu="false">
<option value="1">HTML5</option>
<option value="2">jQuery Mobile</option>
<option value="3">iOS</option>
<option value="4">Android</option>
<option value="5">Blackberry</option>
<option value="6">Qt for Meego</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="training1">Training</label>
<select id="training1" name="training" data-native-menu="false" data-overlay-theme="e">
<option value="0" data-placeholder="true">Select your training</option>
<option value="1">HTML5</option>
<option value="2">jQuery Mobile</option>
<option value="3">iOS</option>
<option value="4">Android</option>
<option value="5">Blackberry</option>
<option value="6">Qt for Meego</option>
</select>
</div>
<button type="submit" name="submit" value="submit-value">Submit</button>
</form>
<div data-role="footer">
<h1>www.goodcleanfun.de</h1>
</div>
</div>
</body>
</html>

+ 35
- 0
jquery_mobile-up_and_running/ch05_11.html View File

@ -0,0 +1,35 @@
<!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="home">
<div data-role="header">
<h1>Form with non-native select multiple menu</h1>
</div>
<form action="wurst.php" method="get">
<div data-role="fieldcontain">
<label for="training">Training</label>
<select id="training" name="training" data-native-menu="false" multiple>
<option value="1">HTML5</option>
<option value="2">jQuery Mobile</option>
<option value="3">iOS</option>
<option value="4">Android</option>
<option value="5">Blackberry</option>
<option value="6">Qt for Meego</option>
</select>
</div>
<button type="submit" name="submit" value="submit-value">Submit</button>
</form>
<div data-role="footer">
<h1>www.goodcleanfun.de</h1>
</div>
</div>
</body>
</html>

+ 60
- 0
jquery_mobile-up_and_running/ch05_12.html View File

@ -0,0 +1,60 @@
<!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">
$(document).bind('mobileinit', function () {
$.mobile.pageLoadErrorMessage = "Fehler, Seite nicht gefunden";
});
</script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Form with various radio buttons</h1>
</div>
<form action="wurst.php" method="get">
<legend>Menu type</legend>
<div data-role="fieldcontain">
<label for="menuNative1">Native menu, single selection</label>
<input type="radio" id="menuNative1" name="menuType" value="1">
<label for="menuNative2">Native menu, multiple selection</label>
<input type="radio" id="menuNative2" name="menuType" value="2">
<label for="menuNative3">Non-native menu, single selection</label>
<input type="radio" id="menuNative3" name="menuType" value="3">
<label for="menuNative4">Non-native menu, multiple selection</label>
<input type="radio" id="menuNative4" name="menuType" value="4">
</div>
<legend>Menu type</legend>
<div data-role="controlgroup">
<label for="menuNative11">Native menu, single selection</label>
<input type="radio" id="menuNative11" name="menuType1" value="1">
<label for="menuNative21">Native menu, multiple selection</label>
<input type="radio" id="menuNative21" name="menuType1" value="2">
<label for="menuNative31">Non-native menu, single selection</label>
<input type="radio" id="menuNative31" name="menuType1" value="3">
<label for="menuNative41">Non-native menu, multiple selection</label>
<input type="radio" id="menuNative41" name="menuType1" value="4">
</div>
<legend>Delivery method</legend>
<div data-role="controlgroup" data-type="horizontal">
<label for="delsel0">UPS</label>
<input type="radio" id="delsel0" name="deltype" value="ups">
<label for="delsel1">DHL</label>
<input type="radio" id="delsel1" name="deltype" value="dhl">
<label for="delsel2">FedEx</label>
<input type="radio" id="delsel2" name="deltype" value=fedex>
</div>
<button type="submit" name="submit" value="submit-value">Submit</button>
</form>
<div data-role="footer">
<h1>www.goodcleanfun.de</h1>
</div>
</div>
</body>
</html>

+ 46
- 0
jquery_mobile-up_and_running/ch05_13.html View File

@ -0,0 +1,46 @@
<!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.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Form with various checkboxes</h1>
</div>
<form action="wurst.php" method="get">
<div data-role="fieldcontain">
<label for="accept">I accept terms and conditions</label>
<input type="checkbox" id="accept" name="accept" value="yes">
</div>
<legend>Delivery options</legend>
<div data-role="controlgroup">
<label for="optionGift">Pack it as a gift</label>
<input type="checkbox" id="optionGift" name="optionGift" value="gift">
<label for="optionBag">Send it with a bag</label>
<input type="checkbox" id="optionBag" name="optionBag" value="bag">
<label for="optionRemove">Remove the box</label>
<input type="checkbox" id="optionRemove" name="optionRemove" value="remove">
</div>
<legend>Text format</legend>
<div data-role="controlgroup" data-type="horizontal">
<label for="bold">B</label>
<input type="checkbox" id="bold" name="bold" value="bold">
<label for="italic">I</label>
<input type="checkbox" id="italic" name="italic" value="italic">
<label for="underline">U</label>
<input type="checkbox" id="underline" name="underline" value="underline">
</div>
<button type="submit" name="submit" value="submit-value">Submit</button>
</form>
<div data-role="footer">
<h1>www.goodcleanfun.de</h1>
</div>
</div>
</body>
</html>

+ 59
- 0
jquery_mobile-up_and_running/index.html View File

@ -0,0 +1,59 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery Mobile - Up and Running</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" data-position="fixed">
<h1>jQuery Mobile</h1>
</div>
<div data-role="content">
<div data-role="controlgroup">
<a href="ch01_01.html" data-role="button" rel="external">ch01_01.html</a>
<a href="ch01_02.html" data-role="button" rel="external">ch01_02.html</a>
<a href="ch01_03.html" data-role="button" rel="external">ch01_03.html</a>
<a href="ch01_04-0.html" data-role="button" rel="external">ch01_04-0.html</a>
<a href="ch01_05.html" data-role="button" rel="external">ch01_05.html</a>
<a href="ch01_06.html" data-role="button" rel="external">ch01_06.html</a>
<a href="ch01_07-0.html" data-role="button" rel="external">ch01_07-0.html</a>
<a href="ch01_08.html" data-role="button" rel="external">ch01_08.html</a>
<a href="ch03_01-0.html" data-role="button" rel="external">ch03_01-0.html</a>
<a href="ch03_02.html" data-role="button" rel="external">ch03_02.html</a>
<a href="ch03_03.html" data-role="button" rel="external">ch03_03.html</a>
<a href="ch03_04.html" data-role="button" rel="external">ch03_04.html</a>
<a href="ch03_05.html" data-role="button" rel="external">ch03_05.html</a>
<a href="ch03_06.html" data-role="button" rel="external">ch03_06.html</a>
<a href="ch03_07.html" data-role="button" rel="external">ch03_07.html</a>
<a href="ch03_08.html" data-role="button" rel="external">ch03_08.html</a>
<a href="ch03_09.html" data-role="button" rel="external">ch03_09.html</a>
<a href="ch03_10.html" data-role="button" rel="external">ch03_10.html</a>
<a href="ch03_11.html" data-role="button" rel="external">ch03_11.html</a>
<a href="ch03_12.html" data-role="button" rel="external">ch03_12.html</a>
<a href="ch03_13.html" data-role="button" rel="external">ch03_13.html</a>
<a href="ch03_14.html" data-role="button" rel="external">ch03_14.html</a>
<a href="ch03_15.html" data-role="button" rel="external">ch03_15.html</a>
<a href="ch03_16.html" data-role="button" rel="external">ch03_16.html</a>
<a href="ch03_17.html" data-role="button" rel="external">ch03_17.html</a>
<a href="ch03_18.html" data-role="button" rel="external">ch03_18.html</a>
<a href="ch03_19.html" data-role="button" rel="external">ch03_19.html</a>
<a href="ch03_20.html" data-role="button" rel="external">ch03_20.html</a>
<a href="ch03_21.html" data-role="button" rel="external">ch03_21.html</a>
<a href="ch03_22.html" data-role="button" rel="external">ch03_22.html</a>
<a href="ch03_23.html" data-role="button" rel="external">ch03_23.html</a>
<a href="ch03_24.html" data-role="button" rel="external">ch03_24.html</a>
<a href="ch03_25.html" data-role="button" rel="external">ch03_25.html</a>
</div>
</div>
<div data-role="footer" data-position="fixed">
<h4>www.goodcleanfun.de</h4>
</div>
</div>
</body>
</html>

Write Preview
Loading…
Cancel
Save