JQuery Tools (flowplayer.org)
Einführung
Die JQuery Tools sind eine Reihe nützlicher Navigations und Animationselemente die man vielfältig einsetzen kann. Der Autor gliedert sie in folgende Bereiche:
UI Tools -> Tabs, Tooltips, Overlay (Lightbox), Scrollable
Formtools -> Validator, Range Input, Date Input
Toolbox -> Expose, Flash Embed, Combinations
UI Tools
Allgemeine Vorgehensweise
Javascript - UI Tools einbinden + CSS (bei Bedarf)
<head> ... <!-- include the Tools --> <script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script> <!-- standalone page styling (can be removed) --> <link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/standalone.css"/> ... </head>
Tooltips
Tools einbinden s.o.
CSS Beispiel
<!-- tooltip styling -->
<style>
/* tooltip styling. by default the element to be styled is .tooltip */
.tooltip {
display:none;
background:transparent url(/tools/img/tooltip/black_arrow.png);
font-size:12px;
height:70px;
width:160px;
padding:25px;
color:#fff;
}
/* style the trigger elements */
#demo img {
border:0;
cursor:pointer;
margin:0 8px;
}
</style>
Tooltips konfigurieren
<body>
...
<!-- use gif image for IE -->
<!--[if lt IE 7]>
<style>
.tooltip {
background-image:url(/tools/img/tooltip/black_arrow.gif);
}
</style>
<![endif]-->
<!-- a couple of trigger elements -->
<div id="demo">
<img src="http://static.flowplayer.org/tools/img/photos/1.jpg"
title="A must have tool for designing better layouts and more intuitive user-interfaces."/>
<img src="http://static.flowplayer.org/tools/img/photos/2.jpg"
title="Tooltips can be positioned anywhere relative to the trigger element."/>
<img src="http://static.flowplayer.org/tools/img/photos/3.jpg"
title="Tooltips can contain any HTML such as links, images, forms, tables, etc."/>
<img src="http://static.flowplayer.org/tools/img/photos/4.jpg" style="margin-right:0px"
title="There are many built-in show/hide effects and you can also make your own."/>
</div>
<script>
$("#demo img[title]").tooltip();
</script>
...
</body>
Overlay (Lightbox)
Im Setup werden die Trigger festgelegt, also die Elemente auf die man klicken soll. Das ist ein normaler jQuery Selektor. Wenn man die Trigger Elemente klickt öffnet sich das Overlay Element welches im rel Attribut des Triggers festgelegt ist.
// select one or more elements to be overlay triggers
$(".my_overlay_trigger").overlay({
// one configuration property
color: '#ccc',
// another property
top: 50
// ... the rest of the configuration properties
});
Öffentliche Server für jQuery Tools
Für den schnellen Test:
Here is a list of all available jQuery Tools combinations from a free Content Delivery Network.
<!-- UI Tools: Tabs, Tooltip, Scrollable and Overlay (4.45 Kb) --> <script src="http://cdn.jquerytools.org/1.2.6/tiny/jquery.tools.min.js"></script> <!-- Form tools: Dateinput, Rangeinput and Validator. No jQuery library. (5.98 Kb) --> <script src="http://cdn.jquerytools.org/1.2.6/form/jquery.tools.min.js"></script> <!-- ALL jQuery Tools. No jQuery library --> <script src="http://cdn.jquerytools.org/1.2.6/all/jquery.tools.min.js"></script> <!-- jQuery Library + UI Tools --> <script src="http://cdn.jquerytools.org/1.2.6/jquery.tools.min.js"></script> <!-- jQuery Library + ALL jQuery Tools --> <script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
If you prefer to load the jQuery library separately the recommended practice is to load jQuery from Google's CDN service. Make sure the jQuery library is always loaded before the jQuery Tools library.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
