从 Google 的 CDN 下载 jQuery UI CSS

Downloading jQuery UI CSS from Google's CDN

提问by coool

I am planning on using Google to download the jQuery lib for both UI and Core. My question is, do they allow me to download the CSS for it or should I have to host it myself?

我计划使用 Google 下载 UI 和 Core 的 jQuery 库。我的问题是，他们允许我为它下载 CSS 还是我必须自己托管它？

Also if I use Google to load how should I load other plugins? Can I compress all plugins together or should it be its own separate file?

另外，如果我使用谷歌加载我应该如何加载其他插件？我可以将所有插件压缩在一起还是应该是它自己的单独文件？

回答by cletus

The Google AJAX Libraries API, which includes jQuery UI (currently v1.10.3), also includes popular themes as per the jQuery UI blog:

Google AJAX 库 API 包括 jQuery UI（当前为 v1.10.3），还包括jQuery UI 博客中的流行主题：

Google Ajax Libraries API (CDN)

Google Ajax 库 API (CDN)

• Uncompressed: 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

• Themes Uncompressed: 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, and vader.

• Themes Compressed: 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, and vader.

• 未压缩： http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js

• 压缩： http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js

• 未压缩主题： 黑色领带、闪电战、cupertino、dark-hive、dot-luv、茄子、excite-bike、flick、hot-sneaks、humanity、le-frog、mint-choc、阴天、胡椒研磨机、redmond、光滑度,南街,开始,阳光明媚,时髦钱包, trontastic, ui-darkness,ui-lightness和vader。

• 压缩主题： 黑领带、闪电战、cupertino、dark-hive、dot-luv、茄子、excite-bike、flick、hot-sneaks、humanity、le-frog、mint-choc、阴天、胡椒研磨机、redmond、光滑度,南街,开始,阳光明媚,时髦钱包, trontastic, ui-darkness,ui-lightness和vader。

回答by Dustin Woodard

jQuery now has a CDN access:

jQuery 现在有一个 CDN 访问：

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

code.jquery.com/ui/ [版本]/themes/ [主题名称]/jquery-ui.css

---

---

And to make this a little more easy, Here you go:

为了让这更容易一点，给你：

• 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
• 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
• humanity: 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
• smoothness: 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: 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

• 基础：http: //code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css
• 黑色领带：http: //code.jquery.com/ui/1.9.1/themes/black-tie/jquery-ui.css
• 闪电战：http://code.jquery.com/ui/1.9.1/themes/blitzer/jquery-ui.css
• 库比蒂诺：http://code.jquery.com/ui/1.9.1/themes/cupertino/jquery-ui.css
• 暗蜂巢：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
• 茄子：http: //code.jquery.com/ui/1.9.1/themes/eggplant/jquery-ui.css
• 激发自行车：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
• 热潜：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
• 薄荷巧克力：http: //code.jquery.com/ui/1.9.1/themes/mint-choc/jquery-ui.css
• 阴天：http: //code.jquery.com/ui/1.9.1/themes/overcast/jquery-ui.css
• 胡椒研磨器：http: //code.jquery.com/ui/1.9.1/themes/pepper-grinder/jquery-ui.css
• 雷德蒙德：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
• 南街：http: //code.jquery.com/ui/1.9.1/themes/south-street/jquery-ui.css
• 开始：http: //code.jquery.com/ui/1.9.1/themes/start/jquery-ui.css
• 晴天：http: //code.jquery.com/ui/1.9.1/themes/sunny/jquery-ui.css
• 时髦钱包：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：http: //code.jquery.com/ui/1.9.1/themes/ui-lightness/jquery-ui.css
• 维达：http: //code.jquery.com/ui/1.9.1/themes/vader/jquery-ui.css

回答by Dustin Woodard

Google is hosting jQueryUI css at this link https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.all.css

谷歌在这个链接上托管 jQueryUI css https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.all.css

If you look at this code directly, it is importing the css using @import which can be slow. You may want to factor the import into its parts to gain a slight performance benefit:

如果您直接查看此代码，它会使用 @import 导入 css ，这可能会很慢。您可能希望将导入考虑到其部分以获得轻微的性能优势：

https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.base.csshttps://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.theme.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

回答by Scott Evernden

I would think so. Why not? Wouldn't be much of a CDN w/o offering the CSS to support the script files

我会这么认为。为什么不？不提供 CSS 来支持脚本文件的 CDN 不会太多

This linksuggests that they are:

此链接表明它们是：

We find it particularly exciting that the jQuery UI CSS themes are now hosted on Google's Ajax Libraries CDN.

我们发现 jQuery UI CSS 主题现在托管在 Google 的 Ajax 库 CDN 上特别令人兴奋。

回答by samueldple

You could use this one if you mean the jQuery UI css:

如果你的意思是 jQuery UI css，你可以使用这个：

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

回答by aWebDeveloper

As Obama says "Yes We Can". Here is the link to it. developers.google.com/#jquery

正如奥巴马所说的“是的，我们可以”。这是它的链接。developer.google.com/#jquery

You need to use

你需要使用

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

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

Find theme names here http://jqueryui.com/themeroller/in gallery subtab

在这里找到主题名称http://jqueryui.com/themeroller/在画廊子选项卡中

.

.

But i would not recommendyou hosting from cdn for the following reasons

但由于以下原因，我不建议您从 CDN 托管

1. Although your chance of hit rate is good in case of Google CDN compared to others but it's still abysmally low.(any cdn not just google).
2. Loading via cdn you will have 3 requests one for jQuery.js, one for jQueryUI.js and one for your code. You might as will compress it on your local and load it as one single resource.

1. 尽管与其他 CDN 相比，在 Google CDN 的情况下，您的命中率很高，但它仍然非常低。（任何 CDN 不只是 google）。
2. 通过 cdn 加载您将有 3 个请求，一个用于 jQuery.js，一个用于 jQueryUI.js，一个用于您的代码。您可以将其压缩到本地并将其作为单一资源加载。

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

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