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

$(document).hashevents();

Um das Plugin zu konfigurieren können Sie folgende drei Optionen übergeben

OptionsnameMögliche WerteDefault-WerteBeschreibung
basestring„“Die Base ist die Adresse auf die (wenn redirect aktiviert ist) umgeleitet werden soll. 

  • z.B. www.meinedomain.de
redirecttrue / falsetrueAktiviert man den redirect, so werden alle Anfragen die von der base-URL abweichen auf diese umgeleitet:

  • z.B. www.meinedomain.de/verzeichnis/datei.html wird auf www.meinedomain.de/#!verzeichnis/datei.html umgeleitet.
  • z.B. www.meinedomain.de/verzeichnis/datei.html?param=1 wird auf www.meinedomain.de/?param=1#!verzeichnis/datei.html umgeleitet.

In beiden Fällen werden alle Events die für „verzeichnis/datei.html“ registriert wurden ausgeführt.

onHashChangetrue / falsefalseDiese 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:

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

FunktionParameterBeschreibung
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'));
     });
});

Momentan können keine Kommentare hinterlassen werden.

DIESE KUNDEN VERTRAUEN AUF DREIWERKEN: WEBDESIGN-AGENTUR AUS ROSENHEIM

Durch das Fortsetzen der Benutzung dieser Seite, stimmst du der Benutzung von Cookies zu. Weitere Informationen

Die Website verwendet Cookies. Einige davon sind erforderlich, um die Funktionsfähigkeit der Website zu gewährleisten. Andere werden verwendet, um die Benutzerumgebung zu optimieren. Durch die Nutzung der Website stimmen Sie der Verwendung dieser Cookies zu. Weitere Informationen zu Cookies finden Sie in unserem Impressum.

Schließen