Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building UI with jQuery and Wijmo


Published on

Chris Bannon shows how jQuery can be used to build powerful UI’s for the Web. Discover the benefits of using jQuery to create interfaces, including a separation from which server-side technology you choose. You’ll walk away with knowledge on how to leverage jQuery & Wijmo when building Web apps.

Published in: Technology, Art & Photos
  • Be the first to comment

Building UI with jQuery and Wijmo

  1. 1. Building UI with jQuery & Wijmo<br />Chris Bannon<br />
  2. 2. about:me<br />Chris Bannon<br />Product Manager<br />@b4nn0n<br />
  3. 3. jQuery<br />Makes JavaScript easy<br />Same code in every browser<br />Uses CSS selectors to find elements<br />Simplifies Ajax requests<br />
  4. 4. jQuery UI<br />Easily apply animation effects<br />Widget library<br />Turns HTML into interactive UI<br />As easy to use as jQuery<br />Pre-themed with CSS<br />Function in every browser<br />Falls back to semantic HTML markup<br />
  5. 5. Wijmo<br />Builds on jQuery UI (not replaces it)<br />Adds features to jQuery UI widgets<br />Slider, Progressbar, etc.<br />Adds new widgets to jQuery UI<br />Grid, Charts, Tree, etc.<br />Themeroller-ready<br />As easy to use as jQuery<br />HTML5, CSS3and SVG<br />
  6. 6. Wijmo Complete<br />Complete kit of jQuery UI widgets<br />Focused on app-centric UI<br />Data Visualization<br />Charts (Bar, Line, Pie)<br />Grid<br />Tree<br />Data Entry<br />Input (Masked, Numeric, Date)<br />ComboBox<br />Commercial license<br />
  7. 7. Wijmo Open<br />Focused on common UI elements<br />Navigation<br />Menu<br />Tabs<br />Forms<br />Textbox, Checkbox, Radio<br />Calendar <br />Tooltip <br />Layout<br />Accordion, Splitter, SuperPanel<br />Open Source License<br />
  8. 8. How it Works<br />Widget<br />Wijmofy!<br />HTML<br />CSS<br />Java-Script<br />HTML<br />
  9. 9. In Other Words<br />$(“ul”).wijmenu();<br />
  10. 10. $(“code”).show();<br />
  11. 11. Resources<br />Wijmo:<br />jQuery:<br />jQueryUI:<br />Themeroller:<br />Me:<br />Thanks!<br />
  12. 12. $(this).end();<br />