We write a simple application on jQuery Mobile

The jQuery Mobile framework has been released for a relatively long time, but only now I managed to do it. Before that he dealt with jQTouch and Sencha Touch. Each of them has its pros and cons, but today we will talk about the development on jQuery Mobile. For basic experience, I will describe the creation of a simple application with several pages, integration with twitter and google maps, and a set of basic elements. Go!

So, first connect the framework and styles.

<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> 

Now let's take the pages. It is worth noting the similarity of jQuery Mobile and jQTouch - the entire application is one html of the page, on which the divs in a special way are the “pages” of the application. The basic view of such an “application page” is:

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

The data-role parameter defines the role of the div: page, header, page content, or footer. You also need to set the id parameter for the data-role = “page” div so that you can navigate around the application.

Immediately it is worth mentioning another parameter data-theme . This parameter applies to all page elements and determines which of the default styles to use. Examples of available topics can be found here .

So, on the main page of our application there will be a menu, the elements of which will lead to the pages with examples. To make the menu we need a list of ul . It will look like this:

 <ul data-role="listview" data-inset="true" data-theme="a"> <li><a href="#twitter_page">Twitter example</a></li> <li><a href="#map_page">Map example</a></li> <li><a href="#search">Search example</a></li> <li><a href="#about">About</a></li> </ul> 

About the parameters of the ul tag:

• data-role = "listview" - shows that this is a list to which you want to apply styling;
• data-inset = “true” - the display of the list is not the full width of the screen, if not, it is equivalent to false;
• data-theme = “a” —applies a color scheme.

In jQuery Mobile, you can find a lot of types of lists: simple, with icons, with images, and others and others. Examples can be found here .
')
And I also want the settings button in the toolbar. It's very easy to do this:

 <a href="#settings" data-icon="gear" class="ui-btn-right">Options</a> 

As you can see, this button leads to a page with settings, has a gear icon ( data-icon = "gear" ) and is located on the right side of the toolbar ( class = "ui-btn-right" ). The framework already has a set of predefined icons, you can see them here .

In the end, the main page will look like this:

 <div data-role="page" id="main_page" data-theme="b"> <div data-role="header" > <h1 id="twi_acc">Home page</h1> <a href="#settings" data-icon="gear" class="ui-btn-right">Options</a> </div> <div data-role="content" > <ul data-role="listview" data-inset="true" data-theme="a"> <li><a href="#twitter_page">Twitter example</a></li> <li><a href="#map_page">Map example</a></li> <li><a href="#search">Search example</a></li> <li><a href="#about">About</a></li> </ul> </div> <div data-role="footer"> </div> </div> 

We now turn to the creation of the remaining pages. Let's do the settings page. On it we will place some of the form elements, a complete list of which can be found here .

The guide recommends grouping all the elements within a particular diva:

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

Follow this recommendation.

Place the following elements on the form.
Entry field

 <label for="name">My name:</label> <input type="text" name="name" id="name" value="" /> 

Large text field

 <label for="textarea">About myself:</label> <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea> 

Slider, setting it to the maximum, minimum and current values

 <label for="slider">Value this site:</label> <input type="range" name="slider" id="slider" value="0" min="-50" max="50" /> 

Switch

 <label for="slider2">Value this site:</label> <select name="slider2" id="slider2" data-role="slider"> <option value="off">Like</option> <option value="on">Dislike</option> </select> 

And selector

 <select name="select-choice-1" id="select-choice-1"> <option value="standard">Tired</option> <option value="standard">Happy</option> <option value="standard">Sick</option> <option value="standard">Sunny</option> </select> 

On this with the settings page all. By the way, if you start having a code and go to the newly created page, you can see that the Back button was created automatically. Trifle, but nice.

Now create another simple page - search page. On it we will have two main elements - an input field and a list of results.

 <div data-role="content" > <label for="search">Search</label> <input type="search" name="password" id="search" value="" /> <ul data-role="listview" data-inset="true" id="searchresult"> </ul> </div> 

Now let's turn to javascript. Zabind for the input field on the event keyup filling the list of results.

 $("#search").keyup(function(){ var res = shuffle(monthes); var list=''; $.each(res, function(index, value) { list+='<li role="option" tabindex="0" data-theme="a" class="ui-btn ui-li ui-btn-up-a"><div class="ui-btn-inner"><div class="ui-btn-text">'+value+'</div><span class="ui-icon ui-icon-arrow-r"></span></div></li>'; }); $("#searchresult").html(list); }); 

A few words about the code. In the first line, we shuffle the existing array. The shuffle function is below.

 var shuffle = function(o){ //v1.0 for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x); return o; }; 

Then we create the list itself. You have to create it this way, because the list items are dynamically added and the framework will no longer process them, in order to add the necessary styles and parameters. But maybe there is a better way.

Now create a couple of interesting pages. The first will work with Twitter by means of @Anywhere. At first we will connect the necessary libraries:

 <script src="http://platform.twitter.com/anywhere.js?id=key_value&v=1" type="text/javascript"></script> 

To get the key you need to register here .
Then we create the code of the page we need.

 <div data-role="page" id="twitter_page" data-theme="b"> <div data-role="header" > <h1>Simple twitter example</h1> </div> <div data-role="content" > <div id="twi_list"></div> </div> <div data-role="footer"> </div> </div> 

And now the most important thing is javascript code that will be executed when the page we need is opened. To track this event there is a special event - pageshow . Read about other events here .

 $('#twitter_page').live('pageshow',function(event, ui){ twttr.anywhere(function(T) { T.User.find('andrebrov').timeline().first(20).each(function(status) { $('div#twi_list').append('<p>' + status.user.name + ': ' + status.text + '</p>'); }); }); }); 

Details of the work with @Anywhere can be found at the link .
Having opened the page we created, we see that for some time it remains empty - tweets are loaded. To make the user aware that something is happening at the moment, we will add a spinner. Then the code will look like this:

 $('#twitter_page').live('pageshow',function(event, ui){ twttr.anywhere(function(T) { $.mobile.pageLoading(); var j=0; T.User.find('andrebrov').timeline().first(20).each(function(status) { $('div#twi_list').append('<p>' + status.user.name + ': ' + status.text + '</p>'); j++; if (j==1){ $.mobile.pageLoading(true); } }); }); }); 

About spinner and other utilities read here .

Now let's go to the map page. First, again, we include the necessary scripts

 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript" src="http://www.google.com/jsapi"></script> 

Then create a page

 <div data-role="page" id="map_page" data-theme="b"> <div data-role="header" > <h1>Map example</h1> </div> <div data-role="content" > <div id="map_canvas"></div> </div> <div data-role="footer"> </div> </div> 

The map_canvas element will contain a map. Let's style it

 #map_canvas{ width:100%; height: 100%; position:relative; top:0px; } 

And add a javascript code that will determine the current location, center the map relative to it and add a marker to the center. On this marker, among other things, we will hang the event at its click.

 $('#map_page').live('pageshow',function(event, ui){ navigator.geolocation.getCurrentPosition(function(location) { var point = new google.maps.LatLng(location.coords.latitude, location.coords.longitude); var myOptions = { zoom: 13, center: point, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); var marker = new google.maps.Marker({position: point,map: map}); google.maps.event.addListener(marker, 'click', function() { alert("Current coodinates are: latitude "+location.coords.latitude+", longitude "+location.coords.longitude); }); }); }); 

And finally, the page about me =) On it, the interesting elements will be the elements of the list:
Rounded delimiter

 <li data-role="list-divider" role="heading" tabindex="0" class="ui-li ui-li-divider ui-bar-b ui-corner-top"></li> 

Link opening email client

 <li><a href="mailto:mailme@gmail.com" class="ui-link-inherit">EMail me</a></li> 

Link leading to dialing

 <li><a href="tel:+79000000000" class="ui-link-inherit">Call me</a></li> 

About the types of links read here .

So, our application is ready!

The final result .
Sources
Documentation

Enjoy all the work!