Herunterladen von jQuery UI CSS von Googles CDN

452

Ich plane, Google zum Herunterladen der jQuery-Bibliothek für UI und Core zu verwenden. Meine Frage ist, erlauben sie mir, das CSS dafür herunterzuladen, oder sollte ich es selbst hosten müssen?

Auch wenn ich Google zum Laden verwende, wie soll ich andere Plugins laden? Kann ich alle Plugins zusammen komprimieren oder sollte es eine eigene separate Datei sein?

— coool
quelle

574

Die Google AJAX Libraries-API, die die jQuery-Benutzeroberfläche (derzeit v1.10.3) enthält, enthält auch beliebte Themen gemäß dem Blog der jQuery-Benutzeroberfläche :

Google Ajax Libraries API (CDN)

Unkomprimiert: http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js
Komprimiert: http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js
Themen unkomprimiert: black-tie , Blitzer , Cupertino , dunkel-Nest , dot-luv , Aubergine , excite-Bike , Flick , Hot-Petze , die Menschheit , le-Frosch , Minze-choc , bedeckt , Pfeffermühle , redmond , Glätte , South -Street , Start , sonnig , mondän , trontastisch , ui-Dunkelheit ,UI-Leichtigkeit und Vader .
Themen Komprimieren: black-tie , Blitzer , Cupertino , dunkel-Nest , dot-luv , Aubergine , excite-Bike , Flick , Hot-Petze , die Menschheit , le-Frosch , Minze-choc , bedeckt , Pfeffermühle , redmond , Glätte , South -Street , Start , sonnig , mondän , trontastisch , ui-Dunkelheit ,UI-Leichtigkeit und Vader .

— Cletus
quelle

2

Beachten Sie, dass diese CSS-Skripte derzeit nicht komprimiert / minimiert sind. Dies bedeutet, dass Sie Versionen mit reduzierter Größe (laut Googles PageSpeed-Plugin für Firefox um etwa 26%) aus Ihrer eigenen Domain anbieten können, was für Ihre Benutzer möglicherweise schneller ist, wenn Ihre Verbindung anständig ist und sie haben die Datei noch nicht lokal zwischengespeichert.

— Drew Noakes

120

Jedes Mal, wenn ich dieses CDN finden möchte, tippe ich "jquery ui css google cdn" und dieser Beitrag ist der direkteste Weg zur Liste von allen. Ich möchte mich nur bei Ihnen bedanken +1

— mazlix

1

@Drew: Oder er könnte auch Reducisaurus verwenden. :)

— Alix Axel

1

@Alix, danke für den Link . Sieht nach einem nützlichen Service aus.

— Drew Noakes

1

Sie können auch die Nebenversionsnummern aus der URL ausschneiden, um immer automatisch das neueste CSS / JS abzurufen. Lassen Sie einfach die Hauptversionsnummer an Ort und Stelle. Beispiel: ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/…

— miCRoSCoPiC_eaRthLinG

61

jQuery hat jetzt einen CDN-Zugriff:

code.jquery.com/ui/ [version] / theme / [Themenname] /jquery-ui.css

Und um dies ein wenig einfacher zu machen, los geht's:

Basis: http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css
schwarze Krawatte: http://code.jquery.com/ui/1.9.1/themes/black-tie/jquery-ui.css
blitzer: http://code.jquery.com/ui/1.9.1/themes/blitzer/jquery-ui.css
cupertino: http://code.jquery.com/ui/1.9.1/themes/cupertino/jquery-ui.css
Dark-Hive: http://code.jquery.com/ui/1.9.1/themes/dark-hive/jquery-ui.css
dot-luv: http://code.jquery.com/ui/1.9.1/themes/dot-luv/jquery-ui.css
Auberginen: http://code.jquery.com/ui/1.9.1/themes/eggplant/jquery-ui.css
Excite-Bike: http://code.jquery.com/ui/1.9.1/themes/excite-bike/jquery-ui.css
flick: http://code.jquery.com/ui/1.9.1/themes/flick/jquery-ui.css
Hot-Sneaks: http://code.jquery.com/ui/1.9.1/themes/hot-sneaks/jquery-ui.css
Menschlichkeit: http://code.jquery.com/ui/1.9.1/themes/humanity/jquery-ui.css
le-frog: http://code.jquery.com/ui/1.9.1/themes/le-frog/jquery-ui.css
Mint-Choc: http://code.jquery.com/ui/1.9.1/themes/mint-choc/jquery-ui.css
bewölkt: http://code.jquery.com/ui/1.9.1/themes/overcast/jquery-ui.css
Pfeffermühle: http://code.jquery.com/ui/1.9.1/themes/pepper-grinder/jquery-ui.css
redmond: http://code.jquery.com/ui/1.9.1/themes/redmond/jquery-ui.css
Glätte: http://code.jquery.com/ui/1.9.1/themes/smoothness/jquery-ui.css
Südstraße : http://code.jquery.com/ui/1.9.1/themes/south-street/jquery-ui.css
Start: http://code.jquery.com/ui/1.9.1/themes/start/jquery-ui.css
sonnig: http://code.jquery.com/ui/1.9.1/themes/sunny/jquery-ui.css
mondäne Geldbörse: http://code.jquery.com/ui/1.9.1/themes/swanky-purse/jquery-ui.css
trontastic: http://code.jquery.com/ui/1.9.1/themes/trontastic/jquery-ui.css
UI-Dunkelheit: http://code.jquery.com/ui/1.9.1/themes/ui-darkness/jquery-ui.css
UI-Leichtigkeit: http://code.jquery.com/ui/1.9.1/themes/ui-lightness/jquery-ui.css
vader: http://code.jquery.com/ui/1.9.1/themes/vader/jquery-ui.css

— Dustin Woodard
quelle

4

Es unterstützt jetzt https (zumindest seit dem Zeitpunkt dieses Beitrags)

— Ivan Akcheurov

Wie können Sie die mit diesem CDN verknüpften Bilder verwenden? Es fehlen Orte, und ich möchte sie nicht herunterladen. Gibt es eine Möglichkeit, die im CDN gespeicherte zu verwenden?

— Baptiste Pernet

@BaptistePernet: Das CDN stellt auch alle zugehörigen Bilder bereit. Da sich die urlAnweisungen alle auf den cssDateispeicherort

— beziehen,

29

Google hostet jQueryUI-CSS unter diesem Link https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.all.css

Wenn Sie sich diesen Code direkt ansehen, wird das CSS mit @import importiert, was langsam sein kann . Möglicherweise möchten Sie den Import in seine Teile zerlegen, um einen leichten Leistungsvorteil zu erzielen:

https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.base.css https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base /jquery.ui.theme.css

— Gemeinschaft
quelle

5

Ich würde es mir denken. Warum nicht? Wäre kein CDN ohne CSS zur Unterstützung der Skriptdateien

Dieser Link legt nahe, dass sie:

Besonders aufregend finden wir, dass die CSS-Themen der jQuery-Benutzeroberfläche jetzt auf dem CDN Ajax Libraries von Google gehostet werden.

— Scott Evernden
quelle

Ich habe versucht, das Laden mit der Google Load-Anweisung hinzuzufügen. Das CSS wurde nicht geladen. Ich habe es überprüft.

— Coool

6

Hier ist eine Beispiel-URL, die zu funktionieren scheint: ajax.googleapis.com/ajax/libs/jqueryui/1.7/themes/smoothness/…

— Scott Evernden

5

Sie können diese verwenden, wenn Sie die jQuery-Benutzeroberfläche css meinen:

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

— samueldple
quelle

5

Wie Obama sagt "Ja, wir können". Hier ist der Link dazu. developer.google.com/#jquery

Sie müssen verwenden

Google

ajax.googleapis.com/ajax/libs/jqueryui/[VERSION NO]/jquery-ui.min.js
ajax.googleapis.com/ajax/libs/jqueryui/[VERSION NO]/themes/[THEME NAME]/jquery-ui.min.css

jQuery CDN

code.jquery.com/ui/[VERSION NO]/jquery-ui.min.js
code.jquery.com/ui/[VERSION NO]/themes/[THEME NAME]/jquery-ui.min.css

Microsoft

ajax.aspnetcdn.com/ajax/jquery.ui/[VERSION NO]/jquery-ui.min.js
ajax.aspnetcdn.com/ajax/jquery.ui/[VERSION NO]/themes/[THEME NAME]/jquery-ui.min.css

Hier finden Sie Themennamen http://jqueryui.com/themeroller/ in der Unterregisterkarte Galerie

.

Aber ich würde Ihnen aus den folgenden Gründen nicht empfehlen , von cdn zu hosten

Obwohl Ihre Chance auf Trefferquote bei Google CDN im Vergleich zu anderen gut ist, ist sie immer noch miserabel niedrig (jede CDN nicht nur Google).
Beim Laden über cdn haben Sie 3 Anfragen, eine für jQuery.js, eine für jQueryUI.js und eine für Ihren Code. Sie können es auf Ihrem lokalen Computer komprimieren und als eine einzige Ressource laden.

http://zoompf.com/blog/2010/01/should-you-use-javascript-library-cdns

— aWebDeveloper
quelle

Der Artikel, den Sie verlinkt haben, stammt aus dem Jahr 2010. Die meisten Daten, die er erwähnt hat, sind veraltet. Es gibt jetzt eine viel bessere Trefferquote, viel mehr Websites verwenden Google CDN als 2010.

— Trader

Hier sind aktualisierte Statistiken: blog.cloudharmony.com/2015/02/… Die Mehrheit der Websites scheint derzeit CDNs zu verwenden. Weitere Daten: w3techs.com/technologies/details/cd-jquerycdn/all/all

— Trader