Getting started with jQuery UI

In this post you will learn how to get started with jQuery UI. Believe me, jQuery UI is really very easy to learn and it provides abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets, built on top of the jQuery JavaScript Library which you can use to build highly interactive web applications.

The whole jQuery UI categorized into three groups that is core, interactions, widgets and effects.

In this post I am going show you how to setup a demo page for jQuery UI. You just need to follow the steps given below.

Step 1 (Downloading UI Library)

At very first you need to download the jQuery UI library from here http://jqueryui.com/download. You might get confused on this download page because there is various checkboxes to select. Look if you want to download library that contains core elements of UI then deselect all components and select only UI Core there. Similarly, if you want library that contains interaction elements only then deselect all components and select only Interaction checkboxes there. That’s it.

One more important option you will find on download page that is “Theme”. No worries, you can create your own theme from here http://jqueryui.com/themeroller/ and then download the produced library or select the theme from dropdown menu (on download page). If you are here at very first time, keep the setting default and then download the jQuery UI Library.

When you download, you will get a zip file by name jquery-ui-1.8.20.custom.zip. File name of download depends on the version and the current version is 1.8.20 and on theme that is custom.

Step 2 (Library Installation)

Now you have the jQuery UI library, you need to install it in your project on the root or inside any folder. Find the screen:


If you done with the installation open your web page and in the <head> write following library reference.

    <link type="text/css" href="Scripts/css/ui-lightness/jquery-ui-1.8.20.custom.css" rel="Stylesheet" />   
    <script type="text/javascript" src="Scripts/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="Scripts/js/jquery-ui-1.8.20.custom.min.js"></script>

Total three references, first one is for style, second one is for normal jQuery library and last one is for jQuery UI library.

Step 3 (Page Setup)

Once you done with library file installation go ahead and create the sample webpage that will contain a textbox in <body> and a method call from <head>. Here is the code.

In the <head>:

          <script type="text/javascript">
              $(function () {
                  $('#dialogMsg').dialog();
              });
          </script>

In the <body>:

<body>
    <form id="form1" runat="server">
        <div id="dialogMsg" title="I'm Title of dialog">
            Hello I'm dialog body.
        </div>
    </form>
</body>

If you done with above; open the page in browser and see it in action.

Here is the screen:


Complete Code

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <link type="text/css" href="Scripts/css/ui-lightness/jquery-ui-1.8.20.custom.css" rel="Stylesheet" />   
    <script type="text/javascript" src="Scripts/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="Scripts/js/jquery-ui-1.8.20.custom.min.js"></script>
          <script type="text/javascript">
              $(function () {
                  $('#dialogMsg').dialog();
              });
          </script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="dialogMsg" title="I'm Title of dialog">
            Hello I'm dialog body.
        </div>
    </form>
</body>
</html>

If you want to learn more, visit here http://jqueryui.com/. I hope you like it. Thanks.

Comments

Popular posts from this blog

Migrating database from ASP.NET Identity to ASP.NET Core Identity

Customize User's Profile in ASP.NET Identity System