Design, CG Graphics & Inspiration
How to write a simple application on jQuery Mobile

How to write a simple application on jQuery Mobile

Framework jQuery Mobile appeared not so long time ago and its quality was greatly improved. A number of subsystems have been rewritten (both for clarity and for performance) and cross-browser compatibility has seen a marked increase in quality. Previously I’ve worked with jQTouch and Sencha Touch. They both have their advantages and disadvantages, but I’d like to focus on the development on jQuery Mobile. Now I’m going to describe the process of creation of the simple application with several pages, Twitter integration, Google Maps and a set of basic elements. Let’s start!

So, first of all we add 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 move to the pages. Here we should note the similarity of jQuery Mobile and jQTouch – the entire application is one html page where specially marked div`s are the” pages ” of this application. In its basic form such “application page” looks like:

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

The data-role parameter sets up the function of div: the page, the header, content of the page or footer. It is also necessary to set the id parameter for div data-role=«page», to have the ability to navigate on the application.

It is also should be mentioned about data-theme parameter. This parameter can be applied to the all elements of the page and it determines which of the available default styles to use. Here you can find the examples of available themes.

So, there will be a menu on the main page of our application the elements of which will lead to the pages with examples. To create the menu we need ul list. 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>

ul tag’s parameters:
• data-role=«listview» — shows that this is the list you want to apply the stylization to.
• data-inset=«true» — not the full screen display of a list, if it’s not, then it is false;
• data-theme=«a»- the use of the а colour scheme.

jQuery Mobile includes a wide range of list types: simple, with icons, with image data etc. Here you can find the examples.
Also, I want to add a settings button to the toolbar. It is very easy:

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

As you can see, this button brings you to the customization page, it is represented as icon in the form of gear (data-icon=«gear») and it is located in the right side of the toolbar (class=«ui-btn-right»). There is a set of predetermined icons in the framework. Click here to see the examples.

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

Now, let’s move to the creation of the rest pages. We’ll focus on the settings page. Here we’ll place some form elements. Here you can find the full list of available form elements.

According to the guidance you should group all the elements within a certain div:

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

Let’s follow this recommendation. Now we put the following elements on the form.

Input area

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

Text area

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

Slider, setting its 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" />

Option

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

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>

Now we’ll create the search page. It will have two main elements: input area and searchresult list.

<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 we are going to use javascript. Let’s bind the input area for keyup function to filling searchresult list.

$("#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. Shuffle function 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. We should create it this way, because it is dynamically adding items to the list, and a framework will no longer handle them, for attaching the styles and parameters

Then we create the page that will work with Twitter by the use of @Anywhere. First we should connect the libraries:

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

To receive the key you need to login here.
Then we create the code of the page.

<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 is the main thing — JavaScript code that will run when we will open that page. To keep track of this event, there is a special event – pageshow. About the other events you can read 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>');
		});	
						
	});					
});

About the details of working with @ Anywhere you can read here.
When we open the page that we’ve created we can see that for some time it remains blank, it’s because the tweets are being loaded. To let the user know about what is going on we’ll add 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);
			}
		});							
	});					
});

Here you can find some additional information about the spinner and utilities.

Now we turn to the map page. Initially, once again select the right script

<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 we create the 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 the map. Let’s define its style

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

And now we add a javascript-code that will determine the current location, to center the map relative to it and add the marker to the center. At this marker, among other things, we’ll bind the event on its press.

$('#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 =) What is interesting here is the elements of the list:

Rounded list-divider

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

Link that opens a mail client

<li><a href="mailto:[email protected]" class="ui-link-inherit">EMail me</a></li>

The link leads to the dialling of numbers

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

Here you can find some information about links.
That’s it!

Source

  • Splashnology Editors,
  • April 19, 2011

SHARE THIS POST

This post has been written by the team here at Splashnology.com

Subscribe for the hottest posts

Subscribe to our email newsletter for useful tips and freebies.

  • tieji2pulee

    your source code link is erro!

  • marcus

    ^
     |____ What he/she said. Source link is not your source. 
     |
     v

  • Guest

    Source Code not Working
     

  • bihari tumba

    not good

  • tieji2pulee

    your source code link is erro!

  • marcus

    ^
     |____ What he/she said. Source link is not your source. 
     |
     v

  • Guest

    Source Code not Working
     

  • bihari tumba

    not good