-
Notifications
You must be signed in to change notification settings - Fork 10
/
Copy pathjavascript.html
407 lines (362 loc) · 17.7 KB
/
javascript.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
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>Framaterial - Javascript</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="styles/main.min.css">
<link rel="stylesheet" href="styles/prism.css">
<script src="bower_components/modernizr/modernizr.js"></script>
</head>
<body>
<!--[if lt IE 10]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="material-design-layout">
<div class="material-navigation-left-lightblue-fixed">
<div class="navigation-inner">
<div class="navigation-content">
<a href="#" class="icon-menu" data-toggle="sidebar"><span class="m-icon md-navigation-menu"></span></a>
<a href="index.html" class="brand-logo">Framaterial</a>
</div>
<ul class="navigation-side">
<li><span class="m-tooltip-bottom" data-tooltip-content="Only 100Kb"><a href="#" class="material-btn-float-red-master" id="download" ><span class="m-icon md-file-file-download"></span></a></span></li>
</ul>
</div>
</div>
<nav class="material-sidebar-left-out-lightblue" data-state="open">
<header data-image-url="http://puu.sh/difqU/fe10904560.png">
</header>
<ul>
<li><a href="get-started.html" class="material-btn-flat-white"> Get started</a></li>
<li><a href="components.html" class="material-btn-flat-white"> Components</a></li>
<li><a href="javascript.html" class="material-btn-flat-white"> Javascript</a></li>
<li><a href="#about" data-btn-type="toggle" class="material-btn-flat-white"> About</a></li>
</ul>
<span class="divider"></span>
<ul>
<li><a href="examples/index.html" class="material-btn-flat-white"> <span class="m-icon md-image-collections left"></span> Examples</a></li>
<li><a href="templates.html" class="material-btn-flat-white"> <span class="m-icon md-av-web left"></span> templates</a></li>
<li><a href="https://github.com/Framaterial/framaterial" class="material-btn-flat-white"> <span class="m-icon md-hardware-keyboard left"></span> source code</a></li>
<li><a href="http://twitter.com/framaterial" class="material-btn-flat-white"> <span class="m-icon md-social-share left"></span> Follow</a></li>
</ul>
</nav>
<div class="material-container">
<div class="panel bit-1">
<div class="panel-body">
<h1>Javascript</h1>
<section>
<p>Framaterial is shipped with some cool javascript functions, most of the time, to use them, you justhave to add some <code>data-attributes</code>, here is an idex of all the available functions</p>
</section>
<div class="bit-2">
<header>
<h3>Initialize framaterial</h3>
</header>
<ul class="material-inline-list">
<li><a href="#material-design-class"><code>.material-design</code> class</a></li>
</ul>
</div>
<div class="bit-2">
<header>
<h3>Sidebar</h3>
</header>
<ul class="material-inline-list">
<li><a href="#custom-header">Custom header</a></li>
</ul>
</div>
<div class="bit-2">
<header>
<h3>Ripples</h3>
</header>
<ul class="material-inline-list">
<li><a href="#">Ripples on element</a></li>
<li><a href="#">Ripples behaviour</a></li>
</ul>
</div>
<div class="bit-2">
<header>
<h3>Cards & modals</h3>
</header>
<ul class="material-inline-list">
<li><a href="#">Header image</a></li>
<li><a href="#">Header color</a></li>
<li><a href="#">Header text</a></li>
<li><a href="#">Modal behaviour</a></li>
</ul>
</div>
<div class="bit-2">
<header>
<h3>Toasts and Snackbar</h3>
</header>
<ul class="material-inline-list">
<li><a href="#">Toasts & Snackbars text</a></li>
<li><a href="#">Toasts & Snackbars position</a></li>
<li><a href="#">Toasts & Snackbars fading time</a></li>
</ul>
</div>
<div class="bit-2">
<header>
<h3>Paragraphs</h3>
</header>
<ul class="material-inline-list">
<li><a href="#"><code>.flow-text</code> class</a></li>
</ul>
</div>
<div class="bit-2">
<header><h3>Animations</h3>
</header>
<ul class="material-inline-list">
<li><a href="#">Hierarchical animations</a></li>
</ul>
</div>
</div>
</div>
<div class="panel bit-1">
<div class="panel-body">
<header>
<h2>Initialize Framaterial</h2>
</header>
<section>
<span class="divider"></span>
<article>
<header id="material-design-class">
<h3>The <code>.material-design</code> class</h3>
</header>
<p>When you load <code>framaterial.js</code> onto your website, the script will look for a <code>.material-design</code> class, somewhere in your html. If the class is not found, the script will append it to the <code><body></code> tag. <span class="cf"></span>We recommand to add it directly when you start a framaterial project.</p>
</article>
</section>
</div>
</div>
<div class="panel bit-1">
<div class="panel-body">
<header>
<h2>Sidebar</h2>
</header>
<section>
<span class="divider"></span>
<article>
<header id="ripples-on-element">
<h3>Custom header</h3>
</header>
<p>When you create a <a href="examples/sidebar.html">sidebar</a>, you probably want to add an header image to it, to add more impact or just to match your identity.</p>
<p>To do it, you just have to add a custom <code>data-attribute</code> on the <code><header></code> tag :</p>
<pre><code class="language-markup"><nav class="material-sidebar-left-out-lightblue" data-state="open">
<header data-image-url="path/to/your/image.png|svg|jpeg|gif">
</header>
<ul>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>
<span class="divider"></span>
<ul>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>
</nav></code></pre>
</article>
</section>
</div>
</div>
<div class="panel bit-1">
<div class="panel-body">
<header>
<h2>Ripples</h2>
</header>
<section>
<span class="divider"></span>
<article>
<header id="ripples-on-elements">
<h3>Ripples on elements</h3>
</header>
<p>There is a sweet concept that comes with Material design, it's the "Ripples" effect, typically, it's a ripple effect animation that occurs on some clicked elements such as buttons.</p>
<p>By default, the effect is applied to buttons, but you can add it on any alements you want, by giving them the attribute : <code>hasRipple</code></p>
<pre><code class="language-markup"><!-- Without ripples -->
<ul>
<li><a href="#"> item </a></li>
<li><a href="#"> item </a></li>
<li><a href="#"> item </a></li>
</ul>
<!-- With ripples -->
<ul>
<li><a href="#" hasRipple> item </a></li>
<li><a href="#" hasRipple> item </a></li>
<li><a href="#" hasRipple> item </a></li>
</ul>
</code></pre>
<p>And this attribute can be used on any elements you want, images included</p>
</article>
<span class="divider"></span>
<article>
<header>
<h3>Default Ripple behaviour</h3>
</header>
<p>As mentionned over, by default, the ripple effect is applied on any kind of <a href="examples/buttons.html">buttons</a>.</p>
</article>
</section>
</div>
</div>
<div class="panel bit-1">
<div class="panel-body">
<header>
<h2>Cards and Modals</h2>
</header>
<p>The cards are a nice asset in the Material guidelines, it's the bridge between desktop and mobile interface, giving us the ability to evovle in an interface, with cards, that could perfectly addapt to each screen size, and here are few features made for them, powered by javascript</p>
<section>
<span class="divider"></span>
<article>
<header id="header-image">
<h3>Header Image</h3>
</header>
<p>Sometimes, you will want to add an image to your cards or modals, to illustrate a context, to give an information or anything else, and thats why the possibility to change an header image is simple, just a custom <code>data-attribute</code> to use :</p>
<pre><code class="language-markup"><!-- Indicate the image url with the data-background-url -->
<div class="m-card" data-type="modal" data-background-url="../images/samples/header_sample_2.png">
<!-- Then indicate where to put it. Right now, the only available position is on the header -->
<header data-background>
</header>
<section class="inner__card">
<h2 class="title">A simple card</h2>
<p>Some text..</p>
</section>
<footer>
<a href="#" data-btn-type="toggle" class="material-btn-flat-black">Cancel</a>
<a href="#" class="material-btn-flat-lightblue">Ok</a>
</footer>
</div></code></pre>
<p>As you can see, after indicating the <code>data-background-url</code>, you have to call it on the <code><header></code> tag.</p>
</article>
<span class="divider"></span>
<article>
<header id="header-color">
<h3>Header Color</h3>
</header>
<p>Instead of images, sometimes you may only want to use a color, the proceedure is the same as for the image, but with an other <code>data-attribute</code> :</p>
<pre><code class="language-markup"><!-- Indicate the header color with the data-background-color -->
<div class="m-card" data-type="modal" data-background-color="#03a9f4">
<!-- Then indicate where to put it. Right now, the only available position is on the header -->
<header data-background>
</header>
<section class="inner__card">
<h2 class="title">A simple card</h2>
<p>Some text..</p>
</section>
<footer>
<a href="#" data-btn-type="toggle" class="material-btn-flat-black">Cancel</a>
<a href="#" class="material-btn-flat-lightblue">Ok</a>
</footer>
</div></code></pre>
</article>
<span class="divider"></span>
<article>
<header id="header-text">
<h3>Header Text</h3>
</header>
<p>You may want to use text on this zone, to give a title or to indicate something to the user, there is a <code>data-attribute</code> for it:</p>
<pre><code class="language-markup"><!-- Indicate the text to disaply with the data-background-text -->
<div class="m-card" data-type="modal" data-background-text="I'm a header" >
<!-- Then indicate where to put it. Right now, the only available position is on the header -->
<header data-background>
</header>
<section class="inner__card">
<h2 class="title">A simple card</h2>
<p>Some text..</p>
</section>
<footer>
<a href="#" data-btn-type="toggle" class="material-btn-flat-black">Cancel</a>
<a href="#" class="material-btn-flat-lightblue">Ok</a>
</footer>
</div></code></pre>
<p>Of course, you can merge all the attributes to personalize your modals.</p>
</article>
<span class="divider"></span>
<article>
<header id="modal-behaviour">
<h3>Modal behaviour</h3>
</header>
<p>To turn a basic card into a modal, you have to add the <code>data-type="modal"</code> to your card, here is a simple example</p>
<pre><code class="language-markup"><div class="m-card" data-background-color="tomato" data-abckground-text="I am a modal" data-type="modal" data-depth="3" id="modal">
<header data-background>
</header>
<section class="inner__card">
<h2 class="title">A simple card</h2>
<p>Some text..</p>
</section>
<footer>
<a href="#modal" data-btn-type="toggle" class="material-btn-flat-black">Cancel</a>
<a href="#" class="material-btn-flat-lightblue">Ok</a>
</footer>
</div></code></pre>
<p>The aim of a modal is to be toggled when needed, for it you need to add an attribute on the link you want to use to trigger the modal, the <code>data-btn-type="modal"</code> attribute.</p>
</article>
<span class="divider"></span>
<article>
<header>
<h3>Demo</h3>
</header>
<p data-height="268" data-theme-id="294" data-slug-hash="afb3adc8fbd5efd73f840b1606a6157e" data-default-tab="result" data-user="LukyVj" class='codepen'>See the Pen <a href='http://codepen.io/LukyVj/pen/afb3adc8fbd5efd73f840b1606a6157e/'>afb3adc8fbd5efd73f840b1606a6157e</a> by LukyVJ (<a href='http://codepen.io/LukyVj'>@LukyVj</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
</article>
</section>
</div>
</div>
<div class="panel bit-1">
<div class="panel-body">
<header>
<h2>Toasts & Snackbars</h2>
</header>
<p>This component is a must have for material design frameworks, it's a new way to display informations to your user, showing him small messages box, that appear on a corner of the screen, as well a desktop screen to a smartphone screen.</p>
<p>All the javascript functions presented here works on both toasts and snackbars.</p>
<span class="divider"></span>
<article>
<header id="header-image">
<h3>Toasts & Snackbars text</h3>
</header>
<p>To add a custom message to your toasts and snackbars, you just have to fill the proper attribute <code>(data-toast-inner)</code> on the trigger :</p>
<pre><code class="language-markup"><a href="#toast1" data-toast-inner="I'm a toast message" data-toggle="toast">Show toast</a></code></pre>
<p>And repeat the operation to add a text to a snackbar :</p>
<pre><code class="language-markup"><a href="#snackbar1" data-snackbar-inner="I'm a snackbar message" data-toggle="snackbar">Show snackbar</a></code></pre>
<p>Of course, the good thing about those toasts & snackbars, is that they are fully customizables, you can set any messages or auto generated messages, for example :</p>
<pre><code class="language-markup"><script>
$(function(){
var i = 0;
setInterval(function(){
i++;
$('a').attr('data-toast-inner',i);
}, 1000);
$('a').on('click', function(e){
$('#toast_1').empty().html($('a[href*="toast"]').attr('data-toast-inner'));
})
});
</script>
<a
href="#toast1" <!-- Toast target-->
class="material-btn-blue"
data-toggle="toast" <!-- Which toggle <toast><snackbar>-->
data-toast-posy="bottom" <!-- Position on Y axis-->
data-toast-posx="right" <!-- Position on X axis-->
data-toast-inner="Hello" <!-- Message of the toast-->
data-toast-delay="5" <!-- Delay until fadeout-->
>Show Toast top left<a>
</code></pre>
<p> This is a, example of what is possible with those toasts and snackbars, you can of course merge them with a templating system such as handlebars.</p>
</article>
</div>
</div>
</div>
</div>
<script>
</script>
<!-- build:js scripts/vendor.js -->
<script src="scripts/jquery.min.js"></script>
<script src="scripts/framaterial.js" async></script>
<script src="scripts/main.js"></script>
<script src="scripts/prism.min.js"></script>
<!-- endbuild -->
</body>
</html>