jQuery Mobile, UI and Templates
"jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. It abstracts many problems with inconsistent web browser HTML implementations. Explore the benefits and templates offered by jQuery along with its extensive documentation."
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.
E N D
Presentation Transcript
jQuery Mobile, UI and Templates A better way for developing mobile and desktop apps http://www.petermessenger.com
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
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/
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 Made an official Plug In October 2010 http://www.borismoore.com/2010/10/jquery-templates-is-now-official- jquery.html
A simple example From the jQuery documentation page http://api.jquery.com/tmpl
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 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 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
Documentation - Tags ${...}: This tag is used to evaluate fields or JavaScript expressions within templates: 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 {{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 {{html ...}}: This tag is used used to insert markup obtained from data within templates: 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 {{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
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/
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/
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/
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
