Skip to content

Commit abcd82f

Browse files
toddparkertoddparker
committed
Added fetch link demos, changed init selector to just be data-target
1 parent 326f1df commit abcd82f

20 files changed

+436
-4
lines changed

‎css/structure/jquery.mobile.core.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ div.ui-mobile-viewport { overflow-x: hidden; }
6060
.ui-loading .ui-loader { display: block; }
6161
.ui-loading .ui-page { overflow: hidden; }
6262
.ui-loading-inline { min-height: 35px; position: relative; }
63-
.ui-loader-inline .ui-icon-loading { display: block; margin: 0 auto; position: absolute; left: 50%; top: 50%; margin: -17px 0 0 -17px; width: 35px; height: 35px; background-color: rgba(0,0,0,.1); }
63+
.ui-loader-inline .ui-icon-loading { display: block; margin: 0 auto; position: absolute; left: 50%; top: 50%; margin: -17px 0 0 -17px; width: 35px; height: 35px; background-color: rgba(0,0,0,.13); }
6464
.ui-loader { display: none; position: absolute; opacity: .85; z-index: 100; left: 50%; width: 200px; margin-left: -130px; margin-top: -35px; padding: 10px 30px; }
6565
.ui-loader h1 { font-size: 15px; text-align: center; }
6666
.ui-loader .ui-icon { position: static; display: block; opacity: .9; margin: 0 auto; width: 35px; height: 35px; background-color: transparent; }

‎docs/pages/fetchlinks/fetch-tabs.html

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>jQuery Mobile Framework - Dialog Example</title>
7+
<link rel="stylesheet" href="../../../css/themes/default/" />
8+
<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
9+
<script src="../../../js/jquery.js"></script>
10+
<script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
11+
<script src="../../_assets/js/jqm-docs.js"></script>
12+
<script src="../../../js/"></script>
13+
14+
</head>
15+
<body>
16+
17+
<div data-role="page">
18+
<div data-role="content">
19+
<style>
20+
#quote-viewer { padding:15px; }
21+
#quote-viewer blockquote { font-size:1.8em; font-family:Georgia, Serif; margin:0.3em; line-height:125%; }
22+
#quote-viewer em { float:right; margin:1.2em 10%; opacity:0.5; font-size:1.1em; text-transform:uppercase; }
23+
#quote-viewer p { margin:2px 6px; color:#999; }
24+
#quote-viewer .quote-close { float:left; margin-top:15px; }
25+
26+
.pix-wrapper p { }
27+
.pix-wrapper .pix-nav { float:left; opacity:0.85; }
28+
</style>
29+
30+
<h2>Quotes</h2>
31+
<ul data-role="controlgroup" data-type="horizontal" class="localnav">
32+
<li><a href="quote-1.html" data-role="button" data-target="#quote-viewer" data-fragment="[data-role='content']" data-transition="pop">Eames</a></li>
33+
<li><a href="quote-2.html" data-role="button" data-target="#quote-viewer" data-fragment="[data-role='content']">Rams</a></li>
34+
<li><a href="quote-3.html" data-role="button" data-target="#quote-viewer" data-fragment="[data-role='content']">Banksy</a></li>
35+
<li><a href="quote-4.html" data-role="button" data-target="#quote-viewer" data-fragment="[data-role='content']">Picasso</a></li>
36+
</ul>
37+
</ul>
38+
<div id="quote-viewer" class="ui-body-d ui-corner-all">
39+
<p id="quote-intro">Click a fetch link above for a snazzy quote...</p>
40+
</div>
41+
42+
<h2>Simple photo viewer</h2>
43+
<p>Here, the target of the link is the parent.</p>
44+
<div id="pix-target">
45+
<a href="pix-1.html" data-role="button" data-target="#pix-target" data-fragment=".pix-wrapper" id="pix-link">Start slideshow</a>
46+
</div>
47+
48+
</div><!-- /content -->
49+
</div><!-- /page -->
50+
51+
52+
</body>
53+
</html>

‎docs/pages/fetchlinks/images/alone.jpg

132 KB
Loading

‎docs/pages/fetchlinks/images/barn.jpg

84.7 KB
Loading

‎docs/pages/fetchlinks/images/car.jpg

144 KB
Loading

‎docs/pages/fetchlinks/images/flower.jpg

98.7 KB
Loading

‎docs/pages/fetchlinks/images/rearview.jpg

107 KB
Loading

‎docs/pages/fetchlinks/images/station.jpg

80.2 KB
Loading

‎docs/pages/fetchlinks/pix-1.html

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>jQuery Mobile Framework - Fetch links</title>
7+
<link rel="stylesheet" href="../../../css/themes/default/" />
8+
<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
9+
<script src="../../../js/jquery.js"></script>
10+
<script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
11+
<script src="../../_assets/js/jqm-docs.js"></script>
12+
<script src="../../../js/"></script>
13+
14+
</head>
15+
<body>
16+
17+
<div data-role="page">
18+
<div data-role="content" class="pix-wrapper">
19+
20+
21+
<img src="images/alone.jpg" alt="Alone">
22+
23+
24+
25+
<div class="pix-tray">
26+
<h3>Alone at the beach</h3>
27+
28+
<div data-role="controlgroup" data-type="horizontal" class="pix-nav">
29+
<a href="pix-6.html" data-role="button" data-target="#pix-target" data-fragment=".pix-wrapper" id="pix-link" data-icon="arrow-l">Last</a>
30+
<a href="pix-2.html" data-role="button" data-target="#pix-target" data-fragment=".pix-wrapper" id="pix-link" data-icon="arrow-r" data-iconpos="right">Next</a>
31+
</div>
32+
</div>
33+
34+
35+
36+
</div><!-- /content -->
37+
</div><!-- /page -->
38+
39+
40+
</body>
41+
</html>

‎docs/pages/fetchlinks/pix-2.html

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>jQuery Mobile Framework - Fetch links</title>
7+
<link rel="stylesheet" href="../../../css/themes/default/" />
8+
<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
9+
<script src="../../../js/jquery.js"></script>
10+
<script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
11+
<script src="../../_assets/js/jqm-docs.js"></script>
12+
<script src="../../../js/"></script>
13+
14+
</head>
15+
<body>
16+
17+
<div data-role="page">
18+
<div data-role="content" class="pix-wrapper">
19+
20+
21+
<img src="images/flower.jpg" alt="Flowers">
22+
23+
24+
25+
<div class="pix-tray">
26+
<h3>Flower patch</h3>
27+
28+
<div data-role="controlgroup" data-type="horizontal" class="pix-nav">
29+
<a href="pix-1.html" data-role="button" data-target="#pix-target" data-fragment=".pix-wrapper" id="pix-link" data-icon="arrow-l">Last</a>
30+
<a href="pix-3.html" data-role="button" data-target="#pix-target" data-fragment=".pix-wrapper" id="pix-link" data-icon="arrow-r" data-iconpos="right">Next</a>
31+
</div>
32+
</div>
33+
34+
35+
36+
</div><!-- /content -->
37+
</div><!-- /page -->
38+
39+
40+
</body>
41+
</html>

‎docs/pages/fetchlinks/pix-3.html

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>jQuery Mobile Framework - Fetch links</title>
7+
<link rel="stylesheet" href="../../../css/themes/default/" />
8+
<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
9+
<script src="../../../js/jquery.js"></script>
10+
<script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
11+
<script src="../../_assets/js/jqm-docs.js"></script>
12+
<script src="../../../js/"></script>
13+
14+
</head>
15+
<body>
16+
17+
<div data-role="page">
18+
<div data-role="content" class="pix-wrapper">
19+
20+
21+
<img src="images/rearview.jpg" alt="Rearview">
22+
23+
24+
25+
<div class="pix-tray">
26+
<h3>Looking back</h3>
27+
28+
<div data-role="controlgroup" data-type="horizontal" class="pix-nav">
29+
<a href="pix-2.html" data-role="button" data-target="#pix-target" data-fragment=".pix-wrapper" id="pix-link" data-icon="arrow-l">Last</a>
30+
<a href="pix-4.html" data-role="button" data-target="#pix-target" data-fragment=".pix-wrapper" id="pix-link" data-icon="arrow-r" data-iconpos="right">Next</a>
31+
</div>
32+
</div>
33+
34+
35+
36+
</div><!-- /content -->
37+
</div><!-- /page -->
38+
39+
40+
</body>
41+
</html>

‎docs/pages/fetchlinks/pix-4.html

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>jQuery Mobile Framework - Fetch links</title>
7+
<link rel="stylesheet" href="../../../css/themes/default/" />
8+
<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
9+
<script src="../../../js/jquery.js"></script>
10+
<script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
11+
<script src="../../_assets/js/jqm-docs.js"></script>
12+
<script src="../../../js/"></script>
13+
14+
</head>
15+
<body>
16+
17+
<div data-role="page">
18+
<div data-role="content" class="pix-wrapper">
19+
20+
21+
<img src="images/station.jpg" alt="Station">
22+
23+
24+
25+
<div class="pix-tray">
26+
<h3>Station</h3>
27+
28+
<div data-role="controlgroup" data-type="horizontal" class="pix-nav">
29+
<a href="pix-3.html" data-role="button" data-target="#pix-target" data-fragment=".pix-wrapper" id="pix-link" data-icon="arrow-l">Last</a>
30+
<a href="pix-5.html" data-role="button" data-target="#pix-target" data-fragment=".pix-wrapper" id="pix-link" data-icon="arrow-r" data-iconpos="right">Next</a>
31+
</div>
32+
</div>
33+
34+
35+
36+
</div><!-- /content -->
37+
</div><!-- /page -->
38+
39+
40+
</body>
41+
</html>

‎docs/pages/fetchlinks/pix-5.html

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>jQuery Mobile Framework - Fetch links</title>
7+
<link rel="stylesheet" href="../../../css/themes/default/" />
8+
<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
9+
<script src="../../../js/jquery.js"></script>
10+
<script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
11+
<script src="../../_assets/js/jqm-docs.js"></script>
12+
<script src="../../../js/"></script>
13+
14+
</head>
15+
<body>
16+
17+
<div data-role="page">
18+
<div data-role="content" class="pix-wrapper">
19+
20+
21+
<img src="images/barn.jpg" alt="Barn">
22+
23+
24+
25+
<div class="pix-tray">
26+
<h3>Barn lines</h3>
27+
28+
<div data-role="controlgroup" data-type="horizontal" class="pix-nav">
29+
<a href="pix-4.html" data-role="button" data-target="#pix-target" data-fragment=".pix-wrapper" id="pix-link" data-icon="arrow-l">Last</a>
30+
<a href="pix-6.html" data-role="button" data-target="#pix-target" data-fragment=".pix-wrapper" id="pix-link" data-icon="arrow-r" data-iconpos="right">Next</a>
31+
</div>
32+
</div>
33+
34+
35+
36+
</div><!-- /content -->
37+
</div><!-- /page -->
38+
39+
40+
</body>
41+
</html>

‎docs/pages/fetchlinks/pix-6.html

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>jQuery Mobile Framework - Fetch links</title>
7+
<link rel="stylesheet" href="../../../css/themes/default/" />
8+
<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
9+
<script src="../../../js/jquery.js"></script>
10+
<script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
11+
<script src="../../_assets/js/jqm-docs.js"></script>
12+
<script src="../../../js/"></script>
13+
14+
</head>
15+
<body>
16+
17+
<div data-role="page">
18+
<div data-role="content" class="pix-wrapper">
19+
20+
21+
<img src="images/car.jpg" alt="Car">
22+
23+
24+
25+
<div class="pix-tray">
26+
<h3>Dark car</h3>
27+
28+
<div data-role="controlgroup" data-type="horizontal" class="pix-nav">
29+
<a href="pix-5.html" data-role="button" data-target="#pix-target" data-fragment=".pix-wrapper" id="pix-link" data-icon="arrow-l">Last</a>
30+
<a href="pix-1.html" data-role="button" data-target="#pix-target" data-fragment=".pix-wrapper" id="pix-link" data-icon="arrow-r" data-iconpos="right">Next</a>
31+
</div>
32+
</div>
33+
34+
35+
36+
</div><!-- /content -->
37+
</div><!-- /page -->
38+
39+
40+
</body>
41+
</html>

‎docs/pages/fetchlinks/quote-1.html

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>jQuery Mobile Framework - Fetch links</title>
7+
<link rel="stylesheet" href="../../../css/themes/default/" />
8+
<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
9+
<script src="../../../js/jquery.js"></script>
10+
<script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
11+
<script src="../../_assets/js/jqm-docs.js"></script>
12+
<script src="../../../js/"></script>
13+
14+
</head>
15+
<body>
16+
17+
<div data-role="page">
18+
<div data-role="content" class="quote">
19+
20+
<blockquote>
21+
&ldquo;Design is a plan for arranging elements in such a way as best to accomplish a particular purpose.&rdquo;
22+
</blockquote>
23+
<em>&#151; Charles Eames</em>
24+
25+
<a href="#quote-viewer" data-role="button" data-target="#quote-viewer" data-fragment="#quote-intro" data-icon="delete" data-iconpos="notext" class="quote-close">Close</a>
26+
27+
28+
29+
30+
</div><!-- /content -->
31+
</div><!-- /page -->
32+
33+
34+
</body>
35+
</html>

‎docs/pages/fetchlinks/quote-2.html

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>jQuery Mobile Framework - Fetch links</title>
7+
<link rel="stylesheet" href="../../../css/themes/default/" />
8+
<link rel="stylesheet" href="../../_assets/css/jqm-docs.css"/>
9+
<script src="../../../js/jquery.js"></script>
10+
<script src="../../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
11+
<script src="../../_assets/js/jqm-docs.js"></script>
12+
<script src="../../../js/"></script>
13+
14+
</head>
15+
<body>
16+
17+
<div data-role="page">
18+
<div data-role="content" class="quote">
19+
20+
<blockquote>
21+
&ldquo;Things which are different in order simply to be different are seldom better, but that which is made to be better is almost always different.&rdquo;
22+
</blockquote>
23+
<em>&#151; Dieter Rams</em>
24+
25+
<a href="#quote-viewer" data-role="button" data-target="#quote-viewer" data-fragment="#quote-intro" data-icon="delete" data-iconpos="notext" class="quote-close">Close</a>
26+
27+
28+
</div><!-- /content -->
29+
</div><!-- /page -->
30+
31+
32+
</body>
33+
</html>

0 commit comments

Comments
 (0)