JQuery Tools (flowplayer.org)
Aus Wikizone
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
});
