JQuery Tools (flowplayer.org): Unterschied zwischen den Versionen

Aus Wikizone
Wechseln zu: Navigation, Suche
 
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>

Aktuelle Version vom 12. Oktober 2011, 18:29 Uhr

Einführung[Bearbeiten]

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[Bearbeiten]

Allgemeine Vorgehensweise[Bearbeiten]

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[Bearbeiten]

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)[Bearbeiten]

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[Bearbeiten]

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.

Tipps für jQuery Tools[Bearbeiten]

Schnell einbinden über Content Delivery Network[Bearbeiten]

<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 ?[Bearbeiten]

Konsole: 

console.dir($.tools);

Tools initialisieren[Bearbeiten]

Immer nach gleichem Muster: 

// initialize tools.scrollable with configuration variables
$("#wrap").scrollable({
	keyboard: false,
	circular: true
});

Konstruktor gibt betroffene Elemente zurück[Bearbeiten]

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: 

// 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
});

Global konfigurieren[Bearbeiten]

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

Auf Target Elemente zugreifen[Bearbeiten]

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. 

<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>
Abgerufen von „https://wiki.stephanschlegel.de/index.php?title=JQuery_Tools_(flowplayer.org)&oldid=18870“