Welcome to my blog, if there’s something I didn’t cover feel free to leave me a comment below and I will respond as soon as humanly possible. Topic of today’s article is an in-depth review of jQuery Mobile framework.
 
 

Note: If this tutorial was helpful, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!

PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.


 
Link Examples GitHub Repo
 
 

Intro

 
This is Part 3 in a multipart series called: “Best HTML5 Mobile App Frameworks”
 
 
Note: I have no intention of stopping writing after I review Kendo UI. If you want me to review a framework you like or know about just write me a comment below.
 

What Is jQuery Mobile Framework?

 
jQuery Mobile is an HTML5-based user interface system designed to make responsive websites and apps that are accessible on all smartphone, tablet and desktop devices. Unlike Sencha Touch which is built to work only on web kit browsers (this is no longer true), jQuery Mobile will run on pretty much anything as long it supports HTML5 standard. It doesn’t matter are you running it on a Windows, Mac OS, Android or iOS, it will run just fine and that makes it appealing to a broader specter of users. This is also the oldest framework reviewed here, initially it was released during 2000.
 
Unlike frameworks like Ionic or Sencha Touch, jQuery Mobile is HTML5 markup based framework, whereas much job is done through HTML5 markup (mostly through data attributes). Background JavaScript is handled with jQuery though MVC (or MVVC) is not supported out of the box (Backbone can be used after some major tweaking).
 
Unlike Ionic and Famo.us, jQuery Mobile is both mobile and desktop framework. HTML5 markup is heavily styled using CSS3, which can cause some performance problems, especially if UI is overcrowded. Unfortunately, you will need to sacrifice this functionality in order to run Backbone with jQuery Mobile.
 
Probably biggest jQuery Mobile quality (sometimes downside) is AJAX driver page and navigation handling. AJAX is used to load application content into the DOM (non-necessary content is removed from the DOM accordingly, to prevent large memory footprint).
 
It should be used for mobile website development, sometimes even for desktop website development.
 

What jQuery Mobile is not?

 
jQuery Mobile is not a mobile version of jQuery, think of it as an additional layer (or extension) around jQuery (just like jQuery UI).
 
If you prefer JavaScript approach then this framework is not for you. You will still need to use jQuery (or vanilla JavaScript) but not nearly enough like in the case of Sencha Touch.
 
If possible it should not be used for hybrid mobile development, so don’t expect it to do wonders (this is not a case when used properly, which requires a lot of digging and learning). Once upon the time jQuery Mobile + PhoneGap combination almost killed PhoneGap wrapper framework (read more about it here). Nothing changed since that time, jQuery Mobile will still perform purely if used improperly (read one of my previous articles if you want to find out how to avoid this).
 

Main features

 
  • Open-source and free
  • Built around jQuery (Can also be used with Backbone)
  • Compatible with all major mobile platforms as well as all major desktop browsers
  • Theming framework that allows a creation of custom themes
  • Limited dependencies and lightweight to optimize speed (80%-90% will fail in this)
  • HTML5-driven configuration for laying out pages with minimal scripting
  • AJAX based navigation and page handling
  • Touch-optimized UI widgets
  • Large 3rd party support
  • Supports PhoneGap as native app wrapper
 

Code example

 

HTML:

<!DOCTYPE html>
<html>

<head>
  <title>jQM Complex Demo</title>
  <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
  <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi" />
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
  <link rel="stylesheet" href="http://example.gajotres.net/iscrollview/jquery.mobile.iscrollview.css" />
  <link rel="stylesheet" href="http://example.gajotres.net/iscrollview/jquery.mobile.iscrollview-pull.css" />
  <link rel="stylesheet" href="style.css">
  <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
  <script src="http://example.gajotres.net/iscrollview/iscroll.js"></script>
  <script src="http://example.gajotres.net/iscrollview/jquery.mobile.iscrollview.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <div data-role="page" id="home">
    <div data-theme="a" data-role="header">
      <h3>
            Movie List
        </h3>
    </div>
    <div data-role="content">
      <div class="example-wrapper" data-iscroll>
        <ul data-role="listview" id="movie-list" data-theme="a">

        </ul>
      </div>
    </div>
    <div data-theme="a" data-role="footer">
      <h1>Copyright 2015</h1>
    </div>
  </div>
  <div data-role="page" id="headline">
    <div data-theme="a" data-role="header">
      <a href="#home" class="ui-btn-left" data-transition="slide" data-direction="reverse">Back</a> 
      <h3>
            Movie Info
        </h3>
    </div>
    <div data-role="content">
      <ul data-role="listview" id="movie-data" data-theme="a">

      </ul>
    </div>
  </div>

</body>

</html>

JavaScript:

$(document).on('pageinit', '#home', function(){      
    var url = 'http://api.themoviedb.org/3/',
        mode = 'search/movie?query=',
        movieName = '&query='+encodeURI('Batman'),        
        key = '&api_key=470fd2ec8853e25d2f8d86f685d2270e';        
    
    $.ajax({
        url: url + mode + key + movieName ,
        dataType: "jsonp",
        async: true,
        success: function (result) {
            ajax.parseJSONP(result);
        },
        error: function (request,error) {
            alert('Network error has occurred please try again!');
        }
    });         
});

$(document).on('pagebeforeshow', '#headline', function(){      
    $('#movie-data').empty();
    $.each(movieInfo.result, function(i, row) {
        if(row.id == movieInfo.id) {
            $('#movie-data').append('<li><img src="http://image.tmdb.org/t/p/w92'+row.poster_path+'"></li>');
            $('#movie-data').append('<li>Title: '+row.original_title+'</li>');
            $('#movie-data').append('<li>Release date'+row.release_date+'</li>');
            $('#movie-data').append('<li>Popularity : '+row.popularity+'</li>');   
            $('#movie-data').append('<li>Popularity : '+row.vote_average+'</li>');             
            $('#movie-data').listview('refresh');            
        }
    });    
});

$(document).on('pageshow', '#headline', function(){      
    benchmark.end = new Date().getTime();
    benchmark.checkTimeDifference();
});

$(document).on('vclick', '#movie-list li a', function(){  
    benchmark.start = new Date().getTime();
    movieInfo.id = $(this).attr('data-id');
    $.mobile.changePage( "#headline", { transition: "slide", changeHash: false });
});

var movieInfo = {
    id : null,
    result : null
}

var ajax = {  
    parseJSONP:function(result){  
        movieInfo.result = result.results;
        $.each(result.results, function(i, row) {
            console.log(JSON.stringify(row));
            $('#movie-list').append('<li><a href="" data-id="' + row.id + '"><img src="http://image.tmdb.org/t/p/w92'+row.poster_path+'"/><h3>' + row.title + '</h3><p>' + row.vote_average + '/10</p></a></li>');
        });
        $('#movie-list').listview('refresh');
    }
}

var benchmark = {
  start : null,
  end : null, 
  checkTimeDifference:function() {
    var time = (this.end - this.start) / 1000;
    console.log('Execution time: ' + time + ' seconds');
  }
}

CSS:

.ui-content {
    padding: 0 !important;
}
 
.ui-listview {
    margin: 0 !important;
}
 
.example-wrapper, .example-wrapper div.iscroll-scroller {
    width: 100% !important;
}
 

Example

 
Demo
 
 
Working embedded example:
 
 
Warning: If you can't see a working example that probably means plnkr.co is down ... again.
 
Continue Reading