jQuery UI Themes and Widgets In-Class Exercise 16 • jQuery UI (h p://jqueryui.com) is a curated set of user interface interac ons, effects, widgets, and themes built on top of the jQuery JavaScript Library. • Need to build and download jQueryUI library. o Go to h p://jqueryui.com/ and click Custom Download. o Iden fy the components that you want in your download by selec ng or deselec ng interac ons, widgets, and effects. Select Tabs, Datepicker, Accordion, and Dialog. Note that picking some of these will automa cally select other widgets that are required for that widget to work. o Select a theme for the download. Use the drop-down list at the bo om of the page. To build a custom theme, click on the link above the drop-down list to go to the ThemeRoller page, then click the Gallery tab, navigate and select one of 24 themes, and click the download bu on. o Click the Download bu on to download a zipped folder that contains the jQuery UI files. Unzip the downloaded file. In your projects below, you'll need the following files: ▪ In your CSS folder: • jquery-ui.min.css • jquery-ui.structure.min.css • jquery-ui.theme.min.css • images folder ▪ In your js folder: • jquery-ui.min.js
Tabs Select Tabs folder in your brackets and open index.html. • Add the downloaded customized jquery-ui.min.css and jquery-ui.min.js to the head sec on. Make sure you place these a er the exis ng css and jQuery lines respec vely. • See