JQuery Tools (flowplayer.org): Unterschied zwischen den Versionen
Aus Wikizone
Steff (Diskussion | Beiträge) (Einbinden der jQuery Tools Tooltips) |
|||
| Zeile 3: | Zeile 3: | ||
Die JQuery Tools sind eine Reihe nützlicher Navigations und Animationselemente die man vielfältig einsetzen kann. Der Autor gliedert sie in folgende Bereiche: | 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, Scrollable | + | '''UI Tools''' -> Tabs, Tooltips, Overlay (Lightbox), Scrollable |
'''Formtools''' -> Validator, Range Input, Date Input | '''Formtools''' -> Validator, Range Input, Date Input | ||
'''Toolbox''' -> Expose, Flash Embed, Combinations | '''Toolbox''' -> Expose, Flash Embed, Combinations | ||
| − | |||
== UI Tools == | == UI Tools == | ||
Version vom 12. Oktober 2011, 08:25 Uhr
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> ...<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."/><script> $("#demo img[title]").tooltip(); </script> ... </body>
