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.

• .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.

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!

Verdammt das ist aber schon extrem unübersichtlich!

Ich möchte dir hier ein Beispiel bringen, womit du mehr Struktur schaffen kannst.

$(document).ready(function(){
    var fc = new fishme_class();
    fc.initSite();
});
function fishme_class() {
    var myname;
    this.initSite = function() {
        alert( this.myname + ' sagt Hallo');
    } // end initSite

} // end fishme_class

Was mache ich hier?
Im Grunde kann man sich in Javascript eine Classe aufbauen, das feine ist, man kann dann innerhalb der Classe wie in PHP mit “this” auf die Methoden und Variable zugreifen. Damit kann man nun schön seine Funktionen einbauen. Viel Spass

Man hat keine ID
Man weiß nur die Classe darüber

wie greife ich nun auf ein Element darunter zu, zb. von 5 Elementen – das 4te.
Es gibt verschiedene Möglichkeiten, die schönste und die schnellste ist über den Index, aber wie geht das?

output Span 1
output Span 2
output Span 3
output Span 4
output Span 5

       1
       2
       3
       4
       5

        for(i=1;i<=5;i++) {
            $('.output-'+i).click(function() {
                var class_string = $(this).attr('class');
                class_string = class_string.replace('output-','');
                class_string = class_string - 1;
                alert('fishme now:'+ $('.header span:eq('+class_string+')').html());
               return false
            });
        }

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!