forked from justspamjustin/junior
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
196 lines (168 loc) · 10 KB
/
index.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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
<!DOCTYPE html>
<html>
<head>
<title>Junior - A front-end framework for building HTML5 mobile apps with a native look and feel.</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="lib/stylesheets/ratchet.css">
<link rel="stylesheet" href="src/stylesheets/junior.css">
<link rel="stylesheet" href="docs/stylesheets/lib/font-awesome.css">
<link rel="stylesheet" href="docs/stylesheets/lib/bootstrap.mod.css">
<link rel="stylesheet" href="docs/stylesheets/style.css">
</head>
<body>
<div class="docs-content">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#"><i class="icon-umbrella"></i> Jr.</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#installation">Installation</a></li>
<li><a href="#examples">Examples</a></li>
<li><a href="#sources-and-credits">Sources & Credits</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container main-docs-content">
<div class="hero-unit" style="position: relative;">
<h1><i class="icon-umbrella"></i> Junior</h1>
<p>A front-end framework for building HTML5 mobile apps with a native look and feel.</p>
<ul>
<li>CSS3 Transitions optimized for mobile performance.</li>
<li>Swipable carousels using flickable.js.</li>
<li>Integration with backbone.js views and routers.</li>
<li>Ratchet CSS UI components.</li>
<li>Try loading this page on a mobile phone or try our "simulator" to the right.</li>
</ul>
<a href="https://github.com/justspamjustin/junior/archive/master.zip" class="btn btn-success btn-large">Download <i class="icon-download-alt"></i></a>
<div class="social-media-btns">
<a href="https://twitter.com/share" class="twitter-share-button" data-via="justspamjustin" data-lang="en">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<a href="https://twitter.com/justspamjustin" class="twitter-follow-button" data-show-count="true" data-lang="en">Follow @justspamjustin</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<iframe src="http://ghbtns.com/github-btn.html?user=justspamjustin&repo=junior&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
</div>
</div>
<h2 id="installation">‌</h2>
<h2><i class="icon-folder-open"></i> Installation</h2>
<h4><i class="icon-file"></i> Javascript</h4>
<h5>Dependencies</h5>
<ul class="padded">
<li><a href="http://modernizr.com/">modernizr</a></li>
<li><a href="http://zeptojs.com/">zepto</a></li>
<li><a href="http://blog.kojo.com.au/flickable-zepto-plugin/">zepto flickable</a></li>
<li><a href="http://lodash.com/">lodash</a></li>
<li><a href="http://backbonejs.org/">backbone</a></li>
</ul>
<p>Each of these dependencies is included in the lib/javascripts directory.</p>
<h5>junior.js</h5>
<p>junior.js is included in the src/javascripts directory. Include each of the dependencies and junior.js in the following order:</p>
<pre><script src="lib/javascripts/modernizr.custom.15848.js"></script>
<script src="lib/javascripts/zepto.min.js"></script>
<script src="lib/javascripts/zepto.flickable.min.js"></script>
<script src="lib/javascripts/lodash.min.js"></script>
<script src="lib/javascripts/backbone-min.js"></script>
<script src="src/javascripts/junior.js"></script></pre>
<h4 class="icon-tint"> CSS</h4>
<h5>Dependencies</h5>
<ul class="padded">
<li><a href="http://maker.github.com/ratchet/">ratchet</a></li>
</ul>
<p>This dependency is included in the lib/stylesheets directory.</p>
<h5>junior.css</h5>
<p>junior.css is included in the src/stylesheets directory. Include the css in the following order in the head of the document:</p>
<pre><link rel="stylesheet" href="lib/stylesheets/ratchet.css"/>
<link rel="stylesheet" href="src/stylesheets/junior.css"/></pre>
<h4 class="icon-columns"> HTML</h4>
<p>junior.js expects you to have a #app-container and #app-main in your body like this. This is where the animations and transitions happen. </p>
<pre><div id="app-container">
<div id="app-main">
</div>
</div></pre>
<h2 id="examples">‌</h2>
<h2><i class="icon-magic"></i> Examples</h2>
<h4><i class="icon-star"></i> Annoted example.js</h4>
<p>The best and most detailed example for how to get started is the <a href="docs/example.html">Annotated Example for example.js</a>. That is the javascript behind the live demo on this page. However, if you are pretty confident that you can catch on quickly, then just read the more brief explanations on this page.</p>
<h4><i class="icon-book"></i> Jr.Router</h4>
<p>Jr.Router is simply an extension of Backbone.Router. It gives you a renderView method to automatically render your view with an animation. A typical router may look like this (assuming each view is defined elsewhere):</p>
<pre>var AppRouter = Jr.Router.extend({
routes: {
'': 'home',
'about': 'about',
'details': 'details'
},
home: function(){
var homeView = new HomeView();
this.renderView(homeView);
},
details: function() {
var detailsView = new DetailsView();
this.renderView(detailsView);
}
});
</pre>
<h4><i class="icon-book"></i> Jr.View</h4>
<p>Jr.View is optional for you to use. It extends from Backbone.View. All it does is automatically bind a touchend event in place of a click event if it detects you are using a touch device. A simple example is like this:</p>
<pre>var HomeView = Jr.View.extend({
render: function(){
this.$el.html("<button class="some-element">Hi</button>");
return this;
},
events: {
'click .some-element': 'onClickSomeElement'
},
onClickSomeElement: function() {
console.log('This event occurs on touchend on mobile or on click otherwise')
}
});</pre>
<h4><i class="icon-book"></i> Jr.Navigator</h4>
<p>Jr.Navigator is how you trigger a navigation using an animation. It works a lot like Backbone.history.navigate:</p>
<pre>Jr.Navigator.navigate('details',{
trigger: true,
animation: {
type: Jr.Navigator.animations.SLIDE_STACK,
direction: Jr.Navigator.directions.RIGHT
}
});</pre>
<p>Currently the only animations that we have is SLIDE_STACK. This slides from one view to the next. Also the only directions that we have is RIGHT and LEFT. In the future we would like to have many more animations.</p>
<h2 id="sources-and-credits">‌</h2>
<h2><i class="icon-edit"></i> Sources and Credits</h2>
<ul class="padded">
<li>Thanks to <a href="http://maker.github.com/ratchet/" target="_blank">Ratchet <i class="icon-external-link"></i></a> for the inspiration and the great mobile UI styles.</li>
<li>Thanks to <a href="http://modernizr.com/" target="_blank">modernizr.js <i class="icon-external-link"></i></a>.</li>
<li>Thanks to <a href="http://zeptojs.com/" target="_blank">zepto.js <i class="icon-external-link"></i></a>.</li>
<li>Thanks to <a href="http://blog.kojo.com.au/flickable-zepto-plugin/" target="_blank">the zepto flickable plugin <i class="icon-external-link"></i></a>.</li>
<li>Thanks to <a href="http://lodash.com/" target="_blank">lodash.js <i class="icon-external-link"></i></a>.</li>
<li>Thanks to <a href="http://backbonejs.org/" target="_blank">backbone.js <i class="icon-external-link"></i></a>.</li>
<li>Thanks to <a href="http://fortawesome.github.com/Font-Awesome/" target="_blank">Font Awesome <i class="icon-external-link"></i></a> which is used in these docs.</li>
<li>Thanks to <a href="http://twitter.github.com/bootstrap/" target="_blank">Twitter Bootstrap <i class="icon-external-link"></i></a> which is also used in these docs.</li>
</ul>
<footer></footer>
</div>
<a href="https://github.com/justspamjustin/junior"><img style="position: fixed;z-index: 10000; top: 0; right: 30px; border: 0;" src="https://github.com/jamesflorentino/fork-ribbons/raw/master/ribbons/blue-white.png" alt="Fork me on GitHub"></a>
</div>
<div id="iphone-image"></div>
<div id="iphone-window">
<div id="app-container">
<div id="app-main"></div>
</div>
</div>
<script src="lib/javascripts/modernizr.custom.15848.js"></script>
<script src="lib/javascripts/zepto.min.js"></script>
<script src="lib/javascripts/zepto.flickable.min.js"></script>
<script src="lib/javascripts/lodash.min.js"></script>
<script src="lib/javascripts/backbone-min.js"></script>
<script src="src/javascripts/junior.js"></script>
<script src="docs/javascripts/example.js"></script>
</body>
</html>