jQuery UI on the Microsoft CDN

The jQuery UI team just added jQuery UI to the Microsoft Ajax Content Delivery Network (CDN). Thanks to them, you can start using jQuery UI in your ASP.NET websites by linking to jQuery UI at the following address:

http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/jquery-ui.js

You can start using the CDN now for free. No registration is required.

Using jQuery UI from the CDN can substantially improve the performance of your production ASP.NET websites. The Microsoft CDN is composed of servers distributed around the world. When users request a page from your website, the users can retrieve jQuery UI from a server located geographically close to them.

In addition, because browsers cache JavaScript files relative to a domain, serving jQuery UI from a CDN enables your website users to avoid downloading jQuery UI when visiting multiple websites. If you visit two websites that both use jQuery UI from the Microsoft CDN then the jQuery UI library only needs to be downloaded once.

Learn more about the Microsoft Ajax CDN by visiting the following website:

http://www.asp.net/ajaxlibrary/cdn.ashx

This website is being updated with the location of all of the jQuery UI library files.

Using the jQuery UI Datapicker from the Microsoft Ajax CDN

The jQuery UI Datepicker (http://jqueryui.com/demos/datepicker/) enables you to easily display a pop-up calendar. Here’s a complete code sample of using this plugin:

Listing 1 – Using the jQuery UI Datepicker

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>jQuery UI from Microsoft Ajax CDN</title>
    <link type="text/css" rel="Stylesheet" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/themes/redmond/jquery-ui.css" />
</head>
<body>
    <form id="form1" runat="server">
    <div>

        <input id="startDate" />

    </div>
    </form>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js"></script>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/jquery-ui.js"></script>
    <script type="text/javascript">

        $("#startDate").datepicker();

    </script>
</body>
</html>

 

When you open this page, and click (or tab) inside the input field, you get a popup calendar:

clip_image002

Notice that the page above includes the following link to a jQuery UI theme:

<link type=”text/css” rel=”Stylesheet” href=”http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/themes/redmond/jquery-ui.css” />

All of the standard jQuery UI themes are hosted on the Microsoft Ajax CDN. I am using the standard jQuery UI Redmond theme – naturally :).

Additional jQuery Plugins on the CDN

We are inviting the authors of the top jQuery plugins to add their plugins to the CDN. Pay attention to this blog over the next few months to learn about the new jQuery plugins added to the CDN.

I’m super excited about having jQuery UI on the Microsoft CDN. Having jQuery UI on the CDN will make it easier for ASP.NET developers to build ASP.NET applications that support rich and interactive user interfaces.

Discussion

  1. Roland says:

    Thanks for posting.

    It is great to have some news from you 😉

  2. Alistair says:

    This is good news. Now can you improve your CDN so it is as good as google’s?

    Issues:

    – It doesn’t compress as well as google’s CDN.

    ajax.googleapis.com/…/jquery-ui.min.js

    Download 49.7K

    ajax.microsoft.com/…/jquery-ui.min.js

    Download 65.9K

    – Because it is a sub-domain of microsoft.com, a request for jquery-ui includes all cookies related to microsoft.com

    Hope I don’t sound picky, but I would consider using microsoft’s CDN a lot more if there weren’t these issues.

  3. Anthon says:

    Is it just me or is Microsoft’s CDN slower than Google’s? The latter also supports Accept-Encoding to further compress the files.

  4. Christian Louboutin is renowned for designing classy dressy high heels with embellishments such as straps adorned with jewels, bows and feathers. More and more woman makes frenzy love into the Christian Louboutin Heels. Wearing high-heeled shoes,let a woman double self-confidence. Christian Louboutin Sandals will be another area trend fashion shoes. Christian Louboutin Pumps mesh ring has swept the world for their femininity,and Christian Louboutin Boots are also very popular,they have the highest quality and beautiful designs.So Choose a pair of Classic Christian Louboutin Shoes, except for yourself to consider shoe body styles and fabrics, shoes and heel modeling also reveal personality of ego is very important.

  5. [url=http://www.louboutinshopsale.com/” title=”http://www.louboutinshopsale.com/“>http://www.louboutinshopsale.com/” title=”http://www.louboutinshopsale.com/” title=”http://www.louboutinshopsale.com/“>http://www.louboutinshopsale.com/“>http://www.louboutinshopsale.com/” title=”http://www.louboutinshopsale.com/“>http://www.louboutinshopsale.com/]Christian Louboutin[/url] is renowned for designing classy dressy high heels with embellishments such as straps adorned with jewels, bows and feathers. More and more woman makes frenzy love into the [url=http://www.louboutinshopsale.com/” title=”http://www.louboutinshopsale.com/“>http://www.louboutinshopsale.com/” title=”http://www.louboutinshopsale.com/” title=”http://www.louboutinshopsale.com/“>http://www.louboutinshopsale.com/“>http://www.louboutinshopsale.com/” title=”http://www.louboutinshopsale.com/“>http://www.louboutinshopsale.com/]Christian Louboutin Heels[/url]. Wearing high-heeled shoes,let a woman double self-confidence. [url=http://www.louboutinshopsale.com/” title=”http://www.louboutinshopsale.com/“>http://www.louboutinshopsale.com/” title=”http://www.louboutinshopsale.com/” title=”http://www.louboutinshopsale.com/“>http://www.louboutinshopsale.com/“>http://www.louboutinshopsale.com/” title=”http://www.louboutinshopsale.com/“>http://www.louboutinshopsale.com/christian-louboutin-sandals-c-75.html]Christian Louboutin Sandals[/url] will be another area trend fashion shoes. [url=http://www.louboutinshopsale.com/” title=”http://www.louboutinshopsale.com/“>http://www.louboutinshopsale.com/” title=”http://www.louboutinshopsale.com/” title=”http://www.louboutinshopsale.com/“>http://www.louboutinshopsale.com/“>http://www.louboutinshopsale.com/” title=”http://www.louboutinshopsale.com/“>http://www.louboutinshopsale.com/]Christian Louboutin Pumps[/url] mesh ring has swept the world for their femininity,and [url=http://www.louboutinshopsale.com/” title=”http://www.louboutinshopsale.com/“>http://www.louboutinshopsale.com/” title=”http://www.louboutinshopsale.com/” title=”http://www.louboutinshopsale.com/“>http://www.louboutinshopsale.com/“>http://www.louboutinshopsale.com/” title=”http://www.louboutinshopsale.com/“>http://www.louboutinshopsale.com/christian-louboutin-tall-boots-c-77.html]Christian Loubouti
    n Boots[/url] are also very popular,they have the highest quality and beautiful designs.So Choose a pair of [url=http://www.louboutinshopsale.com/” title=”http://www.louboutinshopsale.com/“>http://www.louboutinshopsale.com/” title=”http://www.louboutinshopsale.com/” title=”http://www.louboutinshopsale.com/“>http://www.louboutinshopsale.com/“>http://www.louboutinshopsale.com/” title=”http://www.louboutinshopsale.com/“>http://www.louboutinshopsale.com/classic-collection-c-70.html]Classic Christian Louboutin[/url] Shoes, except for yourself to consider shoe body styles and fabrics, shoes and heel modeling also reveal personality of ego is very important.

  6. Chad says:

    Does MS plan to minify/compress the jQueryUI themes? That would be a huge step forward. The primary reason I don’t use them on my site is because they are so bloated.

  7. @Anthon – The Microsoft Ajax CDN also compresses files (and serves files with a far future cache header). I’d be surprised if the Microsoft Ajax CDN was slower than Google’s CDN — do you have stats that you can share?

  8. @Chad — Great suggestion! It is up to the jQuery UI team to decide whether or not to minify the CSS files in the jQuery UI themes. We post the jQuery UI files unmodified.

  9. 1, crush a person’s mood, just like a bottle in the seed, the future of happiness, but it is still true, stubborn and waiting …
    2. love it lost red shoes will have the opportunity of?ed hardy kleidung if so, let me quietly ed hardy schuhelost only!
    3, LAU, born a jade exquisite; shimmering, but thereed hardy is an astonishing!

  10. Chris says:

    ALso dont forget that google provide CDN links for Jquery which you use in exactly the same way…

  11. Kevin says:

    minified version also available at:

    ajax.microsoft.com/…/jquery-ui.min.js

  12. Thanks for sharing great suggestion. I will wait for another post.

  13. A big step forward would be “customizable” jquery ui themes. Which you could download like this:

    ajax.microsoft.com/…/theme.css

  14. Al Pathew says:

    hi Stephen,

    This is just to let you know that your “Contact Us” page is not working. I am unable to send any PM to you and the error message is “Unable to connect to the mailserver”

    You may delete this comment once you have read it. I have no intention to spam lol

    🙂

  15. Moksha says:

    I hope we are going to see lots of tutorial about all JQuery features with asp.net

  16. Do you have the possibility to send a link to a for the jQuery UI theme working demo: I have some problems in the implementations. Regards Claudio

  17. jt3d says:

    This is great. I have updated all of my sites to use the MS CDN. Now, if you could just put some pressure on them to speed up their support of IE 9 I would really be happy! (currently forcing it into IE 8 compatibility for some features..)

  18. Jack says:

    Great!

    It is much more easier to use now.