openlaw ressources : JavaScript

• Categories
• PageIndex
• RecentChanges
• RecentlyCommented
• Login/Register
• Search:

My docs to JavaScript

Tutaj gromadzę dokumentację podstaw ale i bardziej zaawansowanych funkcji javascript-u, które mogłyby się kiedyś przydać.

Ciekawe opisy / literatura:
- http://openbook.galileocomputing.de/javascript_ajax/index.htm

Veränderung des Aussehens von Elementen
Mit Hilfe von DOM (Document Object Model), das von den neueren Browsern (IE ab 5.5 und Netscape ab 6) unterstützt wird, kann man auf jedes Element zugreifen. Damit hat man auch Zugriff auf die Style-Informationen und kann das Aussehen des Elementes mit Hilfe von CSS verändern. Mit Hilfe von document.getElementById(id).style.GewEigenschaft kann man direkt die gewünschte CSS-Eigenschaft eines bestimmten Elementes ändern.
Beispiel: Das Element <p id="test">Irgendein Text</p> soll beim Überfahren mit der Maus rot werden. Dazu gibt man im Event-Handler 'onMouseOver' folgendes an.
var element = document.getElementById("test"); element.style.color = "#FF0000";. Soll der Text beim Verlassen der Maus wieder schwarz werden, steht im 'onMouseOut' document.getElementById('test').style.color = '#000000';

Bei diesem Beispiel könnte statt "document.getElementById('test')" auch einfach nur 'this' stehen, das funktioniert aber nur, wenn sich die Veränderung auf das gleiche Objekt bezieht, das das Event auslöst.

Dynamisches Ein- und Ausblenden von Objekten
Mit Hilfe von CSS können Elemente auch dynamisch ein- und wieder ausgeblendet werden. Dies sollte aber möglichst nur auf div-Elemente angewendet werden, das heisst, man umschliesst das gewünschte Element einfach mit einem div-Tag. (Vorsicht, es gehen nur gesamte Elemente, man kann also z.B. nur eine gesamte Tabelle, nicht aber nur eine Zeile einer Tabelle dynamisch ein- und ausblenden).
Beispiel:
Wir definieren zwei Funktionen einblenden(elementname) und ausblenden(elementname), die auf beliebige Elemente angewendet werden können.

Mit Hilfe von zwei Links, die diese Funktionen dann aufrufen, kann nun das Element dynamisch ein- und ausgeblendet werden. <a href="javascript:einblenden('element');">einblenden</a> <a href="javascript:ausblenden('element');">ausblenden</a>

---

ToolTips

przejęte ze strony:
http://webmatze.de/webdesign/javascript/tooltips.htm

Einleitung

Genau! Und heute möchte ich euch zeigen wie man mit sehr wenig JavaScript ansprechende Tooltips erstellen kann, die sich beliebig mit CSS formatieren lassen und deren Inhalt man mit HTML gestalten kann. Bei vielen anderen erhältlichen Scripts sind dafür häufig zig Zeilen Code notwendig. Worauf außerdem Wert gelegt werden soll, ist volle Funktionalität sowohl im Internet Explorer als auch im Mozilla. Und nicht zu vergessen Schnelligkeit!
Benötigtes HTML

Wir nehmen an das wir auf unserer Seite einen Link haben bei dem ein Tooltip erscheinen soll wenn jemand mit der Maus darüber fährt. Wie ein Link aussieht weiß sicher jeder:

<a href="#">Unser Link</a>

Den Tooltip selber definieren wir irgendwo auf der Seite, indem wir ein <div> Element erstellen und dieses mit Text füllen:

<div class="tooltip" id="1"> </div>

Wie ihr seht haben wir dem <div> Element ein class Attribut und ein id Attribut gegeben. Über id können wir gezielt mit JavaScript darauf zugreifen und mit class können wir es mit einem CSS Style formatieren. Wie dieser Style aussieht steht hier:

<style type="text/css">
.tooltip { }
</style>

Die ersten beiden Zeilen sind notwendig, damit wir den Tooltip später überall positionieren können und damit er zuerst einmal nicht auf der Seite angezeigt wird. Die dritte Zeile bestimmt einfach nur die Hintergrundfarbe. Es könnte jedoch noch beliebig erweitert werden, z.B. eine andere Textfarbe.
Das Script

So und nun wollen wir das dieses Element eingeblendet wird. Also müssen wir die CSS Eigenschaft display von none auf block umschalten:

function showWMTT(id) { }

Wobei wir nun mit document.getElementById(id) über das vorhin definierte Attribut id auf das Element zugreifen und den Wert ändern. Und schon wird der Tooltip angezeigt. Doch noch nicht an der richtigen Position. Da wir wollen das es an der Stelle erscheint wo sich gerade die Maus befindet müssen wir die Mausposition abfragen und dann die top und left Eigenschaften des Elementes entsprechend anpassen:

document.onmousemove = updateWMTT;

function updateWMTT(e) { }

Dieser Code ist auf dem ersten Blick etwas kompliziert, aber im Grunde fragt er je nach Browser auf unterschiedliche Weise die aktuelle Mausposition ab und setzt dann den Tooltip entsprechend. Allerdings addieren wir hier jeweils noch 20 Pixel damit der Tooltip etwas nach unten rechts versetzt erscheint. Diese Funktion wird immer automatisch dann aufgerufen, wenn sich die Mausposition ändert.

Nun brauchen wir nur noch eine Funktion, die den Tooltip wieder ausblendet, wenn wir dies wollen:

function hideWMTT() { }

Zum Abschluß passen wir unseren Link von vorhin noch so an, das jeweils bei MousOver die Funktion showWMTT und beim MouseOut die Funktion hideWMTT aufgerufen wird:

<a href="#" onMouseOver="showWMTT('1')" onMouseOut="hideWMTT()">
Unser Link
</a>


Code:

• [Source]
• [History]
• 2009-02-20 13:34:11
• Owner: WojciechLisiewicz
• Your hostname is 18.119.14.235

Valid XHTML :: Valid CSS: :: Powered by WikkaWiki