Home » Archive

Articles in the jQuery Mobile Category

jQuery Mobile, Mobile Technology »

[16 Jul 2011 | One Comment | ]

jQuery Mobile Icons: jQuery Mobile framework has built in icon sets needed for most mobile application.
An icon can be added to a button by adding a data-icon attribute on the anchor specifying the icon to display. For example, the following markup:
<a href=”index.html” data-role=”button” data-icon=”delete”>Delete</a>

Above snippet creates below button icon:

data-role=”button” will transform hyper link as button and data-icon=”delete” will add delete icon on the button.
 
Creating custom jQuery mobile icons:
It is also possible to create custom icons for jQuery mobile buttons. To merge with theme create the icon 18×18 pixels saved as …

jQuery Mobile »

[2 Mar 2011 | No Comment | ]

JQuery mobile application can be made from single html file, instead of loading several pages.
Note:
Single file with multiple page will take initial load time.
Follow this for small web application.
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>

<title>My Mobile site</title>

<link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css” />
<script src=”http://code.jquery.com/jquery-1.4.3.min.js”></script>
<script src=”http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js”></script>

</head>

<body>
<!–Home page starts–>
<div data-role=”page” data-theme=”b” id=”home-page”>
<div data-role=”header”>
<h1>Designscripting.com</h1>
</div>
<div data-role=”content”>
<ul data-role=”listview”>
<li> <a href=”#about-page”>About</a> </li>
<li>Contact</li>
</ul>
</div>
<div data-role=”footer”>
<h4> <a href=”#”>Privacy</a></h4>
</div>
</div>
<!–Home page Ends–>

<!–About page starts–>
<div data-role=”page” data-theme=”b” id=”about-page”>
<div data-role=”header”>
<h1>Designscripting.com</h1>
</div>
<div data-role=”content”>
This is a sample about page.
</div>
<div data-role=”footer”>
<h4> <a href=”#”>Privacy</a></h4>
</div>
</div>
<!–About page Ends–>

</body>
</html>
We need to create mutiple page holders with unique id and the content section.
<div data-role=”page” data-theme=”b” id=”home-page”>
</div>

<div data-role=”page” data-theme=”b” id=”about-page”>
</div>
The …

jQuery Mobile »

[2 Mar 2011 | 2 Comments | ]

Transitions in jQuery mobile includes six CSS transition effects that can be applied to any object in the code and page transition, that is when you navigate to a new page or move back using back button.
six CSS transition effects in jQuery Mobile

slide
slideup
slidedown
pop
fade
flip

Add a transition effect to a link:
<a href=”page2.html” data-transition=”slidedown”>Slide down to page2</a>

Introduction to jQuery Mobile – part1
jQuery page Structure – part2
Header, content , footer component – part3
Themes in jquery Mobile – part4
Page transitions in jQuery mobile – part5
Multi pages in jQuery Mobile application – part6

jQuery Mobile »

[2 Mar 2011 | No Comment | ]

jQuery mobile themes are built around new object-oriented CSS framework. While creating or designing a mobile application or mobile we site we should consider

Usability
Accessibility
should convey the information to user with in small screen
use of color..

Themes of jQuery mobile are light weight and it uses:

CSS3 properties to add rounded corners, box and text shadow and gradients instead of images.
CSS3 properties to gradient background instead of images resuzed server overhead.

Built in themes and swatches:
There are 5 built in themes defined by a,b,c,d,e

“a” is the highest level of visual priority (black in our …

jQuery Mobile »

[2 Mar 2011 | No Comment | ]

Head section of mobile jQuery web page includes three important files

jQuery Mobile CSS : jquery.mobile-1.0a1.min.css
jQuery Framework : jquery-1.4.3.min.js
Jquery Mobile Framework : jquery.mobile-1.0a1.min.js

After finishing this article we achive below web page:

The sample page contains the head section with the files included.
<head>

<meta charset=”utf-8″>

<title>My Mobile site</title>
<link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css” />

<script src=”http://code.jquery.com/jquery-1.4.3.min.js”></script>
<script src=”http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js”></script>

</head>
Page holder in Mobile jQuery:
Entire page is built inside page holder, which contains the header section, content section and the …