building ui with jquery and wijmo
Post on 27-Jan-2015
124 Views
Preview:
DESCRIPTION
TRANSCRIPT
Building UI with
jQuery & Wijmo
Chris Bannon
about:me
Chris BannonProduct Manager@b4nn0n
jQuery
• Makes JavaScript easy• Same code in every browser• Uses CSS selectors to find elements• Simplifies Ajax requests
Duh…
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
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, CSS3 and SVG
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
Wijmo Open
• Focused on common UI elements– Navigation
• Menu• Tabs
– Forms• Textbox, Checkbox, Radio
– Calendar– Tooltip – Layout
• Accordion, Splitter, SuperPanel
– Open Source License
How it Works
HTML Wijmofy! Widget
CSSJava-ScriptHTML
In Other Words
$(“ul”).wijmenu();
$(“code”).show();
Finally
PROTIPSjQuery UI
Use CSS Framework Classes
$("fieldset") .addClass("ui-widget") .addClass("ui-corner-all");
Make Generic UI Builders
$("button").button(); $("input[type='text").wijtextbox();
Use the Pseudo Selector
$("input[type='text") .not(":wijmo-wijinputdate") .wijtextbox();
Create Option Sets
var optionStore = {};optionStore.slideMenu = { orientation: "vertical", mode: "sliding" };optionStore.toolbarMenu = { orientation: "horizontal", trigger: ".wijmo-wijmenu-item", triggerEvent: "click" };
Resources
Wijmo: http://wijmo.com jQuery: http://jquery.comjQueryUI: http://jqueryui.comThemeroller: http://jqueryui.com/themeroller/Me: http://twitter.com/b4nn0n
Thanks!
$(this).end();
Goodbye!
top related