-
Notifications
You must be signed in to change notification settings - Fork 7
/
basics.html
792 lines (657 loc) · 25 KB
/
basics.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
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
---
index: 1
title: jQuery tools basics
---
{% block blurb %}
<h2 class="first">In this document</h2>
<p>
This document describes common practices for each of the tools such
as:
</p>
<ul>
<li><a href="#html">The role of HTML</a></li>
<li><a href="#jquery">The role of JavaScript and jQuery</a></li>
<li><a href="#css">The role of CSS</a></li>
<li><a href="#graphics">Graphic design and Presentation</a></li>
<li><a href="#include">Including the Tools</a></li>
<li><a href="#initialize">Initializing the Tools</a></li>
<li><a href="#global_configuration">Using global configurations</a></li>
<li><a href="#extending">Using jQuery Tools plugins and effects</a></li>
</ul>
{% endblock %}
{% block content %}
<a name="html"></a>
<h2>The role of <em>HTML</em></h2>
<p>
jQuery Tools was primarily developed for "normal" HTML
developers. You either have an existing website or are starting with
a new one and these tools are used to enhance it. The goal here is
to use "progressive enhancement" so that browsers that do not
support JavaScript at all can still visualize your content.
</p>
<p>
These tools are not bound to any specific HTML structure. For
example, tabs can be constructed
from <samp>ul</samp>, <samp>ol</samp>, <samp>dl</samp>, <samp>div</samp>
or <samp>table</samp> elements. The same is true of our other jQuery
Tools as well. The most important thing is to <em>understand</em>
what you are doing and what HTML element is suitable for which
specific situation.
</p>
<p>
All of the tools deal with a <em>root element</em> which is
typically a <samp>div</samp> element, but it does not have to
be. For example, a root element for an overlay is the one that
contains all overlayed data. In every tool you can have <em>any</em>
combination of HTML inside the root element such as images, forms,
Flash objects and tables.
</p>
<a name="jquery"></a>
<h2>The role of <em>JavaScript</em> and <em>jQuery</em></h2>
<p>
<a href="http://www.jquery.com" class="external">jQuery</a> is a
fast and concise JavaScript library that simplifies the development
of cross-browser applications. All <samp>tools</samp>
except <a href="flashembed.html">flashembed</a> are dependent on
this library. jQuery skills are <strong>not required</strong> when
using these tools. People have been using these tools without any
prior knowledge about jQuery and even JavaScript itself. Of course,
those skills would be a great help, but they are not required.
</p>
<p>
If you want to enhance your jQuery and JavaScript skills, the best
things to learn about when using these tools would definitely
be <a href="http://api.jquery.com/category/selectors/"
class="external">jQuery selectors</a>
and <a href="http://www.dyn-web.com/tutorials/obj_lit.php"
class="external">object literals</a>. The first skill is used to
select elements from the page to be enhanced with the tools and the
latter is used for configuring the tools. Here is an example that
introduces you to both of these skills:
</p>
{% filter syntax('js') %}
// two jquery selectors and a configuration given as an object literal
$("#content ul.tabs").tabs("div.panes > div", {
// configuration variables
current: 'current',
effect: 'fade'
});
{% endfilter %}
<p>
Here we have two jQuery selectors. The first one selects
all <samp>ul</samp> elements whose class name is <samp>tabs</samp>
which are all contained inside an element whose <samp>id</samp> is
"content". This query is similar to CSS selectors and if you know
CSS, you will feel at home here. The second selector selects
all <samp>div</samp> elements that are directly nested inside
a <samp>div</samp> whose class name is <samp>panes</samp>.
</p>
<p>
Finally, we have a configuration object starting with <samp>{</samp>
and ending with <samp>}</samp>. It contains a comma-separated list
of name-value pairs. The name is followed by a colon which is
followed by a value. The value can be a number, string, boolean,
array, function or another object literal. Care must be taken to
enclose string values in quotes. That is about it. You use this
syntax to configure these tools.
</p>
<a name="document_ready"></a>
<h3>Execute your scripts when the document is ready</h3>
<p>
It is important that you execute all your scripts only after the
document is ready and scriptable. This can be done by enclosing your
JavaScript calls inside a <samp>$(document).ready()</samp> block as
follows:
</p>
{% filter syntax('js') %}
$(document).ready(function() {
// put all your JavaScript wizardry here
});
{% endfilter %}
<p>
This might be the most important thing in jQuery. Everything inside
the block will load as soon as the document is scriptable
but <em>before</em> the whole page contents such as images and Flash
are loaded. Everything that you stick inside the braces is ready to
go at the earliest possible moment. And as opposed to the
traditional old-school "onload" attribute in the <samp>body</samp>
tag you can have multiple <samp>$(document).ready()</samp> blocks on
your page.
</p>
<p>
You can also use a shorter syntax:
</p>
{% filter syntax('js') %}
$(function() {
// same thing here.
});
{% endfilter %}
<p>
Which does exactly the same thing but is not so intuitive for a
newcomer.
</p>
<a name="css"></a>
<h2>The role of <em>CSS</em></h2>
<p>
Cascaded Style Sheets (CSS) are the industry standard for styling
the presentation and positioning of your elements. It is a powerful
language which can do many things that surprise even experienced web
developers. Learning this skill is definitely encouraged for every
web developer.
</p>
<p>
These tools are very strict about <strong>not</strong> mixing any
style declarations in the JavaScript code. You would think that this
is an obvious coding principle and should be taken for granted but
it isn't. Taking a quick look at the list
of <a href="http://plugins.jquery.com" class="external">jQuery
plugins</a> reveals many tools that mix CSS into their code and hard
code their style. Even if those styling variables are given as
configuration variables, be it borders, images, colors, size or
positioning, this leads to poor application design.
</p>
<p>
A proper tool should only rely on CSS <em>class names</em> - because
they offer a much more flexible styling environment. Let's take
the <samp>tabs</samp> tool as an example. It offers a configuration
variable called <samp>current</samp> representing a class name that
is set to the currently active tab. Lets say you have set the value
"active" as follows:
</p>
{% filter syntax('js') %}
$("ul.tabs").tabs("div.panes > div", {current: 'active'});
{% endfilter %}
<p>
After that you can style the current tab with CSS as follows:
</p>
{% filter syntax('css') %}
ul.tabs .active {
color: '#fff';
fontWeight: bold;
background-position:0 -40px;
}
{% endfilter %}
<p>
This means that you can have a whole CSS arsenal at your disposal
while designing what the currently selected tab should look
like. This kind of design principle is used throughout these
tools. There are no hidden surprises in the tools related to
styling. The tools are responsible for setting and removing classes
from elements and after that all style is the responsibility of
CSS. You can also customize all class names that these tools use.
</p>
<h3>Default CSS files</h3>
<p>
For each tool we offer a default CSS file that you can use as the
basis for your design. You can use the code, images and ideas from
there for free. No obligations. They are fully documented and coded
with good CSS practices. For example, you will never see this kind
of statement:
</p>
{% filter syntax('css') %}
/* define colors for body and p elements */
body {
color:#ccc;
}
p {
color:#ccc;
}
{% endfilter %}
<p>
Instead it will always be shortened to:
</p>
{% filter syntax('css') %}
body, p {
color:#ccc;
}
{% endfilter %}
<p>
This was just a primitive example of good CSS practice, but it is
used extensively in our CSS files.
</p>
<a name="graphics"></a>
<h2>Graphic design and presentation</h2>
<p>
Since you are not tied to any specific HTML/CSS structures, you have
lots of freedom in designing the look and feel of the tools. When
designing the presentation of these tools or basically anything on
the web, you have three important but different approaches to choose
from. Now think of designing a rounded box for any content or a
tooltip background for example. You have to choose one design
pattern and stick with it. Here are the advantages and disadvantages
of these choices:
</p>
<h3><em>1.</em> CSS-based design</h3>
<p>
This approach depends primarily on CSS for the presentation. You'll
use background colors, border colors and styling, web fonts and have
only minimal use of graphics.
</p>
<ul>
<li class="minus">
<strong>limited visual control</strong>. There are lots of things
you can tweak with CSS, but in the end they are limited and you
simply cannot do everything with them.
</li>
<li class="plus">
<strong>scalable size</strong>. Your elements can stretch
horizontally and vertically without problems.
</li>
<li class="plus">
<strong>maintenable</strong>. You can easily change the design
just by editing a few lines of code.
</li>
<li class="plus">
<strong>lightweight</strong>. CSS files are text which means that
they can be downloaded much faster than images. CSS files can also
be compressed and GZIPped which makes them even faster.
</li>
</ul>
<p>
There are lots of new features in the latest CSS version such as
rounded borders, gradient borders, shadows and opacity, but these
are not yet supported by every major browser. Some of the demos on
this site uses these CSS3 features. If you are using
Firefox 3.5, Safari 4.0 or other CSS3 compatible browser
please take a look at the
<a href="{{ content_url('demos/combine/scrollable-gallery-with-tooltips.html') }}">scrollable gallery with tooltips</a>
demo and click on the thumbnails. You'll
see nice looking drop shadows on the overlay. As you can see you can
create stunning looks by only using CSS and the design will also be
well-behaved in older browsers.
</p>
<h3><em>2.</em> Image-based design</h3>
<p>
In this approach you'll typically use a single background image that
is optimized for the purpose.
</p>
<ul>
<li class="plus">
<strong>Best visual control.</strong> Your design will look
exactly how you want it to look. No compromises.
</li>
<li class="minus">
<strong>Fixed size.</strong> Your elements' width and height is
fixed. You have to optimize the content to fit inside elements and
for excessive content you must rely on scripting or scrollbars.
</li>
<li class="minus">
<strong>Heavy.</strong> More kilobytes to download and more
requests to the server. Heavy use of images will slow down your
pages.
</li>
</ul>
<h3><em>3.</em> CSS <strong>and</strong> image-based design</h3>
<p>
With this approach you'll use a lot of CSS tricks together with
multiple background images.
</p>
<ul>
<li class="plus">
<strong>Best of both worlds.</strong> Scalable elements that look
good.
</li>
<li class="minus">
<strong>Lots of work.</strong> You must master CSS, and a tight
integration with the graphics designer is needed. This approach
requires more planning.
</li>
</ul>
<p>
jQuery Tools allows you to use any of above approaches and it does
not restrict you to any hard-coded CSS coding or theming
frameworks. Our demo area contains examples of all these approaches,
but we mainly use the second approach. We typically use a single
background image to demonstrate the tool in an appealing manner. We
also offer you a lot of different general-use background images that
you can use as the basis for your own design.
</p>
<a name="png24"></a>
<h3><strong>PNG-24 format</strong></h3>
<p>
This website uses a lot of semi-transparent PNG-24 images which are
not natively supported by IE6.
</p>
<div class="box petrol">
jQuery Tools are <strong>proven</strong> to work with IE
6.0+</strong> but this website does not optimize the visual
experience for IE6 users.
</div>
<p>
Because of this and many other huge limitations in IE6 all major
players such as YouTube
are <a href="http://www.techcrunch.com/2009/07/14/youtube-will-be-next-to-kiss-ie6-support-goodbye/"
class="external">dropping the support for IE6</a>. Having said that
we can get to the real point.
</p>
<p>
When saving your web graphics, you should really consider using the
PNG-24 file format. It has support for <a class="external"
href="http://en.wikipedia.org/wiki/Alpha_compositing">alpha
transparency</a>. This means that you can use any kind of opacity
setting on your image. It's like working with Adobe Photoshop's
layers. You can layer multiple PNG images on top of each other and
there is lots of room for experimentation. Below you can see two
images. The gray box is a PNG24 image with alpha transparency.
</p>
<p>
<img src="{{ media_url('img/global/logo/eye.png') }}" border="0" />
<img src="{{ media_url('img/tooltip/white_big.png') }}" border="0"
style="margin-left:-150px"/>
</p>
<p>
If you are not using IE6 you can see the eye <em>through</em> the
PNG24 image. Many sites don't yet take full advantage of this
wonderful graphics format.
</p>
<h4>Internet Explorer 6.0</h4>
<p>
<strong>Alpha transparency is not natively supported by Internet
Explorer 6.0</strong>. It is possible to make it work in IE6 by
using the IE-proprietary AlphaImageLoader filter but, according to
recent studies by Yahoo, this
technology <a href="http://developer.yahoo.com/performance/rules.html#no_filters"
class="external">should be avoided</a>. The problem with this filter
is that it blocks rendering and freezes the browser while the image
is being loaded; it increases memory consumption and is applied per
element, not per image, so the problem is multiplied.
</p>
<p>
You'll definitely get the most reliable results by using GIF or JPG
images in place of PNG images on IE6. You can override this in your
CSS as follows:
</p>
{% filter syntax('css') %}
#myelement {
background-image: url(corner.png); /* all browsers */
_background-image: url(corner.jpg); /* IE6 only */
}
{% endfilter %}
<p>
The initial underscore is a hack that causes the CSS setting to be
applied only to versions of IE older than 7. You may have the
patience to do this, but I don't.
</p>
<h4>PNG24 and opacity in all versions of IE</h4>
<p>
If you programmatically change the opacity of a PNG image in all
versions of Internet Explorer it will cause ugly black borders
around the image as seen in this screenshot:
</p>
<p>
<img src="{{ media_url('img/png24-ie.png') }}" border="0" />
</p>
<p>
This bug makes it impossible to make fading animations with PNG
images in Internet Explorer. For this reason the Tooltip "slide"
effect uses opacity fading in every browser other than in IE. This
is the default behaviour but you can of course change this if your
tooltip is not decorated with PNG graphics. Take a look at
the <a href="{{ content_url('documentation/tooltip/index.html') }}">Tooltip front page</a> and
look at the first demo in Firefox and then in IE. The tooltip fades
in/out in Firefox but uses the sliding effect without opacity
changes in IE.
</p>
<p>
This "black box" bug can also happen in situations where a PNG image
is placed on top of a transparent layer. I noticed this happening
in <a href="{{
content_url('demos/combine/scrollable-gallery-with-tooltips.html')
}}">this demo</a>.
</p>
<a name="include"></a>
<h2><em>Including</em> the Tools</h2>
<p>
The first thing you must do is include the tools on your pages. You
can place the following statement on your page and you are ready to
go:
</p>
{% filter syntax('html') %}
{{ jqt.js }}
{% endfilter %}
<p>
This will include the tools on your page with maximum
performance. We are offering this high performance content delivery
network (CDN) for free. You can use it in production
environments. Enjoy!
</p>
<p>
If you are using <a href="http://getfirebug.com/"
class="external">Firebug</a> or similar JavaScript debugger you can
easily test which tools are included and what are their versions by
running the following command from the console:
</p>
{% filter syntax('js') %}
console.dir($.tools);
{% endfilter %}
<p>
You'll see following kind of result
</p>
<p style="margin:20px 0">
<img src="{{ media_url('img/global-conf.gif') }}" alt="Global Configuration" />
</p>
<p>
You can see each tool you have included and the version number. If
you drill down a little deeper into these global settings you will
see each tool's default configuration values (a good source of
"documentation"!) which are discussed more extensively in the
important <a href="#global_configuration">global configuration</a>
section.
</p>
<a name="initialize"></a>
<h2><em>Initializing</em> the Tools</h2>
<p>
After the needed tools are included on the page, you need to
initialize them. All tools follow the same pattern. Initialization
always starts with a jQuery selector followed by the tool
initialization function (constructor) and its configuration
object. Here is an example using the <samp>scrollable</samp> tool:
</p>
{% filter syntax('js') %}
// initialize tools.scrollable with configuration variables
$("#wrap").scrollable({
keyboard: false,
circular: true
});
{% endfilter %}
<p>
This will make all elements scroll that are contained within an
element whose <samp>id</samp> is "wrap". Next, comes a tool
constructor named <samp>scrollable</samp> which takes a
configuration object as an <em>argument</em>. This object defines
the settings for how we want our elements to be scrolled. This
example above illustrates the general way you will initialize all
jQuery Tools.
</p>
<h3>Return value</h3>
<p>
The constructor will always return the jQuery object that is a
collection of the elements that are selected by the selector. This
is how all proper jQuery plugins are recommended to behave. Again we
use the <samp>scrollable</samp> tool as our example:
</p>
{% filter syntax('js') %}
// return elements specified in the selector as a jQuery object
var elements = $("div.scrollable").scrollable();
/*
now you can continue working with the jQuery object. you can,
for example, add new plugins and use built-in jQuery constructs
*/
elements.someOtherPlugin().onClick(function() {
// do something when this element is clicked
});
{% endfilter %}
<a name="global_configuration"></a>
<h2>Using global configurations</h2>
<p>
Although you can change the default settings of the tools by
supplying a configuration in the initialization phase you may be
using the same configuration settings over and over again. In this
case you may want to change the default configuration variables for
the tools so that you don't need to specify the same setting every
time. Here is an example of a global configuration setting:
</p>
{% filter syntax('js') %}
// all overlays use the "apple" effect by default
$.tools.overlay.conf.effect = "apple";
{% endfilter %}
<p>
Afterwards you can simply do this:
</p>
{% filter syntax('js') %}
// "apple" effect is now our default effect
$("a[rel]").overlay();
{% endfilter %}
<p>
Of course you can override these default settings just like before:
</p>
{% filter syntax('js') %}
// override the global configuration setting
$("a[rel]").overlay({effect: 'default'});
{% endfilter %}
<p>
Every tool has a global configuration
under <samp>$.tools.[TOOL_NAME].conf</samp>. For
example <samp>$.tools.tabs.conf</samp>. You can change many global
settings simultaneously by using jQuery
built-in <samp>$.extend</samp> method as follows:
</p>
{% filter syntax('js') %}
$.extend($.tools.overlay.conf, {
effect: 'apple',
speed: 1000
});
{% endfilter %}
<p>
The list of various configuration settings can be found on each
individual tool's documentation page. One important thing about the
global configuration is that it provides you a good source of
"documentation". Try typing the following command into your Firebug
console:
</p>
{% filter syntax('js') %}
console.dir($.tools.overlay.conf);
{% endfilter %}
<p>
And you should see the following information appear:
</p>
<p>
<img src="{{ media_url('img/global-config2.gif') }}"
title="Overlay configuration as seen from FireBug" />
</p>
<p>
Here you can see the available configuration options and their
default values. Very useful.
</p>
<a name="extending"></a>
<h2>Using jQuery Tools <em>plugins and effects</em></h2>
<p>
jQuery Tools is the first framework to take full advantage of
jQuery's powerful chaining technology. Here is an example of a
chaining pattern:
</p>
{% filter syntax('js') %}
// initialize a few scrollables and add more features to them
$(".scroller").scrollable({circular: true}).
navigator("#myNavi").autoscroll({interval: 4000});
{% endfilter %}
<p>
You take one or more <samp>.scroller</samp> elements from a page and
make them scrollable. The scrollable tool has only the absolute
necessary features to make things scroll. If you want to have more
features you can use <a href="#plugin">plugins</a>. In this example
we used the <samp>navigator</samp> plugin to setup a navigator
beside the scrollable. The <samp>autoscroll</samp> plugin makes the
items scroll automatically without any user interaction.
</p>
<p>
You can have multiple scrollables on the page and they can all be
activated with this single line of code. All plugins may have their
own set of configuration variables and they can also be set from
the <a href="#global_configuration">global configuration</a>.
</p>
<p>
Almost every tool has a few plugins that can be downloaded from
the <a href="{{ content_url('download/index.html') }}">download page</a>.
This kind of
design pattern makes the overall file size dramatically smaller
because you can only use the things you need. It also makes the code
more organized and easier to understand. In the programming world
this pattern is called
a <a href="http://en.wikipedia.org/wiki/Decorator_pattern"
class="external">decorator pattern</a> which is at the heart of
jQuery: "take a bunch of elements from a page and do stuff with
them". jQuery Tools takes this seriously and goes a step further
than other libraries.
</p>
<p>
Every tool has a built-in plugin architecture and you can
easily <a href="#plugin">write your own plugins</a>.
</p>
<a name="effects"></a>
<h3>Effects</h3>
<p>
Tabs, tooltip and overlay have a unique "effect framework" which
enables you to change the default behaviour of each tool. Here is an
example:
</p>
{% filter syntax('js') %}
// use the "apple" effect for the overlays
$("a[rel]").overlay({effect: 'apple'});
{% endfilter %}
<p>
This configuration makes the overlay use an effect called "apple"
which makes the overlay work as you may have seen on Apple's
website. The purpose of the effects is to <em>change</em> the
default behaviour whereas plugins <em>enrich</em> or add new
features. In the case of the overlay the actual tool provides the
basic functionality of overlaying such as initialization, keyboard
and mouse interaction and document masking (with the mask tool)
while the only job of the effect is to perform the opening and
closing actions of the tool. This makes it fairly easy to implement
different kind of effects. This design pattern makes the code more
organized and makes the overall file size smaller just like the
plugins.
<p>
<p>
Some tools have many built-in effects and some have only one. You
can also get more effects from
the <a href="{{ content_url('download/index.html') }}">download page</a>.
You can set
the default effect in the <a href="#global_configuration">global
configuration</a> so that you don't have to explicitly supply it to
every initial configuration.
</p>
<h4>Writing your own effects</h4>
<p>
Look at each individual tool's documentation for more information:
</p>
<ul>
<li>
<a href="{{ content_url('documentation/tabs/index.html') }}#effects">Writing effects for Tabs</a>
</li>
<li>
<a href="{{ content_url('documentation/tooltip/index.html') }}#effects">Writing effects for Tooltip</a>
</li>
<li>
<a href="{{ content_url('documentation/overlay/index.html') }}#effects">Writing effects for Overlay</a>
</li>
<li><a href="{{ content_url('documentation/validator/index.html') }}#effects">
Writing effects for Validator
</a></li>
</ul>
<p>
<strong>Note:</strong> it is possible to define custom configuration
variables for your effect by extending the global configuration. Say
you have a custom overlay effect with the configuration
property <samp>explosionSpeed</samp>; you can give it a default
value as follows:
</p>
{% filter syntax('js') %}
$.tools.overlay.conf.explosionSpeed = 500;
{% endfilter %}
<p>
After that the users can either use the default value or override it
from the overlay configuration.
</p>
{% endblock %}