Exercise 27: jQuery Plugins - jkneal/spring-angular-train GitHub Wiki

Learn how to use jQuery plugins

1. In src/main/resources/templates/shop/index.html, create two tabs using the 'Tabs' plugin documented here: Materialize Tabs

• The first tab should be labeled 'Information' and contain the three paragraph tags currently in the section with id 'storeInformation'
• The second tab should be labeled 'Products' and contain the h4 and table currently in the second section
• Move the h4 header that contains the store name to above the tabs
• Finally remove the two section tags

2. Now in index.html, add a modal dialog using the 'Modal' plugin documented here: Materialize Modal

• Add the following content to the modal (content or body):

<h4>Store Hours</h4>
<p>M-F 8:00 AM - 5:00 PM</p>
<p>Saturday 8:00 AM - 12:00 PM</p>
<p>Sunday Closed</p>

• All the link below to the modal footer:

<a href="#!" class="modal-action modal-close btn-flat">Got it!</a>

• Give the modal dialog an id of 'hoursModal'
• Now after the last paragraph tag in the first tab (Open/Closed badge), add the following link:

<a id="hoursModalTrigger" href="#" class="btn-flat">View Hours</a>

• Now open src/main/resources/public/scripts/shop.js. Clear the existing code in the document ready handler. Then add a click handler for the element with id 'hoursModalTrigger' that will open the dialog just created. Also specify that the dialog should not be dismissible

3. In index.html, remove the link that is currently on the header with text 'Products'

1. Start the training application and go to the app home page

2. Click on the link 'Exercise 27' and verify your screen looks like the following:

   

3. Now click the tabs and verify the content adjusts (between display the information and products)

4. Now click the button with text 'View Hours'. Verify a modal dialog appears with the content we added above and the 'Got It!' button in the footer. Verify if you click outside of the modal dialog the dialog remains open