hashevent-Plugin
Ein nützliches Plugin für jQuery mit dem Sie beliebig viele Events für einen bestimmten Hash-Tag anmelden können, die dann automatisch ausgeführt werden, sobald dieser Tag in der URL gesetzt wird. Dieses Plugin haben wir ihm Rahmen eines Projektes entwickelt und hoffen, dass es dem einen oder anderem Entwickler weiterhilft.
Das Plugin: hashevents
Abhängigkeiten
Dieses Plugin erfordert für den optimalen Einsatz das jQuery-Plugin "hashchange", welches Sie auf der Seite des Entwicklers herunterladen können. http://benalman.com/projects/jquery-hashchange-plugin/
Wozu braucht man das Plugin
Erstellt man eine Website, bei der aus Usability- oder Layoutgründen bestimmte Elemente dynamisch mit AJAX nachgeladen werden. So steht man oft vor dem Problem, dass der Benutzer sich den Inhalt nicht in die Favoriten speichern kann oder den Link zu diesem Inhalt per E-Mail, etc. versenden kann.
Mit dem hashevent-Plugin kann man die URL der nachgeladenen Inhalte als Hash-Tag setzten und das Nachladen als Event an diesen Hash-Tag binden. Kommt nun ein Benutzer direkt mit diesem Hash auf die Seite, löste er ebenfalls das nachladen via AJAX aus und sieht den gewünschten Inhalt.
Dies ist nur ein Beispiel für den Einsatz des Plugins.
Wie funktioniert das Plugin
Das Plugin wird wie folg aktiviert.
$(document).hashevents();
Um das Plugin zu konfigurieren können Sie folgende drei Optionen übergeben
| Optionsname | Mögliche Werte | Default-Werte | Beschreibung |
| base | string | "" |
Die Base ist die Adresse auf die (wenn redirect aktiviert ist) umgeleitet werden soll.
|
| redirect | true / false | true |
Aktiviert man den redirect, so werden alle Anfragen die von der base-URL abweichen auf diese umgeleitet:
In beiden Fällen werden alle Events die für "verzeichnis/datei.html" registriert wurden ausgeführt. |
| onHashChange | true / false | false | Diese Funktion setzt das Plugin "hashchange" voraus und meldet das Plugin entsprechend an, sodass auch bei der Veränderung des Hash-Tags durch die Browser-History (Zurück und Vor) die Events ausgelöst werden. |
Beispiel konfiguration:
$(document).hashevents({
base: 'http://www.meinedomain.de/',
redirect: true,
onHashChange: true
});
Events registrieren und auslösen
Das Plugin stellt folgende Funktionen zur Verfügung:
| Funktion | Parameter | Beschreibung |
| $.hashevents.add() | tag (string) fn (function) |
Meldet die Funktion (fn) für den Hash-Tag (tag) an. |
| $.hashevents.set() | tag (string) | Setzt den Hash-Tag (tag) in die Url und löst $.hashevents.run() aus. |
| $.hashevents.get() | - | Liefert den aktuellen Hash-Tag aus der URL zurück |
| $.hashevents.runOnLoad() | - |
Löst $.hashevents.run() aus, wenn die Seite beireits mit einem Hash-Tag aufgerufen wird. Diese Methode sollte zum Schluß des Scripts aufgerufen werden. |
| $.hashevents.run() | [tag] (string) |
Startet alle angemeldeten Events für den übergebenen Hash-Tag (tag). Der Parameter ist optional. Wird kein Parameter übergeben, wird der aktuelle Hash-Tag der URL verwendet. |
Anweldungsbeispiele:
$(document).hashevents({
base: 'http://www.meinedomain.de/',
redirect: true,
onHashChange: true
});
$(document).ready(function(){
$.hashevents.add('tag1.html', function(){
alert('das ist der aktuelle Hash-Tag:' + $.hashevents.get());
});
$.hashevents.add('tag2.html', function(){
alert('DO SOMETHING');
});
$('span.button1').click(function(){
$.hashevents.set('tag1.html');
});
$('span.button2').click(function(){
$.hashevents.run();
});
$.hashevents.runOnLoad();
});
Ein kleiner Helfer
Zur Vereinfachung der Arbeit mit "hashevents" bietet das Plugin noch eine weitere Funktion an, die an jedes jQuery-Objekt angehängt werden kann.
| Funktion | Parameter | Beschreibung |
| setHash() | [fn] (function) |
Meldet die Funktion (fn) für jeden Anchor welches sich im Object befindet an. Als Hash-Tag wird der HREF des Anchors verwendet. Und setzt beim Klick auf den Anchor den Hash-Tag in die URL. Der Parameter ist optional. Wird kein Paramter übergeben, so wird beim einem Klick auf den Anchor der HREF als Hash-Tag in URL gesetzt. |
Anweldungsbeispiel:
$(document).ready(function(){
$('a.button1').setHash(function(){
// do something
});
$('a.button2').setHash();
});
Ist equivalent zu:
$(document).ready(function(){
$.hashevents.add($('a.button1').attr('href'), function(){
// do something
});
$('a.button1').click(function(){
$.hashevents.set($(this).attr('href'));
});
$('a.button2').click(function(){
$.hashevents.set($(this).attr('href'));
});
});