Skip to content

Commit e1255c2

Browse files
author
Tom Longo
committed
First commit!
0 parents  commit e1255c2

17 files changed

+1219
-0
lines changed

‎.DS_Store

6 KB
Binary file not shown.

‎examples/.DS_Store

6 KB
Binary file not shown.

‎examples/css/demo.css

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
/*
2+
|--------------------------------------------------------------------------
3+
| Reset CSS
4+
|--------------------------------------------------------------------------
5+
*/
6+
7+
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
8+
margin:0;
9+
padding:0;
10+
}
11+
table {
12+
border-collapse:collapse;
13+
border-spacing:0;
14+
}
15+
fieldset,img {
16+
border:0;
17+
}
18+
address,caption,cite,code,dfn,em,strong,th,var {
19+
font-style:normal;
20+
font-weight:normal;
21+
}
22+
ol,ul {
23+
list-style:none;
24+
}
25+
caption,th {
26+
text-align:left;
27+
}
28+
h1,h2,h3,h4,h5,h6 {
29+
font-size:100%;
30+
font-weight:normal;
31+
}
32+
q:before,q:after {
33+
content:'';
34+
}
35+
abbr,acronym { border:0;
36+
}
37+
a {outline: none;}
38+
39+
/* clearfix */
40+
.clearfix:after {
41+
visibility: hidden;
42+
display: block;
43+
font-size: 0;
44+
content: " ";
45+
clear: both;
46+
height: 0;
47+
}
48+
* html .clearfix { zoom: 1; } /* IE6 */
49+
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
50+
51+
52+
53+
/*
54+
|--------------------------------------------------------------------------
55+
| Shared Demo Styles
56+
|--------------------------------------------------------------------------
57+
*/
58+
59+
html, body {
60+
background: #2B2B2B;
61+
color: #fff;
62+
font-family: 'Lucida Grande', Helvetica, Arial, sans-serif;
63+
}
64+
65+
#wrapper {
66+
margin: 0 20px;
67+
}
68+
69+
.demo-intro {
70+
margin: 20px 0;
71+
font-size: 14px;
72+
}
73+
74+
.demo-intro h1 {
75+
font-weight: bold;
76+
font-size: 16px;
77+
margin: 0 0 10px 0;
78+
}
79+
80+
a { color: #ADEAFE; text-decoration: underline; cursor: pointer; }
81+
82+
#warning {
83+
width: 100%;
84+
background: #C70B0F;
85+
}
86+
87+
#warning p {
88+
padding: 10px 20px;
89+
text-align: center;
90+
font-size: 14px;
91+
}

‎examples/demo1.html

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
<!doctype html>
2+
<!--[if IEMobile 7 ]><html class="no-js iem7"><![endif]-->
3+
<!--[if (gt IEMobile 7)|!(IEMobile)]><!--> <html class="no-js"> <!--<![endif]-->
4+
5+
<head>
6+
7+
<meta charset="utf-8">
8+
9+
<title>Flickable.js / Demo 1</title>
10+
11+
<!-- Mobile viewport optimization -->
12+
<meta name="viewport" content="width=640">
13+
14+
15+
<!-- Shared Scripts -->
16+
<script src="../libs/modernizr-2.0.6.min.js"></script>
17+
<script src="../libs/zepto.min.js"></script>
18+
<script src="../src/zepto.flickable.js"></script>
19+
<script src="js/demo.js"></script>
20+
21+
<!-- Demo 1 Scripts -->
22+
<script type="text/javascript">
23+
24+
$(document).ready(function()
25+
{
26+
27+
$('#demo1').flickable({segments:5});
28+
29+
if(!Modernizr.touch) {
30+
//If you're on a desktop, show next/prev links for mouse navigation
31+
$('#demo1-intro').append('<p><a class="prev">Prev</a> | <a class="next">Next</a></p>');
32+
$('.next').click(function() { $('#demo1').flickable('scrollNext');});
33+
$('.prev').click(function() { $('#demo1').flickable('scrollPrev');});
34+
}
35+
36+
});
37+
38+
</script>
39+
40+
<!-- Shared Styles -->
41+
<link rel="stylesheet" href="css/demo.css">
42+
43+
44+
<!-- Demo 1 Styles -->
45+
<style type="text/css">
46+
47+
48+
#demo1-wrapper {
49+
50+
width: 320px;
51+
height: 460px;
52+
overflow: hidden;
53+
background: #DDDDDD;
54+
55+
}
56+
57+
#demo1 {
58+
59+
width: 1600px;
60+
height: 460px;
61+
}
62+
63+
64+
.card {
65+
width: 260px;
66+
height: 400px;
67+
background: #fff;
68+
float: left;
69+
margin: 10px;
70+
border-radius: 10px;
71+
padding: 20px;
72+
}
73+
74+
75+
#card1 { color: #000; }
76+
#card2 { background: #B00004; }
77+
#card3 { background: #1C8B00; }
78+
#card4 { background: #FF9500; }
79+
#card5 { background: #3A8AD5; }
80+
81+
</style>
82+
83+
84+
85+
86+
87+
88+
</head>
89+
<body>
90+
91+
<div id="wrapper">
92+
93+
<section>
94+
95+
96+
<div class="demo-intro" id="demo1-intro">
97+
<h1>Demo 1: Flicking between screens</h1>
98+
<p>This demo allows you to swipe between 'cards' within a set area.</p>
99+
</div>
100+
101+
102+
<!-- Demo 1 HTML -->
103+
104+
<div id="demo1-wrapper">
105+
106+
<div id="demo1" class="clearfix">
107+
108+
<!-- Card 1 -->
109+
<div class="card" id="card1">
110+
<p>Card 1 of 5</p>
111+
</div>
112+
113+
114+
<!-- Card 2 -->
115+
<div class="card" id="card2">
116+
<p>Card 2 of 5</p>
117+
</div>
118+
119+
120+
<!-- Card 3 -->
121+
<div class="card" id="card3">
122+
<p>Card 3 of 5</p>
123+
</div>
124+
125+
126+
<!-- Card 4 -->
127+
<div class="card" id="card4">
128+
<p>Card 4 of 5</p>
129+
</div>
130+
131+
132+
<!-- Card 5 -->
133+
<div class="card" id="card5">
134+
<p>Card 5 of 5</p>
135+
</div>
136+
137+
</div>
138+
139+
</div>
140+
141+
</section>
142+
143+
</div>
144+
145+
146+
</body>
147+
</html>

‎examples/demo2.html

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
<!doctype html>
2+
<!--[if IEMobile 7 ]><html class="no-js iem7"><![endif]-->
3+
<!--[if (gt IEMobile 7)|!(IEMobile)]><!--> <html class="no-js"> <!--<![endif]-->
4+
5+
<head>
6+
7+
<meta charset="utf-8">
8+
9+
<title>Flickable.js / Demo 2</title>
10+
11+
<!-- Mobile viewport optimization -->
12+
<meta name="viewport" content="width=900" />
13+
14+
15+
<!-- Shared Scripts -->
16+
<script src="../libs/modernizr-2.0.6.min.js"></script>
17+
<script src="../libs/zepto.min.js"></script>
18+
<script src="../src/zepto.flickable.js"></script>
19+
<script src="js/demo.js"></script>
20+
21+
<!-- Demo 1 Scripts -->
22+
<script type="text/javascript">
23+
24+
$(document).ready(function()
25+
{
26+
27+
$('#demo2').flickable({segments:4});
28+
$('#demo2 a').tap(function(){ alert('You just tapped "'+$(this).text()+'"'); });
29+
30+
if(!Modernizr.touch) {
31+
32+
// If you're on a desktop, show next/prev links for mouse navigation
33+
$('#demo2-intro').append('<p><a class="prev">Prev</a> | <a class="next">Next</a></p>');
34+
$('.next').click(function() { $('#demo2').flickable('scrollNext');});
35+
$('.prev').click(function() { $('#demo2').flickable('scrollPrev');});
36+
37+
// Add mouse support
38+
$('#demo2 a').click(function(){ alert('You just clicked "'+$(this).text()+'"'); });
39+
}
40+
41+
});
42+
43+
</script>
44+
45+
<!-- Shared Styles -->
46+
<link rel="stylesheet" href="css/demo.css">
47+
48+
49+
<!-- Demo 1 Styles -->
50+
51+
<style type="text/css">
52+
53+
#demo2-wrapper
54+
{
55+
width: 800px;
56+
height: 200px;
57+
margin: 0 auto;
58+
background: #DDDDDD;
59+
overflow: hidden;
60+
}
61+
62+
#demo2
63+
{
64+
width: 3200px;
65+
height: 200px;
66+
}
67+
68+
#demo2 li
69+
{
70+
display: block;
71+
float: left;
72+
width: 200px;
73+
height: 200px;
74+
}
75+
76+
#demo2 li a
77+
{
78+
color: blue;
79+
display: block;
80+
height: 160px;
81+
line-height: 160px;
82+
text-align: center;
83+
margin: 20px;
84+
background: #fff;
85+
-webkit-box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, .2);
86+
-moz-box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, .2);
87+
box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, .2);
88+
}
89+
90+
</style>
91+
92+
93+
94+
95+
96+
97+
</head>
98+
<body>
99+
100+
101+
<div id="wrapper">
102+
103+
<section>
104+
105+
106+
<div class="demo-intro" id="demo2-intro">
107+
<h1>Demo 2: Thumbnail Slider</h1>
108+
<p>This is similar to the way the App Store allows you to flip through app screenshots, but it can also be used to allow users to slide through navigation items that don’t fit within a single page. </p>
109+
</div>
110+
111+
112+
<!-- Demo 2 HTML -->
113+
114+
<div id="demo2-wrapper" class="clearfix">
115+
116+
<ul id="demo2">
117+
118+
<li><a>Tap Me 1</a></li>
119+
<li><a>Tap Me 2</a></li>
120+
<li><a>Tap Me 3</a></li>
121+
<li><a>Tap Me 4</a></li>
122+
123+
<li><a>Tap Me 5</a></li>
124+
<li><a>Tap Me 6</a></li>
125+
<li><a>Tap Me 7</a></li>
126+
<li><a>Tap Me 8</a></li>
127+
128+
<li><a>Tap Me 9</a></li>
129+
<li><a>Tap Me 10</a></li>
130+
<li><a>Tap Me 11</a></li>
131+
<li><a>Tap Me 12</a></li>
132+
133+
<li><a>Tap Me 13</a></li>
134+
<li><a>Tap Me 14</a></li>
135+
<li><a>Tap Me 15</a></li>
136+
<li><a>Tap Me 16</a></li>
137+
138+
</ul>
139+
140+
</div>
141+
142+
</section>
143+
144+
</div>
145+
146+
</body>
147+
</html>

0 commit comments

Comments
 (0)