um was geht es beim Plugin?
Tja das fragen mich in letzter Zeit viele:

kurze Featureliste:

• Overlay mit Panel (kann verschoben werden)
• Facebookintegration
• Flickerintegration
• Twitterintegration
• Einbindung in HTML Code
• jede Public Function kann über ein Callback aufgerufen werden
• Ajaxunterstützung
• Timeversion pro Bild
• eigene Effekte
• Autoresize
• Kommentarfunktion
• Autoplay etc etc….

mehr mag ich noch nicht verraten, ist kein kleines Projekt – der Name steht auch noch nicht ganz fest.
Wahrscheinlich FishEye oder Fishme2Image oder sowas… keine Ahnung

Nun ist es endlich soweit jQuery Tools legt nach!

Neue Features:

• Formular Validator neue HTML5 Objekte – jQuery Tools Form
• History Plugin
• Scrollable – wurde komplett überarbeitet – es gibt jetzt sogar eine Kombi zu den Forms
• Leider ist das Gallery Plugin im Overlay weg

alle weiteren Änderungen findest du hier.

Naja im Grunde keine schwere Sache, doch warum soll man immer was neues erfinden?
Ich habe nun das jQuery Plugin – Timezone ComboBox ausprobiert, funktioniert recht fein, einfach JS Aufruf und DIV setzen fertig.

Wie das geht zeige ich dir hier:

Zuerst mal auf die jQuery Seite gehen und lade dir die 2 JS Files runter.

Dann in deinen HTML Code gehen und eine DIV mit einer ID setzen.

Dann noch in dein JS File folgenden Code hinzufügen

$('#timezone').timezoneComboBox( {refreshTime: 100000} );

Optionen:

refreshTime: ini (aktualisiert die Zeit vom Benutzer)
isHidden: True (erstellt statt der Selectbox ein Hiddenfeld mit der Zeitzone)

Jetzt fragst du dich sicher warum habe ich die refreshTime so hoch gedreht, ganz einfach weil wenn man jede Sekunde refreshen würde, verlierst du immer den Focus, falls der Benutzer gerade die Zeitzone ändern würde.

Das wars auch schon wieder, Viel Spass!

Nach kurzer Suche im Google bin ich dann auf den Datepicker von Kelvin Luck gekommen. Ich kenne schon ein anderes Plugin von ihm den jScrollPane – ein JS DIV Scroller. Mir gefällt sein Code, sauber und schnell und verdammt geil zu benutzen.

Heute möchte dir den Datepicker näher bringen, mit einer Datumsüberprüfung die über Ajax funktioniert.

Ziel des Beispiels: Deaktivierung von Tagen

1) Download des JS und CSS Files – lade dir auch die Date Klasse herunter
2) Binde nun die zwei Files in deinem Header ein

Erstelle folgendes Input Feld:

3) gehe nun in dein JS File

Wir bauen uns jetzt schnell mal ein kleines Ajax Event

 $.ajax({
            type: "GET",
            url: 'test.php',
            async: true,
            dataType: 'json',
            success: function(msg) {
                       $.each(msg.blockeddays, function(key,val) {
                           bookingdate[key] = val.date;
                        });
                           $('.date-pick').datePicker({
                            clickInput: enableClickInput,
                            renderCallback:function($td, thisDate, month, year) {
                                if (jQuery.inArray(thisDate.asString(),bookingdate)>0) {
                                    //disabled date
                                    $td.addClass('closed');
                                    $td.addClass('disabled');
                                }
                            }
                        })
            }
});

So jetzt fehlt nur noch das PHP File – test.php:

$days['blockeddays'][] = '14.04.2010';
$days['blockeddays'][] = '15.04.2010';
$days['blockeddays'][] = '16.04.2010';
echo json_encode($days);

Das war es schon, was machen wir hier jetzt? wir kontrollieren das Datum das gesperrt werden soll und setzen die Class disabled und closed.

Fertig – viel Spass!

• Tabs
• Scroller
• Expose
• Overlay (Lightbox)
• Tooltip
• Flash

hier gehts zu den jQuery TOOLS

Genaue Beschreibung etc. folgen in den nächsten Artikeln. Sei gespannt!

jScrolllPane schafft Abhilfe, denn man kann den Scrollbalken selbst definieren und wenn man kein Javascript eingeschaltet hat – is ma selbst schuld? – nein der bekommt dann den normalen Browser Scroller.

zum Plugin – jScrollPane

Hier ein Beispiel für die Integration:

      Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

$('#case-summary').jScrollPane({showArrows:true,scrollbarWidth:8});

und halt das CSS einbetten fertig, geht super flott und schaut auch noch gut aus.

zum Plugin – URL Parser

Hier einige Beispiele:

Unser Beispiel: https://mysite.com/information/about/index.html?itemID=2&user=dave

// get the protocol
jQuery.url.attr("protocol") // returns 'http'

// get the path
jQuery.url.attr("path") // returns '/information/about/index.html'

// get the host
jQuery.url.attr("host") // returns 'mysite.com'

// get the value for the itemID query parameter
jQuery.url.param("itemID") // returns 2

// get the second segment from the url path
jQuery.url.segment(2) // returns 'about'

Einfacher geht es nicht!