This assignment introduces you to the jQuery User Interface (UI) library. The purpose of doing this is to explore yet another JavaScript libary to see its similarities and differences as compared to the library that we have already looked at: the jQuery Validator plugin. The more of these libraries you look at, the better understanding you will have about how they are built. And the better you understand that, the better you will be able to construct an industry-standard library yourself.
This assignment will look at two jQuery UI components: the slider and the tabbed interface. You could use the HTML5 slider, and I know that some of you have already programmed your own tabbed interface for previous assignments, either from scratch or using a different JavaScript library. However for this assignment you must use the components in the jQuery UI library.
I have stored two chapters of Dan Wellman’s book on the jQuery UI library for you to read and use as reference material for this assignment. These chapters are not from the latest edition -- they reference version 1.8 of the jQuery UI library, not version 1.10 as in Wellman’s latest book -- but they will suffice for this assignment.
The latest version of the jQuery UI library is actually 1.11.4. You should use this version, which is downloadable from http://jqueryui.com/download. And of course, you can also reference one of the JQuery UI CDNs if you’d prefer. Here are some of the CDN links available. Note that the library requires both JavaScript and CSS files.
Note: This is known as “two-way binding” between two form fields or two widgets, which is often accomplished using other JavaScript libraries such as AngularJS. But for this assignment, you are to implement the two-way binding yourself.
In addition, your table should update dynamically when either the slider is changed or a new text value is entered.
Provide a way to delete individual tabs and then provide a way to delete multiple tabs at the same time. This will take a little thinking to decide the best design for implementing this functionality. You might put the deletion controls on your data entry page, or you might put them on a separate “layout editing” page. There are many valid ways to do this. The ultimate design decision is up to you.
As always, submit your assignment using the Assignment Submission Form. This form will lead you through providing all the information we need to evaluate your work, confirming that it is correct, and then e-mailing that information to our teaching assistant and me with a copy to yourself. Be sure to select 91.461 Assignment No. 8: Using the jQuery UI Slider and Tab Widgets from the assignment drop-down list on that form.
Important Note: If you do not receive an e-mail in your CS account within a few minutes confirming that your assignment has been submitted, something has gone wrong. Try submitting again or contact me.
This assignment will be graded on a 20-point system with points awarded as follows. Please note that the lists of features provided below are not meant to be exhaustive. They are merely representative of the types of things we are looking for in each grading category. As always, 20% of your grade is for documentation.
| Criteria (numbers in parentheses are the points that can be earned for that bullet item) | Possible Points |
Program Integrity / Design
|
16 |
Source Code Documentation and Formatting
|
4 |