JQueryMobile for Windows Phone - Revision history

Hamishwillee: Hamishwillee - Addition to article of: Category:Windows Phone 7.5

2012-11-30T05:38:28Z

Hamishwillee - Addition to article of: Category:Windows Phone 7.5

Hamishwillee: Hamishwillee - Adding missing translation link

2012-09-18T06:00:08Z

Hamishwillee - Adding missing translation link

Croozeus: Croozeus - /* Basics and setup */

2012-08-13T05:53:42Z

Croozeus - - Basics and setup

Croozeus: Croozeus - /* Preview */

2012-08-13T05:53:11Z

Croozeus - - Preview

Croozeus: Croozeus - /* Simple Interaction */

2012-08-13T05:52:12Z

Croozeus - - Simple Interaction

Croozeus: Croozeus - /* Full Code */ code tags

2012-08-13T05:51:27Z

Croozeus - - Full Code: code tags

Hamishwillee: Hamishwillee - Minor tidy up

2012-08-09T00:33:47Z

Hamishwillee - Minor tidy up

Hamishwillee: Hamishwillee - Fix categories

2012-08-06T00:35:12Z

Hamishwillee - Fix categories

Hamishwillee: Hamishwillee - Bot update - Fix ArticleMetaData

2012-08-02T05:08:16Z

Hamishwillee - Bot update - Fix ArticleMetaData

Kiran10182: Kiran10182 -

2012-07-25T08:15:27Z

Kiran10182 -

← Older revision		Revision as of 05:38, 30 November 2012
Line 262:		Line 262:

	Note: JQueryMobile images are borrowed from their official website, and I claim no ownership of these.		Note: JQueryMobile images are borrowed from their official website, and I claim no ownership of these.
−	<!-- Translation --> [[zh-hans:在Windows Phone中使用JQueryMobile]]	+	<!-- Translation --> [[zh-hans:在Windows Phone中使用JQueryMobile]][[Category:Windows Phone 7.5]]

← Older revision		Revision as of 06:00, 18 September 2012
Line 262:		Line 262:

	Note: JQueryMobile images are borrowed from their official website, and I claim no ownership of these.		Note: JQueryMobile images are borrowed from their official website, and I claim no ownership of these.
		+	<!-- Translation --> [[zh-hans:在Windows Phone中使用JQueryMobile]]

@@ Line 57: / Line 57: @@
 A page will be the first element inside the body tag of our HTML page. A page has 3 subsections- header, content and footer. But how to mention to the webkit engine, that this is a page ? Use the data-role attribute to do so. The header is the heading for our Metro styled webpage. This is where you show the page title and app name ( in comparison with native silverlight kit). Any h1 tag inside the header becomes the Page Title.
-<code>
+<code xml>
 <div data-role="page" class="type-interior" data-theme="a" data-position="fixed">
 <div data-role="header" data-theme="a">

@@ Line 250: / Line 250: @@
 The HTML page above is hosted [http://tinyurl.com/jqmwp here]. Below is a screenshot.
-[[File:Ss.png]]
+[[File:Ss.png|250px]]
 If you dig into the webpage, using tools like FireBug or Chrome Inspector, you see that JQueryMobile modifies the contents of our HTML to give this look and feel.

@@ Line 134: / Line 134: @@
 ==Simple Interaction==
 Since JQueryMobile is built upon JQuery UI, the same method of coding goes. You can apply selectors using $, and attach event listeners to any changes or user action. In the code below, we change the price based on product selected. We show a progressbar when Purchase button is pressed.
-<code>
+<code xml>
 <script type="text/javascript">
          $(document).ready(function() {

@@ Line 152: / Line 152: @@
 To give you a complete picture, here is the full code of my page.
-<code>
+<code xml>
 <!DOCTYPE html>
 <html>

@@ Line 1: / Line 1: @@
-[[Category:Code Snippet]][[Category:Windows Phone]][[Category:Web Apps]][[Category:UI]]
+[[Category:Windows Phone]][[Category:Web Apps]][[Category:UI]][[Category:JavaScript]][[Category:Code Snippet]]
-{{Abstract|This article explains how to use JQueryMobile to develop applications with Metro user experience. Targeted at web developers who want to build mobile apps. }}
+{{Abstract|This article explains how to use [http://www.jquerymobile.com/ JQueryMobile] to develop applications with Metro user experience. Targeted at web developers who want to build mobile apps. }}
 {{ArticleMetaData <!-- v1.2 -->
@@ Line 32: / Line 32: @@
 ==What is JqueryMobile==
-[http://www.jquerymobile.com JQueryMobile] is an open mobile UI framework for web developers built on the foundation of JQuery UI. In fact, one can claim that this is the mobile version of JQuery UI.  So what you get from download is a bunch of images, css and JS files, that together make UI components like buttons, checkboxs, form elements, navigation bars. JqueryMobile is highly customizable and lightweight. You can selectively import the components necessary for your web app, skin them according to your liking, animate or have page transitions. The general download of JQueryMobile gives us components that are skinned similar to iOS native components. Additionally, JQueryMobile provides graceful degradation on lower performant browsers. Since it is browser based, the 'write less, do more' philosophy applies and you can see it in action on your mobile, tablet and desktop or any device capable of rendering HTML5. The latest version as of the time of writing is version 1.1
+JQueryMobile is an open mobile UI framework for web developers built on the foundation of JQuery UI. In fact, one can claim that this is the mobile version of JQuery UI.  So what you get from download is a bunch of images, css and JS files, that together make UI components like buttons, checkboxs, form elements, navigation bars. JqueryMobile is highly customizable and lightweight. You can selectively import the components necessary for your web app, skin them according to your liking, animate or have page transitions. The general download of JQueryMobile gives us components that are skinned similar to iOS native components. Additionally, JQueryMobile provides graceful degradation on lower performant browsers. Since it is browser based, the 'write less, do more' philosophy applies and you can see it in action on your mobile, tablet and desktop or any device capable of rendering HTML5. The latest version as of the time of writing is version 1.1
 [[File:Jquery-mobile-devices-beta.png]]
@@ Line 38: / Line 38: @@
-==JqueryMobile Theme for WP, download==
+==JQueryMobile Theme for WP, download==
 Focusing on Windows phones, Metro is the user interface that users are familiar with. Since, JQueryMobile by default doesn't provide this look or feel, we should download a CSS sheet available here.[http://blogs.msdn.com/b/interoperability/archive/2012/04/26/more-news-from-ms-open-tech-announcing-the-open-source-metro-style-theme.aspx This project] is supported by Microsoft with the motive to bring web developers onto its mobile platform. This theme is still in development, some native UI components like pivot or panorama, present in native Silverlight Toolkit, are absent at the time of this writing. Are you too eager, see the beauty of the project  [http://sgrebnov.github.com/jqmobile-metro-theme/samples/jqm-public-demo/index.html here]
 These are some images from the project itself,
-<gallery>
+<gallery widths=250px heights=400px>
 File:demo.png|1
 File:demo2.png|2

← Older revision		Revision as of 00:35, 6 August 2012
Line 1:		Line 1:
−	[[Category:Code Snippet]][[Category:Web]][[Category:~~Windows Phone~~]]	+	[[Category:Code Snippet]][[Category:Windows Phone]][[Category:Web Apps]][[Category:UI]]
	{{Abstract\|This article explains how to use JQueryMobile to develop applications with Metro user experience. Targeted at web developers who want to build mobile apps. }}		{{Abstract\|This article explains how to use JQueryMobile to develop applications with Metro user experience. Targeted at web developers who want to build mobile apps. }}

@@ Line 9: / Line 9: @@
 |platform= Windows Phone, HTML5
 |devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 |dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
-|signing=<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
+|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 |capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
-|keywords=  JQueryMobile, Web, HTML5
+|keywords= JQueryMobile, Web, HTML5
 |language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 |translated-by= <!-- [[User:XXXX]] -->
 |translated-from-title= <!-- Title only -->
 |translated-from-id= <!-- Id of translated revision -->
-|review-by=<!-- After re-review: [[User:username]] -->
+|review-by= <!-- After re-review: [[User:username]] -->
 |review-timestamp= <!-- After re-review: YYYYMMDD -->
 |update-by= <!-- After significant update: [[User:username]]-->
 |update-timestamp= <!-- After significant update: YYYYMMDD -->
 |creationdate= 20120725
 |author= [[User:manikantan]]
 }}

@@ Line 74: / Line 74: @@
 This is our overall UI (inside BODY tag).
-<code>
+<code html4strict>
 <body>
 <div data-role="page" class="type-interior" data-theme="a" data-position="fixed">