Man kann nun Widgets ins Overlay laden, das ganze wird dann über AJAX nachgeladen. Im Grunde ist es Widget möglich, das einzige was man dann noch tun muss, ist das CSS anpassen.

Wer die Overlay von den jQuery Tools nicht kennt, sollte mal einen Blick auf mein Plugin werfen oder auf die jQuery Tools Seite schauen.

Featureliste und Download findest du hier.

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.

Und schon startet der Download, ja ich weiß ist ja nicht weiter schwer, doch genau solche Kleinigkeiten macht manchmal eine coole Website aus.
Ich war eigentlich nur dort wegen dem neuem Transmit, der eigentlich für letzten Montag angekündigt war. Jetzt gibt es aber schon einen Stunden Countdown – sabasaba.

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!

Es gibt veschiedene Tools womit man das bewerkstellen kann. Ein Beispiel wäre von Yahoo YUI Compressor
Ich zeige dir schnell wie man das Teil benutzt, geht super flott:

1) Zuerst letzte Version saugen
2) Terminal Öffnen oder Shell (Mac: Terminal, Win: Dosteil)
3) ins jeweilige Verzeichnis wechseln zum YUI Compressor unter /build
4) ausführen und zwar so:

java -jar yuicompressor-2.4.2.jar /PFAD/DEINALTES_JSFILE.js -o /PFAD/DEINNEUES_JSFILE.js

5) fertig das wars schon

• .text() works on text and CDATA nodes
• Event Multi-binding
• New events: `focusin` and `focusout`
• jQuery.isEmptyObject()

ausprobiert habe ich es bis dato noch nicht, aber das kommt schon noch!
Hier der Changelog:
AJAX:

• Nested param serialization.
• JSON and script types auto-detected by content-type.
• Etag support has been added.
• Strict JSON parsing, using native JSON.parse.
• Serialize HTML5 elements.
• Context for Ajax Request.
• Success callback receives XHR object as third argument.
• Explicitly set a content-type.
• Explicitly specify a JSONP callback name
• Avoid pre-flighting cross-domain XHR
• Query.ajax() is now using onreadystatechange instead of a timer

Attributes:

• The performance of .css() and .attr() has been improved.
• The .attr() takes a function setter.
• .val( Function )
• .text() works on text and CDATA nodes

Core:

• Quick Element Construction
• .eq(-N), .get(-N)
• New .first() and .last() methods
• New .toArray() method
• jQuery() returns empty set
• jQuery(“TAG”)
• jQuery(“< div >”) jQuery(“< div/ >”) and jQuery(“< div ></ div >”)

CSS:

• The performance of the .css() method has seen a 2x performance improvement.
• The performance of the .addClass(), .removeClass(), and .hasClass() methods has seen a 3x performance improvement.
• .toggleClass() can toggle multiple classes

Data:

• .data() returns Object and .data(Object) sets the object
• Data cache is no longer created if it isn’t needed

Effects:

• Per-property Easing

Events:

• New Method: jQuery.proxy()
• Event Multi-binding
• `change` and `submit` events normalized
• New events: `focusin` and `focusout`
• All Events Can Be Live Events
• live/die now work with context
• Make sure ready event has body at least
• Unload is sped up in non-IE browsers that don’t need memory leak hand-holding.

Manipulation:

• Performance of .append(), .prepend(), .before(), and .after() has been improved.
• Performance of .html() has been improved by nearly 3x.
• Performance of .remove() and .empty() has seen over a 4x speed increase.
• New Method: .detach()
• New unwrap() method.
• Caching in domManip
• before, after, replaceWith on disconnected nodes
• .clone(true) also clones data

Offset:

• .offset( coords | Function )

Queue:

• New .delay() method
• .clearQueue()

Selectors:

• “#id p” is faster

Traversing:

• .index(), .index(String)
• New .has() method
• New .nextUntil(), .prevUntil(), .parentsUntil() methods
• .add(String, Element)
• .closest(filter, DOMElement)

Utilities:

• jQuery.isEmptyObject()
• jQuery.isPlainObject()
• jQuery.contains() (jQuery.contains() documentation, commit)
• jQuery.noop (jQuery.noop() documentation, commit)
• jQuery.unique()

Miscellaneous:

• jQuery.browser is now engine-centric
• Better support for applets
• No longer use arguments.callee
• Now use Closure Compiler instead of YUI Min

Internal Reorganization:

• The old ‘core.js’ file has been split apart into ‘attribute.js’, ‘css.js’, ‘data.js’, ‘manipulation.js’, ‘traversing.js’, and ‘queue.js’.
• The ready event has been moved into core.js (as it’s a fundamental part of jQuery itself).
• The majority of core matches the new jQuery Core Style Guidelines.
• The logic for CSS and attributes have been split and aren’t so intertwined anymore.

Heute zeige ich euch wie super leicht es ist, die Overlay bzw. Lightbox Funktion zu nutzen.
Ich möchte euch dies in zwei Varianten zeigen: mit und ohne Ajax!
Meine Lieblingsvariante ist natürlich mit Ajax damit fangen wir gleich mal an, doch vorerst gehe bitte auf die jQuery Tools Seite und sauge dir folgende Libs. runter.

Soda jetzt kanns schon losgehen.

Variante 1 – Dynamischer Content über Ajax
Was brauchen wir alles?

• HTML Teil
• CSS Teil
• Javascript mit Ajax

Starte Overlay
Starte Overlay mit anderem Content

Damit haben wir den Grundcontainer, der Inhalt kommt nur in die contentWrap Classe rein.

$("a[rel=#overlay]").overlay({
    expose: '#fbfbfb',
    effect: 'apple',
    onBeforeLoad: function() {
        var wrap = this.getContent().find(".contentWrap");
        wrap.load(this.getTrigger().attr("href"));
    },
    onClose: function() {
        if ($("#overlay").hasClass('content-overlay')) {
            $("#overlay").removeClass('content-overlay');
        }
    }
});

Was macht der Code?
Er sucht uns alle Links raus wo der REL Tag Overlay ist, weiteres definieren wir mit “expose” die Hintergrundfarbe und den Effekt wie das ganze aufgehen soll, in diesem Fall “apple” wie kann es auch anderes sein
Weiteres können wir hier bevor her die Box aufklappt den Content laden und zwar greift er nun auf den href vom Link Tag zu. In unserem Beispiel wäre das “overlay.php”

CSS Teil:

/* container for external content. uses vertical scrollbar, if needed */
div.contentWrap {
    height:441px;
    overflow-y:auto;
    margin-left:40px;
    margin-top:35px;
}

.overlay {
    display:none;
    background-image:url(../images/overlay.png);
    width:941px;
	height:450px;
}

.content-overlay {
	width: 800px;
	height: 650px;
	background-image:url(../images/overlay-content.png);
	padding: 10px;
}

.content-overlay div.contentWrap {
	height: 650px;
}

/* default close button positioned on upper right corner */
.overlay div.close {
    background-image:url(../images/close.png);
    position:absolute; right:-0px; top:-2px;
    cursor:pointer;
    height:33px;
    width:32px;
}

wichtig ist du brauchst folgende Bilder:
1) Hintergrundbild vom Contentberreich
2) Hintergrundbild vom versteckten Bereich
3) Bild für den Closebutton

Achte darauf das das Bild für den versteckten Bereich a png24 ist, das das ganze auch transparent ist.

so jetzt haben schon mal den gesamten HTML, CSS und Javascript abgedeckt. Nun kommt noch der PHP Teil, der nun wirklich nicht mehr schwer ist.

//output ajax call overlay
if($_GET['mode'] == 1) {
      echo 'Hello World';
} elseif($_GET['mode'] == 2) {
      echo 'Hello Mars and Jupiter';
}

das war nicht schwer oder?

Nun zur Variante 2: eine kleine Bildershow

Den CSS Code können wir uns von oben kopieren, der JS Code wird etwas kleiner, dafür kommt mehr HTML dazu.

JS Code:

$("img[rel]").overlay();

Wichtig: achte immer darauf das der REL Tag inhalt der selbe ist wie die ID von deinen Overlay Container.

So war doch nicht so schwer, hoffe ich habe dir damit einen kleinen Einblick in den Techniken der Overlay Class von jQuery Tools gegeben.
Alle weiteren Informationen findest du unter jQuery Tools Overlay Demo.