GoogleのCDNからjQuery UI CSSをダウンロードする
-
03-07-2019 - |
質問
Googleを使用して、UIとCoreの両方のjQueryライブラリをダウンロードする予定です。私の質問は、CSSをダウンロードできるようにしているのですか、それとも自分でホストする必要があるのですか?
また、Googleを使用して読み込む場合、他のプラグインをどのように読み込む必要がありますか?すべてのプラグインをまとめて圧縮することはできますか、それとも独自の別個のファイルにする必要がありますか?
解決
jQuery UI(現在v1.10.3)を含むGoogle AJAX Libraries APIには、 jQuery UIブログ:
Google Ajax Libraries API(CDN)
-
非圧縮: < a href = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js" rel = "noreferrer"> http://ajax.googleapis.com/ajax/libs/ jqueryui / 1.10.3 / jquery-ui.js
-
Compressed: http://ajax.googleapis.com/ ajax / libs / jqueryui / 1.10.3 / jquery-ui.min.js
-
非圧縮テーマ: 黒タイ 、 blitzer 、 cupertino 、 dark-hive 、 dot-luv 、 eggplant 、 excite-bike 、フリック、 hot-sneaks 、< a href = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/humanity/jquery-ui.css" rel = "noreferrer">人間性、 le-frog 、 mint-choc 、曇り、 pepper-grinder 、 redmond 、 smoothness 、 south-street 、開始、 sunny 、 swanky-purse 、 trontastic 、 ui-darkness 、 ui-lightness 、および
他のヒント
jQueryにCDNアクセスが追加されました:
code.jquery.com/ui/ [バージョン] / themes / [テーマ名] /jquery-ui.css
そして、これをもう少し簡単にするために、ここに行きます:
- base: http://code.jquery.com/ui/1.9 .1 / themes / base / jquery-ui.css
- black-tie: 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
- eggplant: 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
- フリック: 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
- 人間性: 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
- overcast: http://code.jquery.com/ui/1.9 .1 / themes / overcast / jquery-ui.css
- pepper-grinder: 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
- 平滑性: http://code.jquery.com/ui/1.9 .1 / themes / smoothness / jquery-ui.css
- south-street: 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
- sunny: http://code.jquery.com/ui/1.9 .1 / themes / sunny / jquery-ui.css
- swanky-purse: 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-darkness: http://code.jquery.com /ui/1.9.1/themes/ui-darkness/jquery-ui.css
- ui-lightness:
GoogleはこのリンクでjQueryUI cssをホストしています https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.all.css
このコードを直接見ると、@ import 遅い可能性があるを使用してCSSをインポートしています。わずかなパフォーマンス上の利点を得るために、インポートをその部分に含めることをお勧めします。
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
そう思います。何故なの?スクリプトファイルをサポートするCSSを提供するCDNの多くはないでしょう
このリンクは次のことを示唆しています:
特に刺激的なのは、 jQuery UI CSSテーマは現在 GoogleのAjax Libraries CDNでホストされています。
jQuery UI cssを意味する場合、これを使用できます:
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
オバマ氏が言う「はい、できる」と。ここにリンクがあります。 developers.google.com/#jquery
使用する必要があります
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
ここでテーマ名を見つける http://jqueryui.com/themeroller/ ギャラリーサブタブ
。
しかし、次の理由でcdnからホスティングすることはお勧めしません。
- Google CDNの場合、ヒット率は他の人に比べて高い可能性がありますが、それでも非常に低いです(Googleだけでなく任意のcdn)。
- cdnを介してロードすると、jQuery.js、jQueryUI.js、コードの3つのリクエストがあります。ローカルで圧縮し、単一のリソースとしてロードすることもできます。
http://zoompf.com/blog/ 2010/01 / should-you-use-javascript-library-cdns