1 / 19

Jquery ui

Jquery ui. By: Savannah Reiff. Background. Background. Released September 2007 in blog post Free open source software Licensed under the MIT license. What is jQuery UI?.

maisie
Download Presentation

Jquery ui

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Jqueryui By: Savannah Reiff

  2. Background

  3. Background • Released September 2007 in blog post • Free open source software • Licensed under the MIT license

  4. What is jQuery UI? • “A curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library.” –jqueryui.com • Gets you up and running quickly

  5. Common Features • Datepicker • Menu Bar

  6. implementation

  7. Set Up • Need to download package from jqueryui.com • Can choose theme and components to download with package (or choose all components) • In package, index.html includes examples and references to include in each page • In package, folders for css, js and development-bundle

  8. Example with Buttons-HTML <h2 class="demoHeaders">Button</h2> <button id="button">A button element</button> <form style="margin-top: 1em;"> <div id="radioset"> <input type="radio" id="radio1" name="radio"><label for="radio1">Choice 1</label> <input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2">Choice 2</label> <input type="radio" id="radio3" name="radio"><label for="radio3">Choice 3</label> </div> </form>

  9. Example with Buttons-JavaScript $( "#button" ).button(); $( "#radioset" ).buttonset();

  10. Example with Buttons-Visual

  11. Example with Button- API • http://api.jqueryui.com/button/

  12. features

  13. Interactions • Drag • Drop • Resize • Select • Sort

  14. Widgets • Accordion • Autocomplete • Button • Datepicker • Dialog • Menu • Progressbar • Slider • Spinner • Tabs • Tooltip

  15. Effects • Remove Class • Toggle Class • Switch Class • Color Animation • Show • Hide • Toggle • Add Class

  16. Utilities • Position (position an object relative to something else like window, document, element, mouse) • Widget Factory

  17. Themes • Allows user to customize features like buttons, fonts, colors, etc • Can make own theme or choose common one • Default is ui-lightness • http://jqueryui.com/themeroller/

  18. Demo • http://jqueryui.com/demos/

  19. Questions?

More Related