nutzen (prüfen Sie das aber lieber nochmals nach, bevor Sie irgendwelche Dateien überschreiben), und das Development Bundle ( development-bundle ), das die einzelnen CSS-Dateien umfasst, die zum Erstellen der zusammengefassten Version im css -Ordner genutzt wurden, enthält. Außerdem finden Sie hier den Text zur Open Source-Lizenz und die weiteren Ressourcen, die für eine weitergehende Entwicklung notwendig sind. Die Reihenfolge der Ordner und Dateien kann von Ihrem Betriebssystem abhängen ( Figure 15-25 zeigt den geöffneten Ordner in Mac OS X). Figure 15-25. Die Struktur des heruntergeladenen Ordners mit einem eingeschränkten Theme Jetzt werden wir den Ordner tab-content-theme in das Styles-Verzeichnis unseres Reise-Projekts kopieren. ---- Warning Achten Sie darauf, die vorgegebene Verzeichnisstruktur im Theme-Ordner beizubehalten,damit die Symbol-Bilder von den Theme-Klassen korrekt angesprochen werden können. Ändern Sie die Verzeichnisstruktur des Themes, dann werden Sie diese Änderungen später wiederholen müssen, wenn Sie auf eine neuere Version der jQuery UI-Skript- und -CSS-Dateien umsteigen wollen. ---- Der neue Theme-Ordner befindet sich nun »neben« dem Ordner mit dem ursprünglichen Theme im Styles-Verzeichnis (siehe Figure 15-26 ). Figure 15-26. Zusätzlicher Ordner mit dem eingeschränkten Theme im Styles-Verzeichnis Schritt 4. Das Stylesheet des eingeschränkten Themes in Ihrem Projekt referenzieren Wir werden unser eingeschränktes Stylesheet nach dem ursprünglichen Stylesheet, aber noch vor allen jQuery UI-Skripten einbinden. Die Reihenfolge der Theme-Stylesheets auf der Seite ist nicht wichtig:
... Wenn die Verweise auf die Theme-Stylesheets eingefügt sind, können wir uns die Seite in einem Browser anzeigen lassen, um zu prüfen, ob die Styles korrekt angewendet werden. Da wir das neue Theme auf die Inhalts-Bereiche der Registerkarten eingeschränkt haben, wirken sich die Styles auch nur auf die dort genutzten Widgets aus, nicht aber auf die Reiter der Registerkarten (siehe Figure 15-27 ). ---- Note Ein weiteres Beispiel für diese Technik finden Sie in einem Artikel unter http://www.filamentgroup.com/lab/using_multiple_jquery_ui_themes_on_ a_single_page/ . ---- Figure 15-27. Anwendung im abschließenden Design zusammen mit dem eingeschränkten Theme
Einleitung Web-Entwickler arbeiten mit einer ganzen Reihe von Datenformaten und Protokollen, um Informationen zwischen dem Browser und dem Server zu transportieren. Dieses Kapitel stellt Rezepte vor, in denen es um den Umgang mit einigen der verbreitetsten Datenformate und Ajax-Techniken im Zusammenhang mit jQuery geht.
jQuery und Ajax Problem Sie wollen für zusätzliche Daten eine Anfrage an den Server stellen, ohne die Seite verlassen zu müssen, auf der sich der Anwender gerade befindet. Lösung Hier eine einfache Ajax-Anfrage: (function($) { $(document).ready(function() { $('#update').click(function() { $.ajax({ type: 'GET', url: 'hello-ajax.html', dataType: 'html', success: function(html, textStatus) { $('body').append(html); }, error: function(xhr, textStatus, errorThrown) { alert('Es ist ein Fehler aufgetreten! ' + ( errorThrown ? errorThrown : xhr.status ); } }); }); }); })(jQuery); Diskussion Das Herz der Ajax-Architektur von jQuery ist die Methode jQuery.ajax() .Diese kann in allen Browsern für das Senden von Anfragen zum und das Empfangen von Antworten vom Server genutzt werden. Lassen Sie uns diese Methode daher ein wenig genauer betrachten. Um erstmals eine Anfrage an den