Bearbeiten von „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, Scrollable

'''Formtools''' -> Validator, Range Input, Date Input

'''Toolbox''' -> Expose, Flash Embed, Combinations


== UI Tools ==
=== Allgemeine Vorgehensweise ===
'''Javascript''' - UI Tools einbinden + CSS (bei Bedarf)
<pre>
<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>
</pre>


=== Tooltips ===
Tools einbinden s.o.

'''CSS''' Beispiel
<pre>
<!-- 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> 

</pre>

'''Tooltips konfigurieren'''

<pre>
<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>
<pre>