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.

1. Building UI with jQuery & Wijmo Chris Bannon

2. about:me Chris Bannon Product Manager @b4nn0n

3. jQuery Makes JavaScript easy Same code in every browser Uses CSS selectors to find elements Simplifies Ajax requests Duh…

4. jQuery UI Easily apply animation effects Widget library Turns HTML into interactive UI As easy to use as jQuery Pre-themed with CSS Function in every browser Falls back to semantic HTML markup

5. Wijmo Builds on jQuery UI (not replaces it) Adds features to jQuery UI widgets Slider, Progressbar, etc. Adds new widgets to jQuery UI Grid, Charts, Tree, etc. Themeroller-ready As easy to use as jQuery HTML5, CSS3and SVG

6. Wijmo Complete Complete kit of jQuery UI widgets Focused on app-centric UI Data Visualization Charts (Bar, Line, Pie) Grid Tree Data Entry Input (Masked, Numeric, Date) ComboBox Commercial license

7. Wijmo Open Focused on common UI elements Navigation Menu Tabs Forms Textbox, Checkbox, Radio Calendar Tooltip Layout Accordion, Splitter, SuperPanel Open Source License

8. How it Works Widget Wijmofy! HTML CSS Java-Script HTML

9. In Other Words $(“ul”).wijmenu();

10. $(“code”).show(); Finally

11. ProTips jQuery UI

12. Use CSS Framework Classes $("fieldset") .addClass("ui-widget") .addClass("ui-corner-all");

13. Make Generic UI Builders $("button").button(); $("input[type='text").wijtextbox();

14. Use the Pseudo Selector $("input[type='text") .not(":wijmo-wijinputdate") .wijtextbox();

15. Create Option Sets var optionStore = {}; optionStore.slideMenu = { orientation: "vertical", mode: "sliding" }; optionStore.toolbarMenu = { orientation: "horizontal", trigger: ".wijmo-wijmenu-item", triggerEvent: "click" };

16. Resources Wijmo: http://wijmo.com jQuery: http://jquery.com jQueryUI: http://jqueryui.com Themeroller: http://jqueryui.com/themeroller/ Me: http://twitter.com/b4nn0n Thanks!

17. $(this).end(); Goodbye!