Skip to main content

Exploring Jquery Mobile 1.4.0

    The Jquery Mobile team released a new stable version 1.4.0 on December 23, 2013, an early Christmas gift for all the Jquery Mobile fans including myself. The main thing that people noticed in this version was the change in the default theme and design. Jquery Mobile has gone flat with version 1.4.0, some believe that this change has been inspired by the flat metro design style Apple adopted for iOS 7. However, there have not been just cosmetic changes, but many more changes and we will take a look at these today.

Default theme (Swatch A)

    Version 1.4.0 is focused on performance improvements and reviewing widgets. A new default theme has been introduced with SVG icons. A few new widgets have been introduced with this version which include a flipswitch widget, a generic filter widget named "filterable", popups with arrows, tooltips for sliders and 2 new Jquery UI widgets have been intergrated - the Tabs widget and the Date Picker widget. The filterable widget can be used with listviews, collapsibles, tables, controlgroups, select and even a simple paragraph of plain text.

Jquery UI Tabs Widget Integrated

Jquery UI Date Picker Widget Integrated


    As compared to the earlier versions, in the current version of Jquery Mobile, DOM manipulations have been reduced to improve performance. Generation of inner markup for elements styled as buttons has been completely removed and in many cases, the frameworks just adds classes to the native element during enhancement and even the number of classes have been reduced.

    A new default theme with a flat, more modern design has been introduced in this version. Also the number of swatches has been reduced from 5 to 2; a light "A" swatch and a dark "B" swatch. The new theme also includes a completely new icon set which has vector-based SVG icons. A fallback to external PNG icons on browsers that don't support inline SVG and also been included.

Sample of the new SVG icons

    In this version of Jquery Mobile, the slider and the range slider widgets have been deprecated. These widgets will be worked on and supported again in the future versions. Data-role="fieldcontain" has also been deprecated and has been replaced by class ui-field-contain. Several other classes like ui-icon-shadow have also been deprecated in this version.

    2 new events - "Swipe to Delete" and "Swipe to navigate" have been introduced with this version. Many developers, I am sure must have been very happy to see these 2 features included in this release. These are very popular events that are a common requirement of most mobile web applications.

Swipe to navigate

Swipe to delete

    With all these new changes introduced in this version and many more new interesting features proposed for the future releases, Jquery Mobile is becoming one of the most prominent mobile web framework looking at the current market trends. Jquery Mobile is enhancing its existing framework by making it lighter and at the same time loading it with several features.

    Drop a line to share your experiences with the new version of this exciting mobile web framework. Feel free to suggest any new features that I missed to cover in this post. Till next time, have fun exploring the new Jquery Mobile.

Labels:

Comments

Post a Comment

Please leave your comments here...

Recommended for You

Is Google cheating?

               I found this piece of interesting fact, accidently while browsing the internet. Google shows different maps for India, China and USA. Confused hun! Well don’t be…Just read on… In Indian version of Google Maps, you can see Arunachal Pradesh and eastern part of Jammu and Kashmir as integral part of India. In US version of Google Maps, you can see Arunachal Pradesh and Jammu and Kashmir as a disputed region. In the Chinese version of the Google Maps, you can see Arunachal Pradesh and JnK as not a part of India.                 Many people complained this issue to Google. A Google employee responded : “ We do show different versions of this border, because we required to by law. Indian law requires us to show it one way, and the Chinese law requires us to show it another way . If we can legally do so, we strive to present b...
5 comments
Read more

Retriving co-ordinates...

         We have seen 2 Google Maps API v3 examples wherein we have retrieved the latitude-longitude co-ordinates of the point of click on the map. In the first example we have displayed the co-ordinates in the information window and in the second , we have displayed the co-ordinates in a form in the information window.         Today we will create a code to retrieve the latitude longitude co-ordinates in a text box while simultaneously a marker appears on the map as well. So, here goes the code. <html> <head> <title> Google Maps API v3 - Adding marker on Click and retrieving the co-ordinates in a text box </title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var map;    //When using event as a parameter to a function declare map, strictly as a global variable fun...
5 comments
Read more

Form info window

         Today we will look at a Google Maps API v3 example to add a form in the information bubble! This is usually required when we wish to accept some data/information from the user! This data can be saved to a server in the form of an XML file or a database! The information can then be retrieved back at a later stage, when necessary!          In this example we will only look at form in the information bubble! The connectivity part with the server will be discussed in another post! So, today's code snippet is as seen below! <html> <head> <title> Google Maps API v3 - Adding marker and info window on Click and creating a form in the infowindow with the lat-lng information in it. </title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var map;    //When using ev...
5 comments
Read more

Drive along - Cool coding

         This is something that will demonstrate to you the power of mapping! This is a Google Maps API v2 example, but just copy and paste the code in an html file and you will see something very cool! This will prove that mapping is real fun!          Let's have a look at the code first. Copy this code in your html file. Don't worry about the length of the code and the post in general. Just execute the code and you will surely enjoy what you see! <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title> Drive Along </title> <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAu3HXU_hLdVPTFGqLed_FCxT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQbblEPYBGNoRsuuSU9aBfSq4VAZA" type="text/javascript"> </script> <script src="http://econym.org.uk/gmap/epoly.js" type="text/javascript"> ...
6 comments
Read more

A Giant called Google...

    Wondering what you will be reading in this post today and what is "Google Giant"! Well, I was working on a simple project a couple of months back and that is the time when I was amazed and by the size of data that Google Maps servers might be having! As most of the readers (developers and enthusiast included) would know or might have noticed, Google maps are rendered by stitching small images together. You must have observed this on quite a number of occasions, when you see grey tiles when you have a slow internet connection in particular. It takes time for the images or tiles as we call them to be displayed.     Let us try and estimate what could be the size of the Google Maps data! Before proceeding, let's make a few assumptions and considerations. 1. Let's consider the Google Street View maps only. 2. The zoom level that is considered for the calculations is 21 - the max zoom level allowed on Google Maps API. 3. All the numbers are just an esti...
6 comments
Read more