Skip to content

Commit c4f86cd

Browse files
doctyperdoctyper
committed
Landing initial TabView controller.
1 parent 3b0b732 commit c4f86cd

File tree

14 files changed

+599
-0
lines changed

14 files changed

+599
-0
lines changed

‎assets/PSD/iphone-os-tab-icon.psd

37.9 KB
Binary file not shown.

‎examples/tab-view/tabs/tab-1.html

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!-- Sample Content -->
2+
<div id="sample-tab-1" class="ui-dup-tab-view-content" data-header-text="Tab 1: Vanilla Edition">
3+
<ul>
4+
<li>Tab 1</li>
5+
<li>Tab 1</li>
6+
<li>Tab 1</li>
7+
<li>Tab 1</li>
8+
<li>Tab 1</li>
9+
<li>Tab 1</li>
10+
<li>Tab 1</li>
11+
<li>Tab 1</li>
12+
<li>Tab 1</li>
13+
<li>Tab 1</li>
14+
<li>Tab 1</li>
15+
<li>Tab 1</li>
16+
<li>Tab 1</li>
17+
<li>Tab 1</li>
18+
<li>Tab 1</li>
19+
<li>Tab 1</li>
20+
<li>Tab 1</li>
21+
<li>Tab 1</li>
22+
<li>Tab 1</li>
23+
<li>Tab 1</li>
24+
<li>Tab 1</li>
25+
</ul>
26+
</div>
27+
<!-- Sample Content -->

‎examples/tab-view/tabs/tab-2.html

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!-- Sample Content -->
2+
<div id="sample-tab-2" class="ui-dup-tab-view-content" data-header-text="Tab 2: Extreme Tab">
3+
<ul>
4+
<li>Tab 2</li>
5+
<li>Tab 2</li>
6+
<li>Tab 2</li>
7+
<li>Tab 2</li>
8+
<li>Tab 2</li>
9+
<li>Tab 2</li>
10+
<li>Tab 2</li>
11+
<li>Tab 2</li>
12+
<li>Tab 2</li>
13+
<li>Tab 2</li>
14+
<li>Tab 2</li>
15+
<li>Tab 2</li>
16+
<li>Tab 2</li>
17+
<li>Tab 2</li>
18+
<li>Tab 2</li>
19+
<li>Tab 2</li>
20+
<li>Tab 2</li>
21+
<li>Tab 2</li>
22+
<li>Tab 2</li>
23+
<li>Tab 2</li>
24+
<li>Tab 2</li>
25+
</ul>
26+
</div>
27+
<!-- Sample Content -->

‎examples/tab-view/tabs/tab-3.html

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!-- Sample Content -->
2+
<div id="sample-tab-3" class="ui-dup-tab-view-content" data-header-text="Tab 3: Tab Harder">
3+
<ul>
4+
<li>Tab 3</li>
5+
<li>Tab 3</li>
6+
<li>Tab 3</li>
7+
<li>Tab 3</li>
8+
<li>Tab 3</li>
9+
<li>Tab 3</li>
10+
<li>Tab 3</li>
11+
<li>Tab 3</li>
12+
<li>Tab 3</li>
13+
<li>Tab 3</li>
14+
<li>Tab 3</li>
15+
<li>Tab 3</li>
16+
<li>Tab 3</li>
17+
<li>Tab 3</li>
18+
<li>Tab 3</li>
19+
<li>Tab 3</li>
20+
<li>Tab 3</li>
21+
<li>Tab 3</li>
22+
<li>Tab 3</li>
23+
<li>Tab 3</li>
24+
<li>Tab 3</li>
25+
</ul>
26+
</div>
27+
<!-- Sample Content -->

‎examples/tab-view/tabs/tab-4.html

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!-- Sample Content -->
2+
<div id="sample-tab-4" class="ui-dup-tab-view-content" data-header-text="Tab 4: Tab With A Vengeance">
3+
<ul>
4+
<li>Tab 4</li>
5+
<li>Tab 4</li>
6+
<li>Tab 4</li>
7+
<li>Tab 4</li>
8+
<li>Tab 4</li>
9+
<li>Tab 4</li>
10+
<li>Tab 4</li>
11+
<li>Tab 4</li>
12+
<li>Tab 4</li>
13+
<li>Tab 4</li>
14+
<li>Tab 4</li>
15+
<li>Tab 4</li>
16+
<li>Tab 4</li>
17+
<li>Tab 4</li>
18+
<li>Tab 4</li>
19+
<li>Tab 4</li>
20+
<li>Tab 4</li>
21+
<li>Tab 4</li>
22+
<li>Tab 4</li>
23+
<li>Tab 4</li>
24+
<li>Tab 4</li>
25+
</ul>
26+
</div>
27+
<!-- Sample Content -->

‎examples/tab-view/view.html

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5+
6+
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
7+
<meta name="apple-mobile-web-app-capable" content="yes" />
8+
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
9+
10+
<title>DupliKit Fixed Positioning</title>
11+
12+
<link rel="stylesheet" href="../../css/core/duplikit.css" type="text/css" />
13+
<link rel="stylesheet" href="../../css/utils/rivet.css" type="text/css" />
14+
<!-- <link rel="stylesheet" href="../css/ui/split-view.css" type="text/css" /> -->
15+
16+
<style type="text/css" media="screen">
17+
body {
18+
background: #000;
19+
}
20+
21+
.ui-dup-tab-view-component section {
22+
background: #fff;
23+
}
24+
25+
.ui-dup-tab-view-component viewport {
26+
width: 100%;
27+
}
28+
29+
.ui-dup-tab-view-component section ul {
30+
padding: 10px 0;
31+
text-align: center;
32+
list-style: none;
33+
}
34+
35+
.ui-dup-tab-view-component section li {
36+
margin: 10px;
37+
background: #ccc;
38+
width: 312px;
39+
height: 200px;
40+
line-height: 200px;
41+
color: rgba(0, 0, 0, 0.2);
42+
font-weight: bold;
43+
font-size: 18px;
44+
display: inline-block;
45+
position: relative;
46+
}
47+
48+
.ui-dup-tab-view-component section #sample-tab-1 li {
49+
background: rgba(255, 0, 0, 0.5);
50+
}
51+
52+
.ui-dup-tab-view-component section #sample-tab-2 li {
53+
background: rgba(0, 255, 0, 0.5);
54+
}
55+
56+
.ui-dup-tab-view-component section #sample-tab-3 li {
57+
background: rgba(0, 0, 255, 0.5);
58+
}
59+
60+
.ui-dup-tab-view-component section #sample-tab-4 li {
61+
background: rgba(0, 255, 255, 0.5);
62+
}
63+
64+
.ui-dup-tab-view-component viewport footer {
65+
top: 561px;
66+
left: 0;
67+
width: 100%;
68+
height: 48px;
69+
position: absolute;
70+
border-top: 1px solid #000;
71+
background: #000;
72+
color: #999;
73+
font-size: 10px;
74+
font-weight: bold;
75+
}
76+
77+
.ui-dup-tab-view-component viewport footer ul {
78+
width: 100%;
79+
height: 46px;
80+
text-align: center;
81+
82+
background: -webkit-gradient(linear, left top, left bottom, from(#2e2e2e), to(#000), color-stop(50%, #151515), color-stop(50%, #000));
83+
border-top: 1px solid #434343;
84+
}
85+
86+
.ui-dup-tab-view-component viewport footer li {
87+
margin: 1px 15px 0;
88+
width: 76px;
89+
height: 44px;
90+
line-height: 76px;
91+
display: inline-block;
92+
}
93+
94+
.ui-dup-tab-view-component viewport footer li.ui-dup-tab-active {
95+
color: #fff;
96+
-webkit-border-radius: 3px;
97+
background: rgba(255, 255, 255, 0.14);
98+
}
99+
100+
.ui-dup-tab-view-component viewport footer a {
101+
width: 100%;
102+
height: 100%;
103+
display: block;
104+
color: #999;
105+
background: url("../../images/tmp/icon-sample.png") no-repeat center 0;
106+
}
107+
108+
.ui-dup-tab-view-component viewport footer li:nth-child(2) a {
109+
background-image: url("../../images/tmp/icon-sample-2.png");
110+
}
111+
112+
.ui-dup-tab-view-component viewport footer li:nth-child(3) a {
113+
background-image: url("../../images/tmp/icon-sample-3.png");
114+
}
115+
116+
.ui-dup-tab-view-component viewport footer li:nth-child(4) a {
117+
background-image: url("../../images/tmp/icon-sample-4.png");
118+
}
119+
120+
.ui-dup-tab-view-component viewport footer li.ui-dup-tab-active a {
121+
color: #fff;
122+
background-position: center -44px;
123+
}
124+
125+
section {
126+
min-width: 100%;
127+
min-height: 517px;
128+
}
129+
130+
/* li:before {
131+
top: 0;
132+
right: 12px;
133+
position: absolute;
134+
display: inline-block;
135+
counter-increment: count;
136+
content: counter(count) " ";
137+
}
138+
*/
139+
</style>
140+
</head>
141+
<body>
142+
<div class="ui-dup-tab-view-component">
143+
<view>
144+
<viewport>
145+
146+
<header></header>
147+
148+
<footer>
149+
<ul>
150+
<li class="ui-dup-tab-active"><a rel="tabs/tab-1.html">Tab 1</a></li>
151+
<li><a rel="tabs/tab-2.html">Tab 2</a></li>
152+
<li><a rel="tabs/tab-3.html">Tab 3</a></li>
153+
<li><a rel="tabs/tab-4.html">Tab 4</a></li>
154+
</ul>
155+
</footer>
156+
157+
</viewport>
158+
159+
<section></section>
160+
</view>
161+
162+
</div>
163+
164+
<script src="../../js/core/duplikit.js" type="text/javascript"></script>
165+
<script src="../../js/utils/rivet.js" type="text/javascript"></script>
166+
<script src="../../js/ui/tab-view.js" type="text/javascript"></script>
167+
168+
<script type="text/javascript">
169+
document.addEventListener("DOMContentLoaded", function() {
170+
var target = document.querySelector(".ui-dup-tab-view-component");
171+
172+
var component = new Dup.UI.TabView(target, {
173+
showInstallReminder : true
174+
});
175+
}, false);
176+
</script>
177+
178+
</body>
179+
</html>

‎images/tmp/icon-sample-2.png

3.08 KB
Loading

‎images/tmp/icon-sample-3.png

1.93 KB
Loading

‎images/tmp/icon-sample-4.png

2.59 KB
Loading

‎images/tmp/icon-sample.png

1.3 KB
Loading

0 commit comments

Comments
 (0)