Wikizone - Benutzerbeiträge [de]

JQuery Tools (flowplayer.org)

2011-10-12T17:29:00Z

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

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

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

== Öffentliche Server für jQuery Tools ==
Für den schnellen Test:

Here is a list of all available jQuery Tools combinations from a free Content Delivery Network.
<pre>

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


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


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


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


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

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

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

<pre>
// 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
$("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);

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

JQuery Tools (flowplayer.org)

2011-10-12T11:47:44Z

178.2.237.197: /* Global konfigurieren */

JQuery Tools (flowplayer.org)

2011-10-12T11:47:00Z

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

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

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

== Öffentliche Server für jQuery Tools ==
Für den schnellen Test:

Here is a list of all available jQuery Tools combinations from a free Content Delivery Network.
<pre>

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


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


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


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


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

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

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

JQuery - Probleme lösen (Troubleshooting)

2011-10-12T11:41:46Z

178.2.237.197: /* Testen welche Tools geladen sind */

== jQuery mit anderen Libaries nutzen ==
Manchmal gibt es Probleme wenn andere Skripte ebenfalls das Dollar ($) Symbol nutzen.

Typische Fehler sind dann z.B. “$().ready is not a function” “$(document) doesn’t support this property or method”. Oder: “null is null or not an object”

Hier gibt es 2 Möglichkeiten die man probieren kann:
=== No Conflict Mode ===
Hier wird das $ Zeichen mit einem anderen frei wählbaren Zeichen ersetzt. Es gibt aber auch ähnliche Möglichkeiten wie beim nächsten Beispiel.

http://api.jquery.com/jQuery.noConflict/

=== jQuery Scope in anonyme Funktion ===

Hierbei wird der Code innerhalb einer Anonymen Funktion ausgeführt und in dieser gilt wiederum ein lokaler jQuery Scope. Sie wird also unabhängig vom Rest der Skripte ausgeführt. Dies funktioniert auch wenn jQuery schon im no conflict Mode läuft und zwar ohne Anpassung der Skripte.

<pre>
<script type="text/javascript">
/*<![CDATA[*/

/*]]>*/
</script>

Quelle: [[http://codeimpossible.com/2010/01/13/solving-document-ready-is-not-a-function-and-other-problems]] Zugriff 10/2011
</pre>

=== JavaScript Debug Infos auf die Konsole ausgeben ===
Mit der log Funktion des Konsole Objekts kann man Debug Infos direkt auf die JavaScript Konsole ausgeben.

jQuery Beispiel:

<pre>
// Nach Kindern der Klasse .myClassName suchen und deren Objekte, ids und Klassen ausgeben
var $kids = $('.myClassName').children().each(function(){
var kid = $(this);
console.log(kid, kid.attr('id'), kid.attr('class'));
});
// "Test" ausgeben ;-)
console.log("test");
</pre>

=== Testen welche Tools bei jQuery Tools geladen sind ===
Konsole:
console.dir($.tools);

JQuery - Probleme lösen (Troubleshooting)

2011-10-12T11:41:08Z

178.2.237.197: /* JavaScript Debug Infos auf die Konsole ausgeben */

JQuery Tools (flowplayer.org)

2011-10-12T11:32:56Z

178.2.237.197: /* Overlay (Lightbox */

JQuery

2011-10-12T11:31:41Z

178.2.237.197: /* Links */

==Quickstart==

http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

Gut durchlesen, hier werden die meisten Basics angesprochen.

== Links ==
Elemente auswählen: http://docs.jquery.com/DOM/Traversing/Selectors

Ereignisse: http://docs.jquery.com/Events

Gute Tools out of the Box:
Erste Wahl mit allem was man so braucht sind die jQuery Tools:

http://flowplayer.org/tools/index.html

Oder in Kurzform hier: [[JQuery Tools (flowplayer.org)]]

==Einbinden==
Es gibt die Core Datei und einige nützliche Erweiterungen die man sich passend zusammestellen kann um die Download Größe klein zu halten. Außerdem gibt es gepackte Versionen.

===Über Google===
Beispiel:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

ui steht für User Interface (Plugins)

=== Über jQuery Server ===
Beispiel:
<script src="http://code.jquery.com/jquery-latest.js"></script>

=== Libary auf eigenem Server ===
==== Geo-bit webmynet ====
ToDo -> Idee ist verschiedene libs auf tools.webmynet.de vorzuhalten ähnlich wie sie auf dem Google Server liegen.
Zweck: einfache Einbindung, Statistik, Testing

=== Typo3 ===
siehe JavaScript Frameworks nutzen

== Der Beginn ==
In der Regel soll es losgehen, sobald das Dokument geladen ist (weil dies für manche Manipulationen notwendig ist) Deshalb beginnt man i.d.R. mit einem Onload Event:

$(document).ready(function() {
// do stuff when DOM is ready
});

Oder Abgekürzt

$(function() {
// do stuff when DOM is ready
});

== Reagieren auf Klick ==
<pre>
$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});

</pre>
$("a")
bedeutet Das was jetzt kommt gilt für alle Links
.click()
es soll bei Klick etwas passieren

Früher hat man das so gelöst:
<a href="" onclick="alert('Hello world')">Link</a>
Das funktioniert, allerdings muß man hier bei jedem Link den Schnipsel einfügen.

== Zugriff auf Elemente ==
Old School:
document.getElementById("orderedlist")
Mit JQuery analog zu obigem Beispiel
<pre>
$(document).ready(function() {
$("#orderedlist").addClass("red");
});

</pre>
Hier wird noch eine Klasse eingebaut

'''Weitere Beispiele:'''

$("#orderedlist > li")
Alle Listenelemente unterhalb #orderedlist
#orderedlist li:last
Hier ist nur das letzte Listenelement gemeint.
<pre>
$(document).ready(function() {
$("#orderedlist li:last").hover(function() {
$(this).addClass("green");
},function(){
$(this).removeClass("green");
});
});
</pre>
Die Hoverfunktion kann zwei Funktionen als Parameter aufnehmen.

== Elemente manipulieren, hinzufügen, entfernen ==

== Weitere Funktionen ==
find()
addClass()
removeClass()
hover()
each()
append()

== Ereignisse ==

== Weitere Beispiele ==
<pre>
// Find some li s and append Text
$("#orderedlist").find("li").each(function(i) {
$(this).append( " BAM! " + i );
});

$("a[href*=/content/gallery]").click(function() {
// do something with all links that point somewhere to /content/gallery
});

// use this to reset a single form
$("#reset").click(function() {
$("form")[0].reset();
});

// use this to reset several forms at once
$("#reset").click(function() {
$("form").each(function() {
this.reset();
});
});

// Find li elements that does NOT have a parent ul
$(document).ready(function() {
$("li").not(":has(ul)").css("border", "1px solid black");
});

// Find elements with a name attribute
$(document).ready(function() {
$("a[name]").css("background", "#eee" );
});

// Grab the parent
$("a").hover(function(){
$(this).parents("p").addClass("highlight");
},function(){
$(this).parents("p").removeClass("highlight");
});

</pre>

=== Testen ob jQuery geladen ist ===
Testen ob geladen, wenn nicht von google holen, wenn nicht verfügbar lokale Version nehmen

<pre>
jQuerySrc = 'fileadmin/js/jquery-min.js';

// only load jQuery if not present
if (typeof jQuery == 'undefined') {
document.write("<script type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js\"></"+"script>");
}

// if Google is down
if (typeof jQuery == 'undefined') {
document.write("<script type=\"text/javascript\" src=\"" + jQuerySrc + "\"></"+"script>");
}
</pre>

== Troubleshooting - Probleme Lösen ==
[[jQuery - Probleme lösen (Troubleshooting)]]

JQuery Tools (flowplayer.org)

2011-10-12T07:30:42Z

178.2.237.197: /* Tooltips */

JQuery Tools (flowplayer.org)

2011-10-12T07:30:03Z

178.2.237.197: /* Tooltips */

JQuery Tools (flowplayer.org)

2011-10-12T07:25:59Z

178.2.237.197: /* Einführung */