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.

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.

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!

Darunter habe ich die jQuery Tools voll und ganz ausgenutzt, bzw. schon fast ausgereizt. Weitere Tools sind auch zum Einsatz gekommen, wie Autoscoll, Autocomplete etc.
Auf die Kombination von Flash und Javascript bei den Case Studies bin ich ganz besonders stolz, da jede Seite nur mit Ajax nachgeladen wird und dabei noch geil ausschaut.

Ich würde mich freuen wenn du mal die Seite schaust.

verwendete jQuery Tools:

• Tooltip
• Scrollable
• Overlay
• Flashembeded

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.

Tooltip, ein sehr wichtiges Element auf einer Website, meiner Meinung nach wird es von vielen Designer noch nicht wirklich beachtet. Doch es ist verdammt mächtig und wichtig. Hier ein paar Beispiele wie man dies mit jQuery TOOLS einbindet.

Beachte bitte du brauchst für die Beispiele folgende Libs: Download der Libs

Allgemein:
Binde folgenden Code in dein CSS ein:

div.tooltip {
    background-color:#000;
    border:1px solid #fff;
    padding:10px 15px;
    width:200px;
    display:none;
    color:#fff;
    text-align:left;
    font-size:12px; 

    /* outline radius for mozilla/firefox only */
    -moz-box-shadow:0 0 10px #000;
    -webkit-box-shadow:0 0 10px #000;
}

Und irgendwo in deinem HTML Code – am besten ganz oben oder ganz unten.

So – somit haben wir die Tooltip box, was jetzt noch fehlt ist der JS Teil.

Ganz simple Referenz auf die Style-Class tooltip und wir wollen die Box rechts von einem Input Feld haben, wichtig ist das du im Inputfeld einen Title eingibst, sonst wird natürlich nichts angezeigt.

$("input[title!='']").tooltip({
            position: "center right",
            offset: [1, 10],
            effect: "fade",
            opacity: 0.7,
            tip: '.tooltip'
        });

Was macht da jetzt was?

1) position:
gibt an wo es angezeigt werden kann

2) offset:
ist zum Feintuning – für die position, param(von oben, von links)

3) effekt:
Es gibt verschiedene effekte wie es angzeigt werden soll zb. Slide, Fade etc, man kann auch eigene schreiben, habe ich noch nicht gemacht. Falls du mehr darüber wissen willst.

4) opacity:
Transparentwert vom Tooltip.

5) tip:
Referenz auf den Container vom Tooltip

Wenn du diese paar Punkte kapiert hast, weißt du im Grunde alles was man wissen muss. Du kannst dies natürlich bei jedem Element einbinden, wichtig ist wirklich vergiss nicht auf den Title und hier noch ein Tip von mir – die Lib löscht den Tooltip aus dem Element, sprich wenn du ihn im Quellcode dann suchst, ist der Title weg.

Was ist noch interessant?

1) Event
Die jQuery TOOLS haben ein eigenes Eventmanagment, ist aber eh ganz simple so wie in jQuery selbst. Hier ein kleines Beispiel:

$("input").tooltip({
    events: {
        input: 'click, blur, focus',
        checkbox: 'mouseover click, mouseout',
        date: 'click, blur'
    }
});

der Eventkey reagiert auf den Input Type – sprich wie input, checkbox, date etc.

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

hier gehts zu den jQuery TOOLS

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