/
ekothumb.html
98 lines (94 loc) · 4.66 KB
/
ekothumb.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<html class="ui-mobile landscape min-width-320px min-width-480px min-width-768px min-width-1024px">
<head>
<meta charset="utf-8">
<meta content="width=device-width, minimum-scale=1, maximum-scale=1" name="viewport">
<title>ekomobi</title>
<link href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" rel="stylesheet">
<!-- jqM-latest is too flaky
<link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://jquerymobile.com/test/themes/valencia/">
<link href="http://jquerymobile.com/test/themes/valencia/" rel="stylesheet" id="themeoverride">
-->
</head>
<body class="ui-mobile-viewport">
<div id="thumb" data-role="page">
<div data-role="header" data-position="inline" >
<a href="#home" data-direction="reverse" data-iconpos="left" data-icon="home">Home</a>
<h1>Header</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" >
<li data-role="list-divider"> First and Last Name</li>
<li style="padding-right: 2px;"><!-- override defaul 75px right padding-->
<div>
<a href="#photozoom" data-rel="dialog" data-transition="pop">
<img class="photozoom" align="right" width="100" height="100" src="room.png" />
</a>
</div>
<h2><span id="theme">A</span> theme</h2>
<h4> variant <span id="swatch">A</span></h4>
<div><a href="tel:+1 (819) 555-1212" >+1 (819) 555-1212</a></div>
<div style="margin-top: 8px;"><a href="mailto:info@axialdev.com" >info@axialdev.com</a></div>
<div style="margin-top: 8px;">825 boul de la Carriere,</div>
<div>Gatineau,</div>
<div>J8Y 6T7</div>
</li>
</ul>
<div data-role="controlgroup" data-type="horizontal">
<a href="http://maps.google.ca/maps?q=825%20boul%20de%20la%20Carriere" data-role="button">Directions</a>
<a href="tel:+1 (819) 555-1212" data-role="button">Appelez-nous</a>
</div>
<div>
info
</div>
</div>
<div data-role="footer" data-position="fixed">
<h2><a href="tel:+1 (819) 555-1212">+1 (819) 555-1212</a></h2>
</div><!-- /footer -->
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function applyTheme(themeName,swatch){
themeName = themeName || 'default';
console.log(['theme',themeName,swatch].join(':'));
// set the theme
// 1- reset default theme
if ($('#themeoverride').length>0){
$('#themeoverride').remove();
}
// override if appropriate
if (themeName!=="default"){
var themesDir = 'http://jquerymobile.com/test/themes/';
$('head').append( '<link id="themeoverride" rel=\'stylesheet\' href=\''+ themesDir + themeName +'/\' />' );
}
// set the swatch; if the swatch is not valid, remove data-theme attribute
var validSwatches = {a:true,b:true,c:true,d:true,e:true};
if (validSwatches[swatch]){
$('div[data-role=page]').attr('data-theme',swatch);
$('div[data-role=header]').attr('data-theme',swatch);
$('div[data-role=footer]').attr('data-theme',swatch);
$('ul[data-role=listview]').attr('data-divider-theme',swatch);
}
}
$(document).bind("mobileinit", function(){
console.log("params: "+JSON.stringify(window.location.search));
var defaultOptions = {name:"default",swatch:'none'};
var options = defaultOptions;
try {
var search = decodeURI(window.location.search.substring(1));
console.log('search: '+search);
var injected = JSON.parse(search);
options = $.extend(defaultOptions,injected);
} catch(err) {
console.log('bad params: using defaults')
}
console.log("using options: "+JSON.stringify(options));
$('#theme').text(options.name);
$('#swatch').text(options.swatch);
applyTheme(options.name,options.swatch);
});
</script>
<script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js" type="text/javascript"></script>
</body>
</html>