Front-end Web Development
Assignment for Week 13
- Create a new HTML and CSS file (follow the instructions in Assignment 1 if needed - no need to create the
<p> elements, write anything in the CSS file, or do the extra credit).
- Include a
<script> reference in the HTML file to the latest version of jQuery (available at the Using jQuery with a CDN section).
- Go to the jQuery UI site and download a customized bundle that includes the Dialog widget.
- Extract the bundle, and place the
js folders into the same folder as the HTML file.
<script> elements pointing to the jQuery CSS and JS files, respectively - minified or unminified.
- In your CSS file, add a rule that makes anything with a
dialog not be displayed.
- Create a JS file of your own and include a
<script> reference to it in the HTML file.
- Add a
<div> with a
dialog. Put some text inside it.
- Add a
<button> element with some text in it.
Add behavior that makes clicking the
button cause a the
<div> to appear. jQuery functions you should use:
Since these are
<button> elements and not
<input type="submit"> or
<a href="#"></a>, you don't need to
e.preventDefault() at the end of your event listener, as
buttons do nothing by default.
- Add a
<button> inside the
<div>, with the text "
- Add behavior that makes clicking that
<button> close the dialog (in addition to the generated close button which already does this). You'll need to learn how to use "methods" on the Dialog widget - and you'll need to make sure this event listener is only applied to the button inside the dialog.
- Customize jQuery UI further to include the Menu widget.
- Create an unordered list with anchors and sublists (
<ul> elements inside each
- Cause the unordered list to render as a menu.
- You might want to restrict the width of the main list to make it render sanely.