JQuery App1. The data is an array of objects. It's easier to make this a global variable.
a. You should have three items in the list when the page loads.
2. You need a function that loops through the data array and creates the list:
a. The first statement should use the .empty() method to delete any previous list.
b. Use a jQuery Mobile listview list.
c. The list items should have a format similar to this:
list contents html i. Index in the statement above is the index of the item in the data array.
1. This is so we can retrieve the item from the data array later.
ii. You can format the contents any way you want.
d.Use Google to find out how to refresh a jQuery listview.e. Use the statement $(".listItem").click(function(evt){ selectRow($(this));}); to attach an event handler to the list items. The function selectRow() is described below.i. In selectRow(), this refers to the element that was clicked. The term $(this) will convert the HTML of the element into a jQuery object so that in the selectRow() function, it can be used with jQuery methods.
3. The selectRow(item) method should:a. Remove the ui-btn-active class from all elements to unselect previously selected items.b. Add the ui-btn-active class to the selected item.c. Use the form jQuery plugin (described in class) to fill the form with the item's data (hint: we added the data array index as an attribute of each element).d. Five points extra credit if you can add a button that will update the data if he user edits the data.
4. The Open button click handler does the following:a. Toggles the button text from Open to Close.b. Shows the form (use any jQuery animation).c. Sets the focus to the first field.
5. The Save button click handler does the following:a. Use the form jQuery plugin to create an object with the form contents.b. Add the object to the data array.c. Call the function that creates the list.d. Hide the form.