-
Notifications
You must be signed in to change notification settings - Fork 97
/
Copy pathtemplate-ListViewApp-social.html
96 lines (86 loc) · 3.87 KB
/
template-ListViewApp-social.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
<!DOCTYPE html>
<html>
<head>
<title>List View App template for social app</title>
<!--
This template can be used for simple list view application that has a main view with list and detail view for each list item, for applications like Mail app, Messages App or Twitter app.
This template has image and text sections for each list item, which can be used for creating social app with profile image and text.
-->
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0;" />
<link rel="stylesheet" type="text/css" href="appframework/af.ui.css" />
<link rel="stylesheet" type="text/css" href="appframework/icons.css" />
<script type="text/javascript" charset="utf-8" src="appframework/appframework.ui.min.js"></script>
<!-- Required if packaging to native app using Intel XDK -->
<script src="intelxdk.js"></script>
<script src="xhr.js"></script>
<script>
function onDeviceReady(){
$.ui.launch();
intel.xdk.device.hideSplashScreen();
}
document.addEventListener("intel.xdk.device.ready", onDeviceReady, false);
</script>
<!-- end Intel XDK code -->
<script>
$.ui.autoLaunch = false;
$.ui.backButtonText = "Back";
$(document).ready(function(){
$.ui.launch();
});
</script>
<style>
/* css for custom list item, modify as needed */
#afui #listview .list li {padding:10px 20px 10px 10px}
.list-image {float:left;width:50px;height:50px}
.list-text {margin-left:60px;min-height:50px}
</style>
</head>
<body>
<div id="afui">
<div id="content" style="">
<!--List View Page-->
<div class="panel" title="Title" id="listview" data-footer="none" selected="true">
<ul class="list">
<li>
<a href="#item1">
<img class="list-image" src="data/male_user_icon.svg" />
<div class="list-text"><b>username1</b><br>Placeholder text for this list item 1. This sections can modified for your need.</div>
</a>
</li>
<li>
<a href="#item2">
<img class="list-image" src="data/male_user_icon.svg" />
<div class="list-text"><b>username2</b><br>Placeholder text for this list item 2. This sections can modified for your need.</div>
</a>
</li>
<li>
<a href="#item3">
<img class="list-image" src="data/female_user_icon.svg" />
<div class="list-text"><b>username3</b><br>Placeholder text for this list item 3. This sections can modified for your need.</div>
</a>
</li>
<li>
<a href="#item4">
<img class="list-image" src="data/male_user_icon.svg" />
<div class="list-text"><b>username4</b><br>Placeholder text for this list item 4. This sections can modified for your need.</div>
</a>
</li>
</ul>
</div>
<!--Detail View Pages for each list items-->
<div class="panel" title="Item 1" id="item1" data-footer="none">
<p>This is detail view for Item 1</p>
</div>
<div class="panel" title="Item 2" id="item2" data-footer="none">
<p>This is detail view for Item 2</p>
</div>
<div class="panel" title="Item 3" id="item3" data-footer="none">
<p>This is detail view for Item 3</p>
</div>
<div class="panel" title="Item 4" id="item4" data-footer="none">
<p>This is detail view for Item 4</p>
</div>
</div>
</div>
</body>
</html>