JavaScript easy lab. All files needed is attached.

/in /by

Lab 11

Attached Files:

Lab 11

Objective: Use jQuery to create a tabbed web page, dialog boxes, accordion panels and tooltips.

Description:

For this lab, you will be modifying 2 product display pages to use jQuery UI widgets.

First you will modify the mums page from lab 9 to include tooltips to display the titles for the images in the gallery section as well as a zone map when the user hovers over the Zone text on the page. Then you will divide the page into 3 panels to displayed in an accordion format where the user can open and close the individual panels by clicking on the associated title.

Second, you will modify the roses.html page (attached with images to this lab), to include 2 dialog boxes: 1 to display when the page loads and another when the user clicks on the Zone span tag on the page. Then you will organize the page into 3 tabbed panels which will display one at a time. The user can select the panel to be displayed by clicking on the associated tab.

Requirements:

  • Download the jQuery ui files using a theme of your choice and add to mums.html and roses.html.
  • Use the mums.html folder from lab 9 to add tooltips and accordion panels.
    • Tooltips
      • Add titles to each of the images in the gallery section of the page.
      • Add the tooltips function to any element on the page with a tooltip
      • Add a custom class and change the styling as you see fit.
      • Add a span tag around the word Zone in the Plant Details table. Give it an id and a title.
      • Add the tooltips method to the Zone id tag, but add a link to the hardiness.jpg image as the content for the tooltip. (image is included in the download files for this assignment.
    • Accordion
      • Modify the div tag that is just above the h2 element for Plant Overview to include an id
      • Apply the accordion method to the id.
      • Add 2 customizations of your choice (css or options)
  • For the roses.html file attached to this assignment, add dialog boxes and tabs
    • Dialog
      • Call the dialog method for the #sale div at the bottom of the page to display the dialog when the page loads
      • Call the dialog method for the #zone div at the bottom of the page but prevent it from displaying when the page first loads
      • Add a click event to the #zonePopup span tag (Zone in the Plant Details panel) to open the #zone dialog.
    • Tabs
      • Add the tabs method to the #tabs div that includes the ul for the tabs.
      • Add 2 customizations of your choice (css or options)
  • Add links between the 2 pages.
  • Upload your files to the server. Test and submit the assignment.
Lab Requirement Point Value
Mums: Tooltips added to images in the gallery section to display the titles

10 points
Mums: A tooltip with the zone map displays then the user hovers over the Zone element.

10 points

Mums: Accordion added with 2 customizations and works as expected

15 points
Roses: Dialog box displays when page loads. 10 points
Roses: Zone map dialog box displays when Zone element is clicked 10 points
Roses: Tabs added with 2 customizations and works as expected 15 points
Both pages display and execute per lab specifications on the server

5 points

Total:

75 points