Download presentation
Presentation is loading. Please wait.
Published byCierra Gorges Modified over 9 years ago
1
jQuery Mobile, UI and Templates A better way for developing mobile and desktop apps http://www.petermessenger.com
2
What is jQuery? Straight from their website – jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. – jQuery is designed to change the way that you write JavaScript – Abstracts much of the problems with inconsistent web browser HTML implementations
3
Benefits of jQuery Used by a vast number of websites Open source Easy to learn Very powerful Great documentation Vast array of plug-ins allowing to you to do stuff http://jquery.com/
4
What is jQuery Templates? Plug in proposed by Microsoft in Feb 2010 Used to generate HTML from a template Can be used to generate from javascript objects or json returned from a webservice Syntax “similar” to Xaml syntax Example outlined by Scott Gu – http://weblogs.asp.net/scottgu/archive/2010/05/07/jquery-templates-and-data- linking-and-microsoft-contributing-to-jquery.aspx http://weblogs.asp.net/scottgu/archive/2010/05/07/jquery-templates-and-data- linking-and-microsoft-contributing-to-jquery.aspx Made an official Plug In October 2010 – http://www.borismoore.com/2010/10/jquery-templates-is-now-official- jquery.html
5
A simple example From the jQuery documentation page – http://api.jquery.com/tmpl
6
Documentation - Api jQuery.tmpl() and.tmpl(): These APIs are used to render a jQuery template: http://api.jquery.com/tmpl http://api.jquery.com/jQuery.tmpl http://api.jquery.com/tmpl http://api.jquery.com/jQuery.tmpl jQuery.tmplItem() and.tmplItem(): These APIs are used to find a jQuery template instance, and are crucial for providing interactivity: http://api.jquery.com/tmplitem http://api.jquery.com/jQuery.tmplitem http://api.jquery.com/tmplitem http://api.jquery.com/jQuery.tmplitem jQuery.template() and.template(): These APIs are used to compile or store a jQuery template, and are particularly useful for scenarios where templates are loaded in the form of strings, such as templates retreived remotely: http://api.jquery.com/template http://api.jquery.com/jQuery.template http://api.jquery.com/template http://api.jquery.com/jQuery.template
7
Documentation - Tags ${...}: This tag is used to evaluate fields or JavaScript expressions within templates: http://api.jquery.com/template-tag-equal http://api.jquery.com/template-tag-equal {{each...}}...{{/each}}: This tag is used used to iterate within a template (without creating template items): http://api.jquery.com/template-tag-each http://api.jquery.com/template-tag-each {{if...}}...{{else...}}...{{/if}}: This tag is used used to create conditional sections within templates: http://api.jquery.com/template-tag-if http://api.jquery.com/template-tag-else http://api.jquery.com/template-tag-if http://api.jquery.com/template-tag-else {{html...}}: This tag is used used to insert markup obtained from data within templates: http://api.jquery.com/template-tag-html http://api.jquery.com/template-tag-html {{tmpl...}}: This tag is used used for composition and iteration within templates (and creating new template items for each nested rendered template): http://api.jquery.com/template-tag-tmpl http://api.jquery.com/template-tag-tmpl {{wrap...}}...{{/wrap}}: This tag is used used for composition and iteration, along with incorporation of wrapped HTML within templates: http://api.jquery.com/template-tag-wrap http://api.jquery.com/template-tag-wrap
8
What is jQuery Mobile Straight from their website – A unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design – Works well on Iphone, Ipad, Ipod, Android, Windows Phone 7, Blackberry v6.0+, Symbian v5.0+ http://jquerymobile.com/
9
What it jQuery UI Straight from their website – jQuery UI provides abstractions for low-level interaction and animation, advanced effects and high-level, themeable widgets, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications. http://jqueryui.com/
10
Best way of determining Mobile 51 degrees is a free resource to determine mobile devices, allows redirection to mobile version of your site Details on using it – http://dotnetslackers.com/articles/aspnet/ASP-NET-Mobile-Handset- Detection-Redirection-Development-Made-Easy.aspx Links to source – http://51degrees.codeplex.com/
11
Summary Great for developing text based apps, that should “just work” of most mobile devices with minimal testing Faster development time, much less rework but may not run as fast as “native” apps Certainly worth further investigation
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.