JQuery Tools (flowplayer.org) - Versionsgeschichte

178.2.237.197: /* Tipps für jQuery Tools */

2011-10-12T17:29:00Z

Tipps für jQuery Tools

178.2.237.197: /* Global konfigurieren */

2011-10-12T11:47:44Z

Global konfigurieren

178.2.237.197: /* Öffentliche Server für jQuery Tools */

2011-10-12T11:47:00Z

Öffentliche Server für jQuery Tools

178.2.237.197: /* Overlay (Lightbox */

2011-10-12T11:32:56Z

Overlay (Lightbox

178.2.237.197: /* Tooltips */

2011-10-12T07:30:42Z

Tooltips

178.2.237.197: /* Tooltips */

2011-10-12T07:30:03Z

Tooltips

178.2.237.197: /* Einführung */

2011-10-12T07:25:59Z

Einführung

Steff: Einbinden der jQuery Tools Tooltips

2011-06-28T10:12:09Z

Einbinden der jQuery Tools Tooltips

Neue Seite

== 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>
...

<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>

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

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




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

← Nächstältere Version		Version vom 12. Oktober 2011, 17:29 Uhr
Zeile 199:		Zeile 199:

	console.dir($.tools.overlay.conf);		console.dir($.tools.overlay.conf);
		+
		+	=== Auf Target Elemente zugreifen ===
		+	Um auf Elemente die ein Event gefeuert haben nimmt man bei jQuery event.target bei den jQuery Tools gibt es die Funktion getContent(), das eine Referenz zurückgibt.
		+
		+	Beispiel: Hinzufügen beim Öffnen eines Overlays, beim schließen wird sie wieder entfernt. Weiter unten wird ein Printlink gesetzt. Im Weiteren kann man mittels print css alles ausblenden bis auf den geöffneten content.
		+
		+	<pre>
		+	<script src="fileadmin/js/jquery.tools.overlay.min.js" type="text/javascript"></script>
		+	<script>
		+	$(document).ready(function(){
		+	$(".trigger").overlay({
		+	mask: '#000',
		+	onLoad: function(event){
		+	this.getOverlay().addClass("print_content");
		+	},
		+	onBeforeClose: function(event){
		+	this.getOverlay().removeClass("print_content");
		+	}
		+	});
		+
		+	$(".printlink").click(function(){
		+	//$(this).parent().addClass("print_content");
		+	window.print();
		+	}
		+	);
		+	});
		+	</script>
		+	</pre>

@@ Zeile 175: / Zeile 175: @@
 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:
   // all overlays use the "apple" effect by default
   $.tools.overlay.conf.effect = "apple";
+</pre>
 Afterwards you can simply do this:
+<pre>
   // "apple" effect is now our default effect
   $("a[rel]").overlay();
+</pre>
 Of course you can override these default settings just like before:
+<pre>
-// override the global configuration setting
+ // override the global configuration setting
   $("a[rel]").overlay({effect: 'default'});
+</pre>
 Every tool has a global configuration under $.tools.[TOOL_NAME].conf. For example $.tools.tabs.conf. You can change many global settings simultaneously by using jQuery built-in $.extend method as follows:
+<pre>
   $.extend($.tools.overlay.conf, {
 	effect: 'apple',
 	speed: 1000
   });
+</pre>
 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:
   console.dir($.tools.overlay.conf);

← Nächstältere Version		Version vom 12. Oktober 2011, 11:47 Uhr
Zeile 131:		Zeile 131:
	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.		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>	+	== Tipps für jQuery Tools ==
		+
		+	=== Schnell einbinden über Content Delivery Network ===
		+	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">
		+	</script>
		+
		+	http://cdn.jquerytools.org/1.2.6/jquery.tools.min.js
		+
		+	=== Welche Tools sind geladen ? ===
		+
		+	Konsole:
		+	console.dir($.tools);
		+
		+	=== Tools initialisieren ===
		+	Immer nach gleichem Muster:
		+	<pre>
		+	// initialize tools.scrollable with configuration variables
		+	$("#wrap").scrollable({
		+	keyboard: false,
		+	circular: true
		+	});
		+	</pre>
		+
		+	=== Konstruktor gibt betroffene Elemente zurück ===
		+	Return value
		+
		+	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 scrollable tool as our example:
		+
		+	<pre>
		+	// 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
		+	});
		+
		+	</pre>
		+	=== Global konfigurieren ===
		+	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:
		+
		+	// all overlays use the "apple" effect by default
		+	$.tools.overlay.conf.effect = "apple";
		+
		+	Afterwards you can simply do this:
		+
		+	// "apple" effect is now our default effect
		+	$("a[rel]").overlay();
		+
		+	Of course you can override these default settings just like before:
		+
		+	// override the global configuration setting
		+	$("a[rel]").overlay({effect: 'default'});
		+
		+	Every tool has a global configuration under $.tools.[TOOL_NAME].conf. For example $.tools.tabs.conf. You can change many global settings simultaneously by using jQuery built-in $.extend method as follows:
		+
		+	$.extend($.tools.overlay.conf, {
		+	effect: 'apple',
		+	speed: 1000
		+	});
		+
		+	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:
		+
		+	console.dir($.tools.overlay.conf);

@@ Zeile 91: / Zeile 91: @@
 </pre>
-=== Overlay (Lightbox ===
+=== 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.
 <pre>
@@ Zeile 106: / Zeile 106: @@
 });
 </pre>

@@ Zeile 89: / Zeile 89: @@
 ...
 </body>
-<pre>
+</pre>
 === Overlay (Lightbox ===

← Nächstältere Version		Version vom 12. Oktober 2011, 07:30 Uhr
Zeile 90:		Zeile 90:
	</body>		</body>
	<pre>		<pre>
		+
		+	=== 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.
		+	<pre>
		+	// 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
		+	});
		+	</pre>

@@ 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:
-'''UI Tools''' -> Tabs, Tooltips, Overlay, Scrollable
+'''UI Tools''' -> Tabs, Tooltips, Overlay (Lightbox), Scrollable
 '''Formtools''' -> Validator, Range Input, Date Input
 '''Toolbox''' -> Expose, Flash Embed, Combinations
 == UI Tools ==