Archiv

Archiv für die Kategorie ‘JavaScript’

jQuery-Selektor mit regulären Ausdrücken

2. Januar 2013 Keine Kommentare

Wer mit dem Javascript-Framework jQuery arbeitet, der wird irgendwann merken, dass normale Selektoren wie #name oder .name nicht mehr ausreichen und man gezwungen ist reguläre Ausdrücke zu verwenden. Einen offiziellen Regex Selektor besitzt jQuery nicht. James Padolsey hat auf seiner Webseite einen Selector vorgestellt, mit dem man auch reguläre Ausdrücke nutzen kann.

Formular per AJAX-Request (jQuery) abschicken

5. Dezember 2012 Keine Kommentare

Das Abschicken von Formulardaten erfolgt in der Regel durch Drücken des Submitbuttons. Der Nutzer wird dann auf die jeweilige Seite weitergeleitet, die im HTML-Tag form als Attribut action angegeben ist. Bei dynamischen Webseiten kommt es oft vor, dass eine Berechnung von bestimmten Formulardaten und eine anschließende Aufbereitung und Anzeige der Ergebnisse benötigt wird.

Aufklappbares und zuklappbares div Element (jQuery)

7. November 2012 3 Kommentare

Will man für den Nutzer erweiterte, zusätzliche Informationen beim Laden der Seite ausblenden und nur bei einer bestimmten Aktion bzw. Event einblenden, wie zum Beispiel durch einen Klick (on click) oder durch Drüberfahren (on mouse over) mit dem Mauszeiger, dann kann man dafür ein kleines Javascript nutzen. Per CSS wird das div Element nach dem Laden der Webseite vorerst unsichtbar gemacht, ist jedoch im HTML Quelltext enthalten. Sehr schön kann man dafür dann jQuery mit bereits vorhandenen Effekten wie dem Slide einsetzen.

jQuery: Alle Checkboxen mit einem Klick auswählen

6. November 2012 Keine Kommentare

Vor allem in Adminbereichen und in der Verwaltung bzw. Pflege einer größeren Anzahl von Einträgen / Daten benötigt man Checkboxen. Grund ist in diesem Fall die Optimierung des Beabeitungsprozesses durch den Nutzer. In der Praxis wäre hier das Löschen von mehreren Bildern oder Einträgen, was man als Content zusammenfassen kann, ein gutes Beispiel dafür. In jeder Zeile und zu jedem Eintrag oder Bild könnte ein Button zum Löschen angezeigt werden. Allerdings müsste man so bei 50 Bildern beispielsweise 50 Mal auf den Button Löschen klicken. Die Zeitersparnis, die man mit Checkbox und einer Löschfunktion hätte, ist enorm.

Bei Mausklick einen Layer öffnen (jQuery)

2. November 2012 Keine Kommentare

Detailierte und zusätzliche Informationen zu einem Thema auf einer Webseite kann man per Klick auf einen Link in einem Layer bzw. Popup anzeigen lassen. Das macht in vielen Fällen Sinn, weil man den Nutzer nicht sofort mit Sachen bombadiert, die für ihn eher uninteressant sein könnten.

JQuery: Slideshow-Plugins mit wechselnden Bildern und Text

31. Oktober 2012 Keine Kommentare

Eine Slideshow sieht das Auge des Besuchers einer Webseite fast schon magisch an. Besonders mit einem „Fade in“ und „Fade out“ Effekt bei den Bildern und Texten wird die Aufmerksamkeit des Nutzers auf das interaktive Element Slider, auch besser bekannt als „Slide Show“ oder „Slideshow“, gelenkt. Ein sogenannter Slider mit wechselnden Bildern und Teasertext kann mittels des JQuery-Frameworks (Javascript) umgesetzt werden.

JQuery: Leere Felder mit Standardtext belegen

31. Oktober 2012 Keine Kommentare

Ansprechende Kontaktformulare oder aber ganz allgemeine Formulare wirken selbsterklärend, wenn die Textfelder mit beschreibenden Werten oder Texten vorbelegt sind. Bei einem Kontaktformular, welches die drei Felder Name, E-Mail und Nachricht beinhaltet, können die Felder zum Beispiel die Phrasen „Ihr Name“, „Ihre E-Mail-Adresse“ sowie „Ihre Nachricht“ als Standardwerte haben. Bei einem Klick in ein Feld sollte der jeweilige Standardtext verschwinden, sodass der Nutzer das Textfeld mit seinen eignen Text befüllen kann. Falls das Feld aber nun leer bleibt und der User in einen anderen Bereich klickt, sollte der Defaulttext wieder erscheinen.

Tablesorter-Beispiel: Tabelle ohne Laden sortieren

3. März 2012 1 Kommentar

Um Daten in einer Tabellen mit einem JavaScript ohne die Webseite erneut zu Laden im Browser nach einer bestimmten Spalte zu sortieren, kann das Tablesorter JQuery Plugin verwendet werden. Dieses feine JQuery Plugin sortiert eine HTML Tabelle mit Daten bei Klick auf einen Spaltennamen in die richtige Reihenfolge. Es können sowohl numerische Zahlen als auch alphabetisch Strings (ganze Wörter) sortiert werden.

JQuery: Gesamte div Box (Container) verlinken

25. Februar 2012 4 Kommentare

Besonders auf der Startseite machen sich Boxen mit dem Angebot und einem kleinen beschreibenden Text ganz gut. Man kann sein Produkt, einen Artikel, eine News oder eine weitere Unterseite kurz vorstellen und auf der Hauptseite mit einer Verlinkung hinterlegen. Bei Interesse klickt der Nutzer auf die Box, um genauere Details und Informationen zu bekommen. Irgendwo im Teasertext oder in der Überschrift (Titel) der Box ist ein HTML Link, den wir für das Linken des gesamten DIV Containers nutzen können.

Datepicker: Datum (Date) Felder vergleichen

21. Februar 2012 2 Kommentare

In meinem vorherigen Post habe ich über das Datepicker Plugin berichtet und wie man die englischen Beschriftungen (Tage, Monate) in die deutsche Sprache übersetzt. In diesem kleinen Tutorial Artikel möchte ich kurz zeigen, wie man Datepicker Felder, die ein Datum haben, miteinander vergleichen kann.