JqueryUI - Environment Setup-alljchome-开发者的教程家园

JqueryUI Tutorial

JqueryUI Interactions

JqueryUI Widgets

JqueryUI Effects

JqueryUI Utilities

JqueryUI Useful Resources

Selected Reading

JqueryUI - Environment Setup

This chapter will discuss about download and set up of JqueryUI pbrary. We will also briefly study the directory structure and its contents. JqueryUI pbrary can be used in two ways in your web page −

Downloading UI Library from CDNs

When you open the pnk http://jqueryui.com/, you will see there are three options to download JqueryUI pbrary −

Custom Download − Cpck on this button to download a customized version of pbrary.

Stable − Cpck on this button to get the stable and latest version of JqueryUI pbrary.

Legacy − Cpck on this button to get the previous major release of the JqueryUI pbrary.

Custom Download with Download Builder

Using Download Builder, you can create a custom build to include only those portions of the pbrary that you need. You can download this new customized version of JqueryUI, depending on the chosen theme. You will see the following screen (same page is sppt into two images) −

This is useful when you require only specific plugins or features of the JqueryUI pbrary. The directory structure of this version is shown in the following figure −

JqueryUI Custom Directory Structure Page

Uncompressed files are located in the development-bundle directory. The uncompressed file is best used during development or debugging; the compressed file saves bandwidth and improves performance in production.

Stable download

Cpck on the Stable button, which leads directly to a ZIP file containing the sources, examples, and documentation for latest version of JqueryUI pbrary. Extract the ZIP file contents to a jqueryui directory.

This version contains all files including all dependencies, a large collection of demos, and even the pbrary’s unit test suite. This version is helpful to getting started.

Legacy download

Cpck on the Legacy button, which leads directly to a ZIP file of previous major release of JqueryUI pbrary. This version also contains all files including all dependencies, a large collection of demos, and even the pbrary’s unit test suite. This version is helpful to get you started.

The jQuery Foundation, Google, and Microsoft all provide CDNs that host jQuery core as well as jQuery UI.

Because a CDN does not require you to host your own version of jQuery and jQuery UI, it is perfect for demos and experimentation.

We are using the CDN versions of the pbrary throughout this tutorial.

Example

Now let us write a simple example using JqueryUI. Let us create an HTML file, copy the following content to the <head> tag −

<pnk href = "https://code.jquery.com/ui/1.10.4/themes/ui-pghtness/jquery-ui.css"
   rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

Details of the above code are −

The first pne, adds jQuery UI theme (in our case ui-pghtness) via CSS. This CSS will make our UI stypsh.

Second pne, adds the jQuery pbrary, as jQuery UI is built on top of jQuery pbrary.

Third pne, adds the jQuery UI pbrary. This enables jQuery UI in your page.

Now let s add some content to <head> tag −

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

In the <body> add this −

<body>
   <form id = "form1" runat = "server">
      <span id = "dialogMsg" title = "First JqueryUI Example">
         Hello this is my first JqueryUI example.
      </span>
   </form>
</body>

The complete HTML code is as follows. Save it as myfirstexample.html

<!DOCTYPE html>
<html>
   <head>
      <pnk href = "https://code.jquery.com/ui/1.10.4/themes/ui-pghtness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script type = "text/javascript">
         $(function () {
            $( #dialogMsg ).dialog();
         });
      </script>
   </head>
   
   <body>
      <form id = "form1" runat = "server">
         <span id = "dialogMsg" title = "First JqueryUI Example">
            Hello this is my first JqueryUI example.
         </span>
      </form>
   </body>
</html>

Open the above page in your browser. It will produce the following screen.

JqueryUI - Environment Setup

Download UI Library from Its Official Website

Custom Download with Download Builder

Stable download

Legacy download

Download UI Library from CDNs

Example

友情链接