用ChatGPT解决这个技术问题 Extra ChatGPT

Downloading jQuery UI CSS from Google's CDN

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?

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?

9
9 revs, 8 users 31%

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 Libraries 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.

Note that these CSS scripts are not currently compressed/minimised, meaning that you could offer reduced size versions (by about 26% according to Google's PageSpeed plugin for Firefox) from your own domain, which might be faster for your users if your connection is decent and they don't already have the file cached locally.
every time i want to find this CDN I type "jquery ui css google cdn" and this post is the most direct way to the list of them all.. I just want to thank you +1
@Drew: Or he might use Reducisaurus too. :)
@Alix, thanks for the link. Looks like a useful service.
You can also CUT OUT the minor version numbers from the URL to automatically grab the latest CSS/JS, always. Just leave the major version number in place. Example: ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/…
J
Josh Crozier

jQuery now has a CDN access:

code.jquery.com/ui/[version]/themes/[theme name]/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

It supports https now (at least since the time of this post)
How can you use the images associated with this CDN, there are missing locaaly and I don't want to download them. Is there a way to use the one stored in the CDN ?
@BaptistePernet: The CDN also provides all the associated images, and as the url statements are all relative to the css file location, the client will automatically grab the images from the CDN
C
Community

Google is hosting jQueryUI css at this link 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:

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

a
aWebDeveloper

As Obama says "Yes We Can". Here is the link to it. developers.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 

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

.

But i would not recommend you hosting from cdn for the following reasons

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). 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.

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

The article you linked is from 2010. Most of the data he mentioned is outdated. There is a much better hit rate now, a lot more websites are using Google CDN now than back in 2010.
Here are updated statistics: blog.cloudharmony.com/2015/02/… The majority of websites seem to use CDNs now. More data: w3techs.com/technologies/details/cd-jquerycdn/all/all
S
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

This link suggests that they are:

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

I tried adding loading it using google load statement...would not load the css....checked it.
here's an example url that seems to work: ajax.googleapis.com/ajax/libs/jqueryui/1.7/themes/smoothness/…
n
notquiteamonad

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

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

关注公众号,不定期副业成功案例分享
Follow WeChat

Success story sharing

Want to stay one step ahead of the latest teleworks?

Subscribe Now

HuntsBot,a one-stop outsourcing task, remote job, product ideas sharing and subscription platform, which supports DingTalk, Lark, WeCom, Email and Telegram robot subscription. The platform will push outsourcing task requirements, remote work opportunities, product ideas to every subscribed user with timely, stable and reliable.

简体中文 English

Platform

Support

Contact US

Any questions or suggestions during use, you can contact us in the following ways:

Email: huntsbot@xinbeitime.com

Copyright© 2022-2023 www.huntsbot.com 浙ICP备2022000860号-4 All Rights Reserved.