JQuery Kochbuch (German Edition)

auszulösen.
    Der Rest des Kapitels konzentriert sich auf ein Projekt, bei dem mehrere jQuery UI-Widgets kombiniert werden, um eine Benutzeroberfläche zu schaffen, die flexible und mit einem Theme versehbare Steuerelemente für einen Musikplayer enthält.

14.2. Die komplette jQuery UI-Suite einbinden
    Problem
    Sie wollen die komplette jQuery UI-Suite einbinden. Vielleicht wissen Sie noch nicht, welche Teile Sie benötigen und welche nicht. Oder Sie nutzen so viele Elemente der Suite, dass es einfacher oder effizienter ist, sie vollständig einzubinden, anstatt jedes Stückchen einzeln anzusprechen.
    Lösung
    Verlinken Sie auf ein jQuery UI Theme, dann auf eine kompatible Version von jQuery Core und dann auf das Skript mit jQuery UI:



    Diskussion
    Dieses Kapitel geht von der neuesten stabilen Version von jQuery UI aus: 1.7.2. Diese benötigt mindestens jQuery 1.3. Wenn Sie jQuery UI herunterladen, finden Sie im ZIP-Paket auch die neueste kompatible, stabile Version von jQuery.
    Statt ihre eigene Version von jQuery und jQuery UI zu hosten, können Sie die AJAX Libraries API von Google nutzen. Ändern Sie einfach die URLs auf die Skripten, zum Beispiel wie folgt:


    Googlehostet auch um die 20 Themes, die sich in der jQuery UI ThemeRoller-Galerie befinden.

    Dazu gehören die 13 Bilder pro Theme, die im Theme-CSS-Code durch relative URLs angesprochen werden.
    Sie können
{themename}
durch
base
,
black-tie
,
blitzer
,
cupertino
,
dark-hive
,
dot-luv
,
eggplant
,
excite-bike
,
flick
,
hot-sneaks
,
humanity
,
le-frog
,
mint-choc
,
overcast
,
pepper-grinder
,
redmond
,
smoothness
,
south-street
,
start
,
sunny
,
swanky-purse
,
trontastic
,
ui-darkness
,
ui-lightness
oder
vader
ersetzen. Eine Vorschau auf diese Themes finden Sie in der jQuery UI ThemeRoller-Galerie .
    Das Theming mit jQuery UI wird ausführlich im nächsten Kapitel behandelt. Für unsere Zwecke müssen wir nur sicherstellen, dass wir eines davon einbinden, denn ein Theme ist Pflicht.

14.3. Ein oder zwei einzelne jQuery UI-Plugins einbinden
    Problem
    Sie wollen nur ein oder zwei jQuery UI-Widgets nutzen. Daher wollen Sie nicht die gesamte Bibliothek und das vollständige CSS für ein Theme einbinden, sondern nur soviel übernehmen, wie notwendig ist.
    Lösung
    Sie brauchen nur Sortable und Tabs. Es gibt zwei Optionen, mit denen die einzelnen jQuery UI-Komponenten eingebunden werden können:
    Nutzen Sie den jQuery UI Download Builder , um eine eigene Version von jQuery UI zu bauen, die nur die Plugins enthält, an denen Sie interessiert sind. In diesem Beispiel wählen Sie Sortable und Tabs. Der Download Builder selektiert dann automatisch alle Abhängkeiten – in diesem Fall UI Core. Die ZIP-Datei, die Sie herunterladen, enthält eine einzelne
.js
-Datei mit UI Core, Sortable und Tabs:
js/jquery-ui-1.7.2.custom.min.js

Binden Sie diese Datei auf Ihrer Seite nach dem jQuery-Skript ein, die Sie im gleichen Ordner finden:


Laden Sie das jQuery UI Development Bundle herunter, greifen Sie auf den Ordner
development-bundle
in einer eigenen ZIP-Datei aus dem Download Builder zurück oder nutzen Sie SVN . Sie finden im Unterordner
ui
die einzelnen Plugin-Dateien, auf die Sie einzeln verweisen können:




    Der CSS-Code für die einzelnen Plugins steht ebenfalls in eigenen Dateien zur Verfügung, wenn Sie die zweite Variante wählen (
development-bundle
). Sie müssen das Core-CSS, alle Plugin-spezifischen CSS-Dateien und das Theme-CSS einbinden: