forked from jquerytools/jquerytools.github.com
/
version-1.2.0.html
566 lines (437 loc) · 35.1 KB
/
version-1.2.0.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
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
<!doctype html>
<!--
Flowplayer JavaScript, website, forums & jQuery Tools by Tero Piirainen
Prefer web standards over Flash. Video is the only exception (for now).
-->
<html lang="en">
<head>
<title>jQuery TOOLS - The missing UI library for the Web</title>
<meta name="description" content="A collection of the most important user-interface components for todays websites. This single JavaScript file weighs only 5.8 Kb
">
<meta name="keywords" content="javascript ui library, javascript library, jquery ui library, user interface library, web 2.0 ui library
">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Distribution" content="Global" />
<meta name="author" content="Tero Piirainen">
<meta name="Robots" content="index,follow" />
<link rel="shortcut icon" href="/media/img/favicon.ico">
<link rel="stylesheet" href="/media/css/style.css">
<link rel="stylesheet" type="text/css" href="/media/css/syntax.css"/>
<style>
.herotitle h2 {
line-height: 80px;
border:0;
}
#breadcrumb {
top:0;
padding-top: 12px;
margin-bottom:-5px;
font-size:14px;
}
#breadcrumb a {
font-size:14px;
}
#breadcrumb a:hover {
color:#000;
}
#content h1 {
height:320px;
text-indent:-999em;
top:-40px;
margin-bottom:-80px;
z-index:-1;
}
#content h1#hero {
background:url(/media/img/hero/plain.jpg) no-repeat -31px 16px;
font-size:75px;
letter-spacing:-3px;
padding:151px 0 0 217px;
text-transform:uppercase;
height:185px;
color:#055499;
text-indent:0;
line-height:45px;
position:relative;
width:735px !important;
}
#content h1 em {
display:block;
font-size:20px;
color:#808080;
margin-top:-2px;
font-weight:normal;
font-style:normal;
}
#content h1#hero em {
text-transform:none;
letter-spacing:0;
font-size:22px;
color:#000;
}
#content h1 strong{
color: #505050;
}
#hero span {
background:transparent url(/media/img/gradient/letters.png) repeat-x 0 0;
height:80px;
position:absolute;
margin-top:-7px;
display:block;
width:735px !important;
}
.notes {
margin-top: 260px;
}
</style>
<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
</head>
<body>
<div id="top">
<div id="top-wrap">
<div id="noticeHolder">
<div id="notice">
This is a message.
</div>
<div id="closeNotice"></div>
</div>
<ul>
<li class="spacer left"></li>
<li>
<a id="top-fp"
href="">Flowplayer</a>
</li>
<li>
<a id="top-jt"
href="/" class="active" >jQuery Tools</a>
</li>
<li class="spacer right"></li>
<li id="login_link" class="linkOnly">
<a href="/account">Login</a>
</li>
<li id="logout_link" class="linkOnly">
<a href="/logout.html">Logout</a>
</li>
</ul>
<form id="top-search" action="/search.html">
<input type="text" placeholder="Search site" name="q" />
</form>
</div>
</div>
<div id="wrap">
<div id="nav" class="clear">
<ul>
<li >
<a href="/">Home</a>
</li>
<li >
<a href="/demos">Demos</a>
</li>
<li >
<a href="/documentation">Documentation</a>
</li>
<li >
<a href="/forum">Forums</a>
</li>
<li id="download" >
<a href="/download">Download</a>
</li>
</ul>
</div>
<div id="content">
<h1 id="hero">
<span></span>
Version <i>1.2.0.</i>
<em>April 30, 2010 <strong>A huge upgrade + the FORM tools</strong></em>
</h1>
<script>
$(function() {
$("#right a:first").addClass("selected")
});
</script>
<div id="breadcrumb">
<a href="../index.html">Introduction to 1.2.0 »</a> Detailed list of changes
</div>
<p class="more first">
This library is constantly improving. New tools are introduced and old tools are rewritten or even dropped. New configuration variables are introduced and old ones are removed. Radical changes keep this library on the cutting edge. The downside is that when you do upgrade, things may not always work as expected. It happens in this version and it will happen in future versions too.
</p>
<a name="all"></a>
<h2>All Tools</h2>
<p>
The previous version had the handy configuration variable <samp>api</samp> for accessing the Tools programming API. Many people liked it but not all. After serious consideration I decided to drop it and go with the jQuery "community". Now you'll have to access the api with jQuery's <samp>data</samp> method. For example:
</p>
<div class="codebox"><figure class="code"><div class="highlight"><pre><span class="c1">// get handle to scrollable's API</span><br /><span class="kd">var</span> <span class="nx">api</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s2">".scrollable"</span><span class="p">).</span><span class="nx">data</span><span class="p">(</span><span class="s2">"scrollable"</span><span class="p">);</span><br /></pre></div><br /><figcaption>JavaScript</figcaption></figure></div>
The <samp>api</samp> configuration variable is still working but is now deprecated. Another common practice for jQuery users is to use the <samp>bind</samp> method to assign callback methods. For example:
<div class="codebox"><figure class="code"><div class="highlight"><pre><span class="nx">$</span><span class="p">(</span><span class="s2">".scrollable"</span><span class="p">).</span><span class="nx">bind</span><span class="p">(</span><span class="s2">"seekTo"</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span><br /> <span class="c1">// Here this- variable references the DOM object</span><br /><span class="p">});</span><br /></pre></div><br /><figcaption>JavaScript</figcaption></figure></div>
<p>
This is now supported. You can also assign callback methods from the programming API just like before. For example:
</p>
<div class="codebox"><figure class="code"><div class="highlight"><pre><span class="kd">var</span> <span class="nx">api</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s2">".scrollable"</span><span class="p">).</span><span class="nx">data</span><span class="p">(</span><span class="s2">"scrollable"</span><span class="p">);</span><br /> <br /><span class="nx">api</span><span class="p">.</span><span class="nx">seekTo</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span><br /> <span class="c1">// Here the 'this' variable references the scrollable API</span><br /><span class="p">});</span><br /></pre></div><br /><figcaption>JavaScript</figcaption></figure></div>
<p>
Read about <a href="/documentation/scripting.html">events in jQuery Tools</a> to learn more details.
</p>
<a name="scrollable"></a>
<h2>A brand new Scrollable</h2>
<p>
Scrollable has undergone the largest change of all tools. The new scrollable is more than 50% smaller than the previous version! This was possible by changing the whole logic of the tool. The new logic has been greatly simplified. Every time you want to scroll you are advancing one step. There are no pages at all. If you want pages you need to design them with HTML. Here is an example layout for scrollable that has three pages and each page has four items:
</p>
<div class="codebox"><figure class="code"><div class="highlight"><pre><span class="c"><!--</span> <span class="nx">root</span> <span class="nx">element</span> <span class="o">--></span><br /><span class="o"><</span><span class="nx">div</span> <span class="kr">class</span><span class="o">=</span><span class="s2">"scrollable"</span><span class="o">></span><br /> <br /> <span class="c"><!--</span> <span class="nx">root</span> <span class="nx">element</span> <span class="k">for</span> <span class="nx">scrollable</span> <span class="nx">items</span> <span class="o">--></span><br /> <span class="o"><</span><span class="nx">div</span> <span class="kr">class</span><span class="o">=</span><span class="s2">"items"</span><span class="o">></span><br /> <br /> <span class="c"><!--</span> <span class="nx">page</span> <span class="err">#</span><span class="mi">1</span> <span class="o">--></span><br /> <span class="o"><</span><span class="nx">div</span> <span class="kr">class</span><span class="o">=</span><span class="s2">"page"</span><span class="o">></span><br /> <span class="o"><</span><span class="nx">div</span><span class="o">><</span><span class="err">/div> <div></div> <div></div> <div></div></span><br /> <span class="o"><</span><span class="err">/div></span><br /> <br /> <span class="c"><!--</span> <span class="nx">page</span> <span class="err">#</span><span class="mi">2</span> <span class="o">--></span><br /> <span class="o"><</span><span class="nx">div</span> <span class="kr">class</span><span class="o">=</span><span class="s2">"page"</span><span class="o">></span><br /> <span class="o"><</span><span class="nx">div</span><span class="o">><</span><span class="err">/div> <div></div> <div></div> <div></div></span><br /> <span class="o"><</span><span class="err">/div></span><br /> <br /> <span class="c"><!--</span> <span class="nx">page</span> <span class="err">#</span><span class="mi">3</span> <span class="o">--></span><br /> <span class="o"><</span><span class="nx">div</span> <span class="kr">class</span><span class="o">=</span><span class="s2">"page"</span><span class="o">></span><br /> <span class="o"><</span><span class="nx">div</span><span class="o">><</span><span class="err">/div> <div></div> <div></div> <div></div></span><br /> <span class="o"><</span><span class="err">/div></span><br /> <span class="o"><</span><span class="err">/div></span><br /><span class="o"><</span><span class="err">/div></span><br /></pre></div><br /><figcaption>JavaScript</figcaption></figure></div>
<p>
And the scrollable is initalized with this call:
</p>
<div class="codebox"><figure class="code"><div class="highlight"><pre><span class="nx">$</span><span class="p">(</span><span class="s2">".scrollable"</span><span class="p">).</span><span class="nx">scrollable</span><span class="p">();</span><br /></pre></div><br /><figcaption>JavaScript</figcaption></figure></div>
<p>
The <samp>size</samp> configuration variable is no longer needed. Now you are free to design your pages and each page can have any amount of items or HTML.
</p>
<p>
Due to the lack of pages, the following configuration variables were removed: <samp>size, keyboardSteps, nextPage</samp> and <samp>prevPage</samp> and the following methods were removed: <samp>getPageAmount, getPageIndex, movePage, nextPage, prevPage</samp> and <samp>setPage</samp>.
</p>
<h3>Circular plugin</h3>
<p>
In the new scrollable, infinite looping is built inside the tool and you enable it with the <samp>circular</samp> configuration property as follows:
</p>
<div class="codebox"><figure class="code"><div class="highlight"><pre><span class="c1">// 1.2. circular feature is built-in the tool</span><br /><span class="nx">$</span><span class="p">(</span><span class="s2">".scrollable"</span><span class="p">).</span><span class="nx">scrollable</span><span class="p">({</span> <span class="nx">circular</span><span class="o">:</span> <span class="kc">true</span> <span class="p">});</span><br /> <br /><span class="c1">// old version. separate circular plugin</span><br /><span class="nx">$</span><span class="p">(</span><span class="s2">".scrollable"</span><span class="p">).</span><span class="nx">scrollable</span><span class="p">().</span><span class="nx">circular</span><span class="p">();</span><br /></pre></div><br /><figcaption>JavaScript</figcaption></figure></div>
<p>
The new circular feature is more solid and is no longer considered as beta.
</p>
<h3>Clickable</h3>
<p>
The new scrollable does not support moving forward or backward if you click on the items. If you want to implement clicking, you need to do it yourself. For example:
</p>
<div class="codebox"><figure class="code"><div class="highlight"><pre><span class="c1">// initialize circular scrollable</span><br /><span class="nx">$</span><span class="p">(</span><span class="s2">".scrollable"</span><span class="p">).</span><span class="nx">scrollable</span><span class="p">({</span> <span class="nx">circular</span><span class="o">:</span> <span class="kc">true</span> <span class="p">}).</span><span class="nx">click</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span><br /> <br /> <span class="c1">// every time it is clicked it advances one step forward</span><br /> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">data</span><span class="p">(</span><span class="s2">"scrollable"</span><span class="p">).</span><span class="nx">next</span><span class="p">();</span><br /><span class="p">});</span><br /></pre></div><br /><figcaption>JavaScript</figcaption></figure></div>
<p>
Because this feature was removed, the following configuration variables no longer exist: <samp>clickable</samp> and <samp>activeClass</samp>. Also the <samp>click</samp> method was removed from the JavaScript API.
</p>
<h3>Adding new items</h3>
<p>
Previously, you added items directly with jQuery's <samp>append</samp> method and called scrollable's <samp>reload</samp> method. Now there is a new <samp>addItem</samp> method that you use to add items to the scrollable. It can now be used even with circular scrollables. Examples:
</p>
<div class="codebox"><figure class="code"><div class="highlight"><pre><span class="c1">// get scrollable API</span><br /><span class="kd">var</span> <span class="nx">api</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s2">"#myscroll"</span><span class="p">).</span><span class="nx">data</span><span class="p">(</span><span class="s2">"scrollable"</span><span class="p">);</span><br /> <br /><span class="c1">// supply item as string</span><br /><span class="nx">api</span><span class="p">.</span><span class="nx">addItem</span><span class="p">(</span><span class="s2">"<div>My new item</div>"</span><span class="p">);</span><br /> <br /><span class="c1">// query item on the page and add it to the scrollable</span><br /><span class="nx">api</span><span class="p">.</span><span class="nx">addItem</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="s2">"#existing_item"</span><span class="p">));</span><br /> <br /><span class="c1">// create an item and add it to the scrollable</span><br /><span class="kd">var</span> <span class="nx">item</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s2">"<div/>"</span><span class="p">,</span> <span class="p">{</span> <span class="kr">class</span><span class="o">:</span> <span class="s1">'item'</span> <span class="p">});</span><br /><span class="nx">api</span><span class="p">.</span><span class="nx">addItem</span><span class="p">(</span><span class="nx">item</span><span class="p">);</span><br /></pre></div><br /><figcaption>JavaScript</figcaption></figure></div>
<p>
When an item is added the new <samp>onAddItem</samp> event is fired.
</p>
<h3>Support for back button</h3>
<p>
If you use the <a href="/documentation/scrollable/navigator.html">navigator plugin</a> you have the ability to browse through scrollable items with the browser's back (and forward) buttons. For example:
</p>
<div class="codebox"><figure class="code"><div class="highlight"><pre><span class="nx">$</span><span class="p">(</span><span class="s2">".scrollable"</span><span class="p">).</span><span class="nx">scrollable</span><span class="p">().</span><span class="nx">navigator</span><span class="p">({</span><span class="nx">history</span><span class="o">:</span> <span class="kc">true</span><span class="p">});</span><br /></pre></div><br /><figcaption>JavaScript</figcaption></figure></div>
<p>
This feature is added with the <samp>history</samp> configuration option. It works even for dynamically added items.
</p>
<h3>Miscellaneous changes</h3>
<p>
The new scrollable is good at guessing whether it is oriented vertically or horizontally by investigating its dimensions. If the height is larger than the width then the scrollable is vertical. You can override this automatic determination with the <samp>vertical</samp> configuration option.
</p>
<p>
The <samp>item</samp> and <samp>globalNav</samp> configuration variables and <samp>onStart</samp> event were removed because they were so rarely used and too complex to explain. Such features should not even exist.
</p>
<p>
The <samp>hoverClass</samp> option was removed because this feature can easily be added with external scripting as follows:
</p>
<div class="codebox"><figure class="code"><div class="highlight"><pre><span class="nx">$</span><span class="p">(</span><span class="s2">".item"</span><span class="p">).</span><span class="nx">hover</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span><br /> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">toggleClass</span><span class="p">(</span><span class="s2">"active"</span><span class="p">);</span><br /><span class="p">});</span><br /></pre></div><br /><figcaption>JavaScript</figcaption></figure></div>
<p>
The <samp>reload</samp> method was removed. There is no need to reload again. The tool looks for the configuration changes automatically.
</p>
<div class="box petrol">
The new scrollable is so different that the <a href="/documentation/scrollable">documentation</a> does not say whether a feature is added or removed in this release. The documentation simply describes the latest version.
</div>
<a name="tooltip"></a>
<h2>Tooltip</h2>
<p>
The new Tooltip does not require that you create the tooltip element manually. You can simply supply the tooltip in the <samp>title</samp> attribute and call <samp>$(".tooltip_triggers").tooltip();</samp>. The tooltips are automatically generated and by default they are assigned the CSS class name <samp>tooltip</samp>. You can change the default class name with the new configuration option <samp>tipClass</samp>. You can also supply the whole HTML layout for the generated tooltips by using the new <samp>layout</samp> configuration option.
</p>
<p>
If you had previously used the <samp>tip: '.tooltip'</samp> configuration, simply remove that.
</p>
<p>
The <samp>tip</samp> configuration option is only used when you want to use a <em>single</em> tooltip element for multiple triggers.
</p>
<p>
In previous version you were able to supply the <samp>tip</samp> and <samp>onBeforeShow</samp> configuration options as the only argument for the tooltip. This is no longer supported for the sake of simplicity.
</p>
<p>
The <samp>oneInstance</samp> and <samp>lazy</samp> configuration options were removed to make the source code cleaner.
</p>
<a name="overlay"></a>
<h2>Overlay</h2>
<p>
The biggest change in the new overlay is that the overlay positioning is fixed by default. This means that overlay stays still while the screen is scrolled. You can disable this by setting the <samp>fixed</samp> configuration property to <samp>false</samp> then the overlay is positioned relative to the document so that when the screen is scrolled then the overlay moves along with the document.
</p>
<p>
Here is a list of small changes for overlay in 1.2.0:
</p>
<ul>
<li>Added a new <samp>load</samp> option. If it is enabled then the overlay loads immediately after it has been initialized.
<li>Removed the deprecated <samp>getContent</samp> method. Use <samp>getOverlay</samp> instead.</li>
<li>Removed <samp>onStart</samp> event. use <samp>onBeforeLoad</samp> instead.</li>
<li>Removed <samp>absolute</samp> configuration option. it was rarely needed.</li>
<li>The <samp>expose</samp> configuration option is now deprecated in favor of the <samp>mask</samp> option.</li>
</ul>
<p>
The custom effects <samp>load</samp> method receives the position as its first argument. For example:
</p>
<div class="codebox"><figure class="code"><div class="highlight"><pre><span class="c1">// load function receives two arguments instead of one.</span><br /><span class="nx">$</span><span class="p">.</span><span class="nx">tools</span><span class="p">.</span><span class="nx">tooltip</span><span class="p">.</span><span class="nx">addEffect</span><span class="p">(</span><span class="s2">"my-effect"</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">position</span><span class="p">,</span> <span class="nx">done</span><span class="p">)</span> <span class="p">{</span><br /> <br /> <span class="c1">// position has two properties: top and left</span><br /> <span class="kd">var</span> <span class="nx">top</span> <span class="o">=</span> <span class="nx">position</span><span class="p">.</span><span class="nx">top</span><span class="p">,</span><br /> <span class="nx">left</span> <span class="o">=</span> <span class="nx">position</span><span class="p">.</span><span class="nx">left</span><span class="p">;</span><br /> <br /><span class="p">},</span> <span class="kd">function</span><span class="p">(</span><span class="nx">done</span><span class="p">)</span> <span class="p">{</span><br /> <br /><span class="p">});</span><br /></pre></div><br /><figcaption>JavaScript</figcaption></figure></div>
<a name="gallery"></a>
<h3>No more Overlay Gallery plugin</h3>
<p>
The previous jQuery Tools version had an Overlay Gallery plugin for making a "lightbox" type of slideshow. It didn't fit with the rest of the library mainly because of its hard-coded logic. So it was dropped! Something similar can be achieved with the the Slideshow plugin and placing it on Overlay.
</p>
<a name="tabs"></a>
<h2>Tabs</h2>
<p>
The history feature is now enabled with a <samp>history</samp> configuration option instead of a plugin. For example:
</p>
<div class="codebox"><figure class="code"><div class="highlight"><pre><span class="c1">// old version: history tabs</span><br /><span class="nx">$</span><span class="p">(</span><span class="s2">".tabs"</span><span class="p">).</span><span class="nx">tabs</span><span class="p">(</span><span class="s2">".panes > div"</span><span class="p">).</span><span class="nx">history</span><span class="p">();</span><br /> <br /><span class="c1">// version 1.2: history option</span><br /><span class="nx">$</span><span class="p">(</span><span class="s2">".tabs"</span><span class="p">).</span><span class="nx">tabs</span><span class="p">(</span><span class="s2">".panes > div"</span><span class="p">,</span> <span class="p">{</span> <span class="nx">history</span><span class="o">:</span> <span class="kc">true</span> <span class="p">});</span><br /></pre></div><br /><figcaption>JavaScript</figcaption></figure></div>
<p>
This requires that the <a href="/documentation/toolbox/history.html">history tool</a> is included on the page. The new History tool can be utilized by other tools as well. Now the new scrollable also can take advantage of the browser's back button.
</p>
<p>
In this version there is no need to initially set a pane visible with CSS using <samp>display: block</samp>. The tabs automatically clicks on the first pane if all panes are hidden. When using the "fade" effect, if a pane is already visible it is not "clicked" in vain.
</p>
<a name="slideshow"></a>
<h3>Slideshow plugin for Tabs</h3>
<p>
In the previous version, slideshow methods such as <samp>play</samp>, <samp>pause</samp> and <samp>stop</samp> were <em>added</em> to the JavaScript API of the Tabs. Now they are methods of the slideshow plugin itself. For example:
</p>
<div class="codebox"><figure class="code"><div class="highlight"><pre><span class="c1">// initialize tabs and the slideshow plugin</span><br /><span class="nx">$</span><span class="p">(</span><span class="s2">".tabs"</span><span class="p">).</span><span class="nx">tabs</span><span class="p">(</span><span class="s2">".panes > DIV"</span><span class="p">).</span><span class="nx">slideshow</span><span class="p">({</span> <span class="nx">autoplay</span><span class="o">:</span> <span class="kc">true</span><span class="p">});</span><br /> <br /><span class="c1">// get access to the slideshow API</span><br /><span class="kd">var</span> <span class="nx">api</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s2">".tabs"</span><span class="p">).</span><span class="nx">data</span><span class="p">(</span><span class="s2">"slideshow"</span><span class="p">);</span><br /> <br /><span class="c1">// do something with the API</span><br /><span class="nx">api</span><span class="p">.</span><span class="nx">onPause</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span><br /> <br /> <span class="c1">// the 'this' variable refers to the slideshow API</span><br /> <span class="kd">var</span> <span class="nx">conf</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">getConf</span><span class="p">();</span><br /><span class="p">});</span><br /></pre></div><br /><figcaption>JavaScript</figcaption></figure></div>
<a name="expose"></a>
<h2>Expose</h2>
<p>
The new expose is more straightforward. There is no ability to have multiple masks simultaneously making the logic much simpler and the file size smaller. There are two terms being used: <strong>mask</strong> is a large element that is being placed on top of the document. In the new version this mask is a <em>singleton</em> that you can access with the static variable <samp>$.mask</samp>. <strong>expose</strong> is a verb that means placing selected elements on top of the mask. Here is how you work with the new Expose tool:
</p>
<div class="codebox"><figure class="code"><div class="highlight"><pre><span class="c1">// place a white mask over the page</span><br /><span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">mask</span><span class="p">();</span><br /> <br /><span class="c1">// place a mask but let selected elements show through (expose)</span><br /><span class="nx">$</span><span class="p">(</span><span class="s2">"div.to_be_exposed"</span><span class="p">).</span><span class="nx">expose</span><span class="p">();</span><br /> <br /><span class="c1">// close the mask</span><br /><span class="nx">$</span><span class="p">.</span><span class="nx">mask</span><span class="p">.</span><span class="nx">close</span><span class="p">();</span><br /></pre></div><br /><figcaption>JavaScript</figcaption></figure></div>
<p>
There are two different calls: <samp>mask</samp> and <samp>expose</samp>. The <samp>mask</samp> method is only available for the document object and you cannot use any other selector. The <samp>expose()</samp> method can take any jQuery selector and all elements returned by the selector are placed on top of the mask.
</p>
<p>
The mask is loaded <strong>immediately</strong> after the <samp>expose</samp> or <samp>mask</samp> call. You can supply a different configuration on each call and the latest call is remembered. A subsequent <samp>expose</samp> call for example will use the previously used configuration if no arguments are given.
</p>
<p>
You can also use an existing element as a mask. By default the tool uses an element whose id is <samp>exposeMask</samp> and if it does not exist, then it is created automatically.
</p>
<p>
The new configuration variable <samp>startOpacity</samp> defines the initial transparency level of the mask before it starts fading in to the desired opacity as specified by the <samp>opacity</samp> option. You can, for example, start with full opacity and gradually fade to a semi-transparent mask.
</p>
<p>
On some occasions the mask did not fill the whole space of the document. Now these rare occasions have been eliminated. When the mask closes, all document listeners are removed making the page one thousand millisecond more responsive.
</p>
<a name="flashembed"></a>
<h2>Flashembed</h2>
<p>
Flashembed is now part of the Toolbox and no longer one of the main UI tools. The major change in this tool that it no longer contains <samp>flashembed.domReady()</samp> function that can be used to evaluate code right after the DOM is ready. This feature is a core part of the mainstream JavaScript libraries including jQuery and should not be included here. Another change is that the <samp>flashembed()</samp> call must be evaluated <strong>after</strong> the container element. So this won't work
</p>
<div class="codebox"><figure class="code"><div class="highlight"><pre><span class="c"><!-- this setup won't work anymore! --></span><br /> <br /><span class="nt"><script></span><br /><span class="c1">// attempt to install Flash object inside a container that is *below* this call</span><br /><span class="nx">flashembed</span><span class="p">(</span><span class="s2">"flashContainer"</span><span class="p">,</span> <span class="s2">"my-flash-object.swf"</span><span class="p">);</span><br /><span class="nt"></script></span><br /> <br /><span class="c"><!-- container for Flash --></span><br /><span class="nt"><div</span> <span class="na">id=</span><span class="s">"flashContainer"</span><span class="nt">></div></span><br /></pre></div><br /><figcaption>HTML</figcaption></figure></div>
<p>
In the new version you need to move the script below the container:
</p>
<div class="codebox"><figure class="code"><div class="highlight"><pre><span class="c"><!-- container for Flash --></span><br /><span class="nt"><div</span> <span class="na">id=</span><span class="s">"flashContainer"</span><span class="nt">></div></span><br /> <br /><span class="c"><!-- this works --></span><br /><span class="nt"><script></span><br /><span class="nx">flashembed</span><span class="p">(</span><span class="s2">"flashContainer"</span><span class="p">,</span> <span class="s2">"my-flash-object.swf"</span><span class="p">);</span><br /><span class="nt"></script></span><br /></pre></div><br /><figcaption>HTML</figcaption></figure></div>
<p>
Upon initialization you can prefix the ID name with #- character. For example <samp>#mydiv</samp> simulating the syntax of jQuery selectors. For example:
</p>
<p>
Generated OBJECT code now contains a <samp>name</samp> attribute along with <samp>id</samp> attribute. This makes it possible to use ExternalInterface on some older browsers.
</p>
<div class="codebox"><figure class="code"><div class="highlight"><pre><span class="nt"><script></span><br /><span class="nx">flashembed</span><span class="p">(</span><span class="s2">"#flashContainer"</span><span class="p">,</span> <span class="s2">"my-flash-object.swf"</span><span class="p">);</span><br /><span class="nt"></script></span><br /></pre></div><br /><figcaption>HTML</figcaption></figure></div>
<p>
The tool no longer checks for Flash versions 6 and below. By the time of writing only 0.08 percent of users on Flowplayer website were using Flash 6 or below. No need to make complex logic for such minority.
</p>
<h3>Flashembed API changes</h3>
<ul>
<li>removed <samp>flashembed.domReady</samp> static function</li>
<li>removed <samp>getHTML</samp> API method</li>
<li>
renamed <samp>getFlashvars</samp> API method to <samp>getConf</samp> so that it follows the naming of other tools
</li>
<li>
renamed <samp>getConf</samp> API method to <samp>getOptions</samp>. This returns the embedding options for the Flash object and is much more descriptive name.
</li>
<li>
renamed <samp>getContainer</samp> API method to <samp>getRoot</samp>
</li>
</ul>
<p class="more">
In general Flashembed feels much more similar to other tools in the library. In previous versions it has been more of a black sheep.
</p>
<h2>Thanks to</h2>
<ul>
<li>
<strong>Christopher Vrooman</strong> for proof reading my not too perfect English.
</li>
<li>
<strong>Christian Ebert</strong> for trimming the documentation and helping with Github. A special thank you for <samp>slice()</samp>!
</li>
<li>
<strong>Stefan Penner</strong> for helping out with setting up the Github repositories
</li>
<li>
<strong>Marko Dumic</strong> for helping with a bug in scrollable.
</li>
</ul>
</div>
<div id="right">
<div class="notes">
<h2>Release Notes</h2>
<ul>
<li>
<a href="/release-notes/version-1.2.x.html">version-1.2.x</a>
</li>
<li>
<a href="/release-notes/version-1.2.0.html">version-1.2.0</a>
</li>
<li>
<a href="/release-notes/version-1.1.2.html">version-1.1.2</a>
</li>
<li>
<a href="/release-notes/version-1.1.1.html">version-1.1.1</a>
</li>
<li>
<a href="/release-notes/version-1.1.0.html">version-1.1.0</a>
</li>
<li>
<a href="/release-notes/version-1.0.X.html">version-1.0.X</a>
</li>
</ul>
</div>
<ul class="more_info">
<li>
<a href="https://github.com/jquerytools/jquerytools/issues">
report a bug »</a>
</li>
<li>
<a href="/release-notes/index.html">
<img src="/media/img/1.2/banner-small.jpg"
alt="Introducing jQuery Tools 1.2" />
</a>
</li>
<li>
<a href="/release-notes/version-1.2.x.html">
What's new in v1.2.6 » </a>
</li>
</ul>
</div>
</div>
<div id="bottom-wrap">
<div id="footer">
<div id="footerlinks">
<a href="http://twitter.com/jquerytools">Twitter feed</a>
|
<a href="https://github.com/jquerytools/jquerytools">
github repository
</a> |
<a href="https://github.com/jquerytools/jquerytools/issues">
report a bug
</a>
</div>
</div>
</div>
<script>
// toggle category
$("#right header").click(function() {
$(this).toggleClass("open");
$(this).next(".cat").toggleClass("active");
});
</script>
<script>
var _tracker = _gat._getTracker("");
</script>
</body>
</html>