Logo F2FInterview

jQuery Mobile Interview Questions

Q   |   QA

  • As I have stated earlier that jQTouch is not a framework, it is plugin. Where jQuery Mobile is framework created for Mobile and tablet devices.
  • jQTouch is optimized for WebKit.Therefore jQTouch might be preferable if you plan on specifically targeting users tied to an iOS- or Android-based device. Where jQuery Mobile is compatible with all major mobile and tablet platforms.
  • jQTouch provides access to Geolocation (Access to device GPS Data) where jQuery Mobile doesn't provide this hardware access(to date).
  • jQTouch is focused on small screen devices. From their blog. "Apps developed with jQTouch will certainly run fine on iPads and other tablet devices, but we aren’t going to automagically convert to a more tablet-friendly UI that takes advantage of the additional real estate."
  • In terms of performance jQTouch is better than jQuery Mobile. If you are targeting only Webkit devices then go for jQTouch.
  • Though jQTouch project is technically active, the original author has moved on and development seems to have slowed where jQuery Mobile Announced in August 2010, it’s quickly progressed to a very functional Alpha 2.

 

  • jQuery Mobile supports more number of mobile platform as compare to Sencha Touch. Sencha touch only supports iOS, Android and recently Blackberry.
  • jQuery Mobile and Sencha touch both provides great UI features with lots of control but Sencha touch wins here. Sencha Touch offers a bit more like lots of icons, or built-in maps.
  • jQuery Mobile is easy to use as Sencha Touch is completely Javascript. Your application takes place in js files, dealing with js classes. On the other hand, jQueryMobile is markup-driven. Sencha Touch is an extension of the Ext JS framework. It has a more native language feel than html and does not follow open standards. For example, the entire <body> of a webpage is generated in javascript.
  • jQuery Mobile is easy to learn but for Sencha touch one need to put extra effort to learn it. In fact the documentation of Sencha touch is not comprehensive but jQuery Mobile documentation is quite good.
  • jQuery mobile is light weight compare to Sencha touch.
  • Sencha Touch supports a more MVC style application design, whereas jQuery mobile will simply be a load of markup and a load of jQuery script converting your HTML elements into touch friendly interface components.
  • jQuery Mobile Framework is easy to integrate with other technologies.
  • jQuery Mobile is free where Sencha Touch is available free of charge for commercial and open source application development. However, embedding Sencha Touch in a web application builder or software development kit (SDK) requires a paid commercial OEM license agreement. Read more about Sencha Touch Licensing FAQ.

MODx Rev and JQM work just great. MODx can generate all the .html and even .js from scratch without limits. getResources and getFeed will generate all the listviews for you so Model and Controller is at your service.  MODx is an ultimate choice  

No, but you can create something yourself if you want. Perhaps modify the CSS for the divider.

To get full advantage of jQuery mobile, we need to use HTML 5.

<!DOCTYPE html>

Now in the head section, give reference of jQuery mobile js and its css.

<head>
<title>Page Title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
</head> 

Inside the body tag, each view or "page" on the mobile device is identified with an element (usually a div) with the data-role="page" attribute:

<div data-role="page">
</div>

Within the "page" container, any valid HTML markup can be used, but for typical pages in jQuery Mobile, the immediate children of a "page" are divs with data-roles of "header", "content", and "footer".

<div data-role="header">
</div>
<div data-role="content">
</div>
<div data-role="footer">
</div>

Putting is all together then this is how it looks.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
</head>
<body>
<div data-role="page">

<div data-role="header">
<h1>Page Title</h1>
</div>

<div data-role="content">
<p>Page content.</p>
</div>

<div data-role="footer">
<h4>Page Footer</h4>
</div>

</div>
</body>
</html>

That's it. Now when you run your page, this is how it will look in the browser. 

jQuery Mobile Page Layout

In order to link this F2FInterview's page as Reference on your website or Blog, click on below text area and pres (CTRL-C) to copy the code in clipboard or right click then copy the following lines after that paste into your website or Blog.

Get Reference Link To This Page: (copy below code by (CTRL-C) and paste into your website or Blog)
HTML Rendering of above code: