Best IT Recipes

Difference between jQuery and jQuery Mobile?

I am new to mobile website development and I just made a mobile application with PhoneGap using frequent use of jQuery.

But there were, of course, a few crashes related to the way I formatted things and how they actually appeared on the screens of the mobile devices I tested on and trying to process them, I came across many suggestions to simplify myself with jQuery mobile.

Now it bothers me ... jQuery was not formatted. It was just my entry-level knowledge of mobile CSS that caused problems.

So what does jQuery mobile do and how does it differ from regular jQuery? If I already know jQuery, what will be new for me?

+82
jquery jquery-mobile
Apr 30 '12 at 23:30
source share
4 answers

jQuery is designed to simplify and standardize scripts in browsers. It focuses on low-level materials: creating elements, managing the DOM, managing attributes, making HTTP requests, etc.

jQueryUI is a set of user interface components and functions built on top of jQuery (that is, jQuery requires it to work): buttons, dialog boxes, sliders, tabs, more advanced animations, drag and drop functionality.

jQuery and jQueryUI are both designed to be added to your site (desktop or mobile) - if you want to add a specific function, jQuery or jQueryUI can help.

jQuery Mobile , however, is a complete framework. It is designed for your starting point for a mobile site. It requires jQuery and uses the jQuery and jQueryUI functions to provide both user interface components and API functions for creating sites that support mobile devices. You can still use as much as you want, but jQuery Mobile can manage the entire viewport in a mobile way, if you allow it.

Another important difference is that jQuery and jQueryUI tend to be a layer on top of your HTML and CSS. You should just leave your markup alone and improve it with jQuery. However, jQuery Mobile provides ways to determine where you want components to be displayed using only HTML. (from jQuery Mobile website):

<ul data-role="listview" data-inset="true" data-filter="true"> <li><a href="#">Acura</a></li> <li><a href="#">Audi</a></li> <li><a href="#">BMW</a></li> <li><a href="#">Cadillac</a></li> <li><a href="#">Ferrari</a></li> </ul>

The data-role attribute tells jQuery Mobile to convert this list to a component convenient for mobile devices, and the data-inset and data-filter attributes set its properties - without writing a single line of JavaScript. JQueryUI components, on the other hand, are usually created by writing a few lines of JavaScript to instantiate the component in the DOM.

+84
May 01 '12 at a.m.
source share

What is jQuery mobile

JQM (jQuery mobile) is a user interface system for mobile phones that is built on top of jQuery. JQM requires jQuery. Unlike other similar mobile phone infrastructures, JQM aims to support all major mobile, tablet, electronic and desktop platforms, and not just mobile web browser browsers. One of the most noticeable features of the structure is the Ajax navigation system, which uses animated page transitions (very cool).

What could be new to you

One thing about JQM that rolls the ball to new users is ajax navigation. Based on jquery, you are probably using to include your javascript on every page, and then using dom ready ( $(function(){ ... } or $(document).ready(function(){ .... } ) to run all your fun javascript actions. But since JQM uses ajax navigation, the system will pull other pages into the same area as the first page, and will not load your scripts contained in <head> . When the next page loads through the ajax, you will notice that your materials inside the $(function(){ ...} will not work on the second page. The solution to this is a must for with . Ytiya pageinit These following examples will help you in the beginning of your journey:

 $(document).on('pageinit', function(){ // this fires for each new page });

To target a specific page, you add the page id:

 $(document).on('pageinit','#page2', function(){ // this fires for #page2 only });

Understanding the new page events will help you when starting JQM. http://jquerymobile.com/demos/1.1.0/docs/api/events.html Good luck!

+28
May 01 '12 at
source share

jQuery is DOM manipulation / movement and the AJAX JavaScript framework. It abstracts the great complexity between different browsers automatically. There are many jQuery plugins that simplify many tasks.

jQuery Mobile is a user interface oriented to mobile applications built on jQuery. It has themed and custom components.

In general, they are free. You do not need to use jQuery Mobile to use jQuery. But to use jQuery Mobile you have to use jQuery.

+4
Apr 30 '12 at 23:32
source share

You do not have enough points for the comments above, so adding Andy to the second question about dependencies in the stream.

I believe what you are looking for here: jQuery Mobile Demo

 <!DOCTYPE html> <html> <head> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/[version]/jquery.mobile- [version].min.css" /> <script src="http://code.jquery.com/jquery-[version].min.js"></script> <script src="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.js"></script> </head> <body> ...content goes here... </body> </html>
+2
Aug 16 '14 at 13:21
source share


More articles:


All Articles