• Assigned: Mon 10/22
• Due: Mon 10/29
• Possible Points: 10

Description

In this assignment we will implement the third version of our tab based interface. The first version, Formatting Tabs (Assignment 6) used CSS styles to provide proper formatting. The second version, Working Tabs (covered in class on Wed 10/10, see sample solution) uses jQuery to add the basic functionality to our tab interface. It is very important that you understand all the jQuery code (method displayTab) in the WorkingTabs solution.

One drawback to the Working Tabs solution is that it requires very specific HTML for the jQuery to work. See notes for details. We would like to be able to create a tabbed interface but require less work on the part of the author of the page. In essence, we would like the author of the web page to provide <divs> (the tabpages) and then tell jQuery "Turn this into a tabbed interface for me, please." This is exactly what you will do in this assignment. You will write a jQuery function, createTabs(), that takes a page with minimal HTML markup and translates it into the HTML required by our Working Tabs code.

In this assignment, we will take as input a web page with minimal HTML markup for tabs. From this, the createTabs method will add all the hrefs, ids, classes, etc. that are required for Working Tabs.

Requirements

See the notes for the specifics on the HTML translation required. Start with the skeleton. Your CSS and JS/jQuery must be in separate, external files (not part of the web page itself). Use jQuery to modify the HTML of the page. This is not an exercise in Javascript string processing.

Suggested steps in growing this program:

1. Dust off your solution to Formatting Tabs. Make any changes you want to the CSS and extract your CSS to an external file. Link your Formatting Tabs solution to it.
2. Take the jQuery code for Working Tabs (see Readings), copy it into an exteral .js file and link the Formatting Tabs to it. Make absolutely sure that your tab functionaliy works properly. You may need to make some small changes to the jQuery code provided.
3. Add the "< div class=tabReady >" from the notes. You will have a tabbed interface followed by some divs.
4. Write a createTabs() method in jQuery

Turn in the following in the following order:

1. Cover page. Name, date, program 12, Creating Tabs
2. Print out of your jQuery and Javascript code only. No HTML or CSS.
3. Print out of your CSS code.
4. Screen shot of you tabs. You will have 2 sets of tabs. The first is the solution from Working Tabs in which all classes, ids, and hrefs are provided in the HTML itself. The second is the tabs your createTabs function produces from the abbreviated HTML

 

Grading

• 60% Creating tabs - do you successfully create tabs from the class=tabReady div?
• 20% Working tabs - do your tabs exhibit the correct behavior?
• 10% CSS styles - do your tabs meet the style guidelines from the Formatting Tabs assignment?
• 10% Good programming style - indentation, clarity, descriptive names, simplicity, etc.

Objectives