Snippet: Unobstrusive Javascript mit Prototype und Event-Selectors

October 17th, 2007

Tags: , , ,

Den Benutzer nicht gleich umzuleiten wenn er sicht registrieren möchte ist chique, modern und freundlich. Das geht aber nur mit Javascript, oder doppelten Code, bzw. zwei Formularen. Aber wenn der Benutzer kein Javascript hat, geht es entweder überhaupt nicht, oder wir müssen die Struktur so ändern, dass wir andere Links setzen.

Hier mal ein Vorschlag wie man das geschickt umgehen kann.

JAVASCRIPT:
  1. var AppRules = {
  2.   'a.swaplink:click': function(element) {
  3.     new Effect.toggle(element.getAttribute('href').split('#')[1], 'appear', {duration:0.4});
  4.       // brich den inhalt von href auseinander und verwende den hinteren teil.
  5.   }
  6. }
  7.  
  8. FastInit.addOnLoad(function(){
  9.     EventSelectors.start(AppRules);
  10. });

Unsere Links müssten dann so aussehen:

HTML:
  1. <a href="signup.php#signup" class="swaplink">Registrieren</a>

Unser Formular müsste dann eine versteckte Sektion beinhalten, welche die zur Registrierung zusätzlich notwendigen Felder beinhalten.

HTML:
  1. <div id="signup" style="display:none">
  2. ... wähle ein passwort, etc..
  3. </div>

Wenn Javascript aktiviert ist erhält der "swaplink" unser Event, welches "href" auseinanderbricht und nur das verwendet was hinter der Raute steht um ein Element mit der daraus resultierenden ID zu 'togglen'.

Wenn Javascript nicht aktiviert ist wird der Benutzer ganz einfach auf die "signup.php" umgeleitet. Zusätzlich hätte man auch die Sprungmarke auf der signup.php um es dem Benutzer noch angenehmer zu machen.

So einfach kann das sein! :)

Verwendete Bibliotheken: prototype.js, event-selectors.js, fastinit.js, effects.js

3 Kommentare zu “Snippet: Unobstrusive Javascript mit Prototype und Event-Selectors”

  1. 1 tontechniker Says:
    October 17th, 2007 at 15:08
    Afaik wäre es noch sinnvoller entweder das Formular mit Javascript zu erstellen oder auch dem Benutzer ohne Javascript anzuzeigen und erst mit Javascript (onDomReady) zu verstecken.
  2. 2 m3nt0r Says:
    October 17th, 2007 at 19:32
    Ja, das könnte man zusätzlich machen.

    Aber anstatt das Formular umständlich in JS zu erstellen, ist es wirklich das einfachste allen "JS-ONLY" Elementen eine spezielle Klasse zu geben und per default zu verstecken (display:none).

    Mit Javascript widerum erstellt man ein LINK-Tag im HEAD Bereich (dom-ready) welches auf ein Stylesheet zeigt dass die Elemente mit dieser JS-Klasse wieder anzeigt (display:block ! important).

    Sinn des Ganzen: Wenn Javascript nicht aktiviert ist, wird auch das Stylesheet nicht geladen und somit _bleiben_ die JS-ONLY Elemente versteckt.

    Warum nicht andersrum (erst zeigen, dann verstecken)? Weil onload langsam ist und dadurch es zu "hässlichen" sprüngen kommen "kann". Effekt wäre der natürlich gleiche.

  3. 3 stojan Says:
    October 25th, 2007 at 18:10
    diet koff ick

Trackbacks/Pingbacks

Noch keine Trackbacks/Pingbacks von anderen Blogs

Diesen Eintrag kommentieren