Lab 18: Introduction to jQuery UI

In this lab, you will use jQuery UI to work with HTML pages.

Objectives:

• To create Web pages that use jQuery UI

Part 1: Getting Started with jQuery UI

Steps:

1. Use File - Close All to close all open editing windows.

2. In RAD, create a new Dynamic Web Project named Lab18Web associated with Lab18EAR.

3. Copy the jQuery JavaScript file from the last lab into the new project's WebContent folder.

4. Create a new HTML File, hotel-reservation.html with standard HTML (not HTML5 or jQuery UI) widgets that let a user reserve a hotel room. The page should contain:

   • A form
   • A text input widget for reservation date
   • A text input widget for number of guests
   • A text input widget for number of nights
   • A <button> widget with text "Reserve It!"
   • An empty <div>

   In a jQuery ready() function in the document's head, use jQuery to attach a click() handler function to the submit button that reads the data from the input widgets and writes it to the empty div. The function should return false to prevent the form from being submitted.

5. Next, import the jQuery UI scripts into your workspace. Follow this procedure to import:

   1. Use Windows Explorer or My Computer to navigate to {Lab Installation Directory}/lib. If your computer has the standard lab setup on Windows 7 or later, this directory is:

      c:\Users\username\webclass\lib             
                   

      You should see the jquery-ui-1.10.4.custom folder. Expand that folder - you should see several items including css and js folders.

   2. Size and position Windows Explorer and RAD so you can see both of them at the same time.

   3. In Windows Explorer, right-click on css and choose Copy.

   4. In RAD, right-click on your project's WebContent folder and choose Paste to import the folder.

   5. Repeat to import the js folder.

   6. Delete the WebContent/jquery-1.11.1.js script that you installed earlier - you don't need it since jQuery UI provides the base jQuery script.

   7. Modify the page's head so it references jQuery UI's artifacts and the jQuery script (put this ABOVE your ready() script):

      <link rel="stylesheet" 
         href="css/ui-lightness/jquery-ui-1.10.4.custom.css" />
      <script src="js/jquery-1.10.2.js"></script>
      <script src="js/jquery-ui-1.10.4.custom.min.js"></script>             
                   
                   

      Test your program to make sure it still works.

6. Modify the ready() function so that it "installs" a jQuery UI datepicker for the date, spinners for the rooms and guests widgets and a jQuery UI button. Test your work.

7. Use a jQuery UI animation on the div so that when the user hovers the mouse over it, its color and background color change and revert when the user moves the mouse so it's no longer over the div.

Part 2: More Practice

Steps:

1. Copy the hotel-reservation.html file to hotel-reserve-polyfill.html, then modify it so that it uses Modernizr and and YepNope so that page uses HTML5 widgets and transitions on modern browsers and jQuery UI on older browsers. You can find the YepNope and Modernizr scripts in the {Lab Installation Directory}/lib folder.

   If you have access to an older browser, test to ensure that it works properly.