Mobile-Web-App: 2011

Friday, December 30, 2011

CSS class name selector

Class name selector begins with a dot. It's a example:

<html>
<head>
<title>Mobile-Web-App</title>
<style>

.graybackground{
 background-color: gray;
}
.marketplace{
 background-image: url("marketplace.png");
}
.live{
 background-image: url("live.png");
}
.bugzilla{
 background-image: url("bugzilla.png");
}
.forums{
 background-image: url("forums.png");
}
.planet{
 background-image: url("planet.png");
}
.wiki{
 background-image: url("wiki.png");
}
.portal{
 background-image: url("portal.png");
}

.placeBottomRight{
 height:50px;
 background-repeat: no-repeat;
 background-position: bottom right;
}
</style>
</head>
<body>

<h1>Mobile-Web-App: CSS selector by class name</h1>
<div class="graybackground">graybackground</div>
<div class="marketplace placeBottomRight">marketplace</div>
<div class="live placeBottomRight">live</div>
<div class="bugzilla placeBottomRight">bugzilla</div>
<div class="forums placeBottomRight">forums</div>
<div class="planet placeBottomRight">planet</div>
<div class="wiki placeBottomRight">wiki</div>
<div class="portal placeBottomRight">portal</div>

</body>
</html>

Thursday, December 29, 2011

A Document Type Declaration, or DOCTYPE, is an instruction that associates a particular SGML or XML document (for example, a webpage) with a Document Type Definition (DTD) (for example, the formal definition of a particular version of HTML). In the serialized form of the document, it manifests as a short string of markup that conforms to a particular syntax.

The HTML layout engines in modern web browsers perform DOCTYPE "sniffing" or "switching", wherein the DOCTYPE in a document served as text/html determines a layout mode, such as "quirks mode" or "standards mode". The text/html serialization of HTML5, which is not SGML-based, uses the DOCTYPE only for mode selection. Since web browsers are implemented with special-purpose HTML parsers, rather than general-purpose DTD-based parsers, they don't use DTDs and will never access them even if a URL is provided. The DOCTYPE is retained in HTML5 as a "mostly useless, but required" header only to trigger "standards mode" in common browsers.

Source: Wikipedia - Document Type Declaration

Example of <!DOCTYPE> in HTML5

<!DOCTYPE html>
<html>
<head>
<title>Title...</title>
</head>
<body>
Body...
</body>
</html>

Wednesday, December 28, 2011

define color in CSS

color in CSS can be specified in the forms of keywords, hexadecimal, short hexadecimal, rgb(r, g, b) or rgb(r, g, b) in %.

example:

<html>
<head>
  <title>CSS - color</title>
</head>
<body
style="
margin-left:20px;
margin-right:20px;
background-image:url(http://goo.gl/ZTEx7);
background-repeat:no-repeat;
background-position:bottom right;
background-color:#e0e0e0;
">

<h1 style="font: bold 2em helvetica">Mobile-Web-App: color</h1>
<p>color in CSS can be specified in the forms of keywords, hexadecimal, short hexadecimal, rgb(r, g, b) or rgb(r, g, b) in %:</p>
<ul><li>
<p style="color:white; background-color:black">keywords: style="color:white; background-color:black"</p>
</li><li>
<p style="color:#101010; background-color:#f0f0f0">hexadecimal: style="color:#101010; background-color:#f0f0f0"</p>
</li><li>
<p style="color:#fff; background-color:#111">short hexadecimal: style="color:#fff; background-color:#111"</p>
</li><li>
<p style="color:rgb(255, 0, 0); background-color:rgb(0, 255, 255)">rgb(r, g, b): style="color:rgb(255, 0, 0); background-color:rgb(0, 255, 255)"</p>
</li><li>
<p style="color:rgb(100%, 100%, 100%); background-color:rgb(0%, 0%, 0%)">rgb(r, g, b) in %: style="color:rgb(100%, 100%, 100%); background-color:rgb(0%, 0%, 0%)"</p>
</li>
</ul>
</body>
</html>

Tuesday, December 27, 2011

CSS: set width using %

<html>
<head>
  <title>CSS Test</title>
  <style>
body {
 width: 75%;
 background-image: url("http://goo.gl/ZTEx7");
 background-repeat: no-repeat;
 background-position: bottom right;
 background-color: #e0e0e0 }
h1{font: bold 2em helvetica}
p {
 font-size: 20px;
 color: white;
 width: 50%; 
 background-color: #303030 }  
  </style>
</head>
<body>

<h1>Mobile-Web-App: set width using %</h1>
<p>width of <body> = 75%</p>
<p>width of <p> = 50% inside <body></p>

</body>
</html>

Monday, December 26, 2011

Include CSS in HTML

Basically there are 4 ways to include CSS style in HTML:

Embed CSS inside <style type="text/css"></style> in-between <head> and </head>

<html>
  <head>
    <title>CSS - 1</title>
    <style>
body { 
 margin-left: 20px; 
 margin-right: 20px;
 background-image: url("http://goo.gl/ZTEx7");
 background-repeat: no-repeat;
 background-position: bottom right;
 background-color: #e0e0e0 }
h1{font: bold 2em helvetica}
p { font-size: 20px; }    
    </style>
  </head>
  <body>
  
<h1>Mobile-Web-App</h1>
<p>Embed CSS inside <style type="text/css"></style> in-between <head> and </head></p>  
  
  </body>
</html>

Include <link> element to link to external CSS file.

<html>
  <head>
    <title>CSS - 2</title>
    <link rel="stylesheet" type"text/css" href="myCSS.css"/>
  </head>
  <body>
  
<h1>Mobile-Web-App</h1>
<p><link rel="stylesheet" type"text/css" href="myCSS.css"/></p>  

  </body>
</html>

With external CSS file, myCSS.css

body { 
 margin-left: 20px; 
 margin-right: 20px;
 background-image: url("http://goo.gl/ZTEx7");
 background-repeat: no-repeat;
 background-position: bottom right;
 background-color: #e0e0e0 }
 
h1{font: bold 2em helvetica}

p { font-size: 20px; }

Using <style type="text/css"> @import url(myCSS.css); </style> to import from external CSS file.

<html>
  <head>
    <title>CSS - 3</title>
    <style type="text/css">
     @import url(myCSS.css);
    </style>
  </head>
  <body>
  
<h1>Mobile-Web-App</h1>
<p>    
  <style type="text/css">
  @import url(myCSS.css);  
  </style>
</p>  

  </body>
</html>

Using HTML attribute style

<html>
  <head>
    <title>CSS - 4</title>
  </head>
  <body 
  style="
  margin-left:20px;
  margin-right:20px;
  background-image:url(http://goo.gl/ZTEx7);
  background-repeat:no-repeat;
  background-position:bottom right;
  background-color:#e0e0e0;
  ">

<h1 style="font: bold 2em helvetica">Mobile-Web-App</h1>
<p style="font: 20px sans-serif;">Using HTML attribute style</p>  
  
  </body>
</html>

A simple example using CSS, inside HTML

It's a simple example to implement CSS inside HTML.

<html>
<head>
  <title>CSS Test</title>
  <style>
body {
 margin-left: 20px;
 margin-right: 20px;
 background-image: url("http://goo.gl/ZTEx7");
 background-repeat: no-repeat;
 background-position: bottom right;
 background-color: #e0e0e0 }
 
h1{font: bold 2em helvetica}

p { font-size: 20px; }  
  </style>
</head>
<body>

<h1>Mobile-Web-App</h1>
<p>Test CSS</p>

</body>
</html>

Sunday, December 25, 2011

Character encoding

A character encoding system consists of a code that pairs each character from a given repertoire with something else, such as a sequence of natural numbers, octets or electrical pulses, in order to facilitate the transmission of data (generally numbers and/or text) through telecommunication networks or storage of text in computers.

A character code may be represented as a bit pattern, octets, or a sequence of electrical pulses.

Wikipedia have a huge list of character encoding, visit Wikipedia - Character encoding.

FREE AWS (Amazon Web Services)

AWS (Amazon Web Services) is introducing a free usage tier to new AWS customers get started in the cloud. New AWS customers will be able to run a free Amazon EC2 Micro Instance for a year, while also leveraging a free usage tier for Amazon S3, Amazon Elastic Block Store, Amazon Elastic Load Balancing, and AWS data transfer. AWS’s free usage tier can be used for anything you want to run in the cloud: launch new applications, test existing applications in the cloud, or simply gain hands-on experience with AWS.

know more: http://aws.amazon.com/free/

Wednesday, December 21, 2011

HTML Media Capture API

It's a example to input image file using W3C HTML Media Capture specification.

Note that not all browse have implemented this feature currently. It's a example run on Firefox for Android 9.0, running on table of HTC Flyer (Android 3.2.1). If user click on the Browse... button, it will open a file browser to select file. If capture button clicked, a camera capture dialog will be open.

<!DOCTYPE html>
<html>
<head>
<title>HTML5 Capture API</title>
</head>
<body>
<H1>HTML5 Capture API</H1>
<input type="file" accept="image/*" id="capture">
</body>
</html>

Head First Mobile Web

Despite the huge number of mobile devices and apps in use today, your business still needs a website. You just need it to be mobile. Head First Mobile Web walks you through the process of making a conventional website work on a variety smartphones and tablets. Put your JavaScript, CSS media query, and HTML5 skills to work—then optimize your site to perform its best in the demanding mobile market. Along the way, you’ll discover how to adapt your business strategy to target specific devices.

Navigate the increasingly complex mobile landscape
Take both technical and strategic approaches to mobile web design
Use the latest development techniques—including responsive web design, and server-side device detection with WURFL
Learn quickly through images, puzzles, stories, and quizzes

Tuesday, December 20, 2011

Create HTML5 Apps & Web Apps with the appMobi XDK

appMobi XDK(Cross Platform Development Kit) uses standard web languages (HTML5, CSS, and JavaScript) to create mobile apps for smartphones and tablets. Uniquely, you don't have to learn any new HTML tools to create apps with XDK. You can develop and test apps using Macintosh, PC, DreamWeaver, Visual Studio - whatever tools you are already comfortable using.

The XDK offers a comprehensive simulation and debugging capability far beyond any other mobile development system. Apps can be rapidly tested during development using the XDK's built-in emulator, or you can test on the actual device using WiFi and appMobi's unique AppLab testing apps. You can even email test versions of your app to colleagues or clients anywhere in the world, allowing them to test using AppLab.

appMobi web site: http://www.appmobi.com/

Monday, December 19, 2011

Footer Toolbar of jQuery Mobile

Example of using Footer Toolbar of jQuery Mobile:

<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Web Page: Toolbar</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>
<body>

<div data-role="page" id="home">
<!-- Example of Header bar -->
<div data-role="header">
 <!-- Left Button -->
 <a href="#home" data-icon="arrow-l">Home</a>
 <!-- Title -->
 <h1>Toolbar</h1>
 <!-- Left Button -->
 <a href="#secondpage" data-icon="arrow-r">Second</a>
</div>
<!-- End of Header bar -->

<div data-role="content">
 <p>Hello jQuery Mobile Toolbar</p>
 <p>it's a basic mobile web page utilize jQuery Mobile implementing Toolbar.</p>
 <a href="#secondpage">Jump to Second Page</a>
</div>

<!-- Example of Footer bar -->
<div data-role="footer">
 <a href="#home" data-icon="arrow-l" datarole="button">Left</a>
 <a href="http://mobile-web-app.blogspot.com/" data-icon="arrow-u" data-role="button">Up</a>
 <a href="#secondpage" data-icon="arrow-r" datarole="button">Right</a>
 <h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>
<!-- End of Footer bar -->

</div>

<div data-role="page" id="secondpage">
<!-- Example of Header bar -->
<div data-role="header">
 <!-- Left Button -->
 <a href="#home" data-icon="arrow-l">Home</a>
 <!-- Title -->
 <h1>Toolbar</h1>
 <!-- Left Button -->
 <a href="#secondpage" data-icon="arrow-r">Second</a>
</div>
<!-- End of Header bar -->

<div data-role="content">
 <p>It's the SECOND PAGE</p>
 <a href="#home">Back to Home Page</a>
</div>

<!-- Example of Footer bar -->
<div data-role="footer">
 <a href="#home" data-icon="arrow-l" datarole="button">Left</a>
 <a href="http://mobile-web-app.blogspot.com/" data-icon="arrow-u" data-role="button">Up</a>
 <a href="#secondpage" data-icon="arrow-r" datarole="button">Right</a>
 <h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>
<!-- End of Footer bar -->

</div>

</body>
</html>

Sunday, December 18, 2011

Header Toolbar of jQuery Mobile

In jQuery Mobile, there are two standard types of toolbars: Headers and Footers.

The Header bar serves as the page title, and typically contains a page title and up to two buttons.
The Footer bar is usually the last element inside each mobile page, and tends to be more freeform than the header in terms of content and functionality, but typically contains a combination of text and buttons.

Example of jQuery Mobile Header bar:

<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Web Page: Toolbar</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>
<body>

<div data-role="page" id="home">
<div data-role="header">
 <!-- Example of Toolbar -->
 <!-- Left Button -->
 <a href="#home" data-icon="arrow-l">Home</a>
 <!-- Title -->
 <h1>Toolbar</h1>
 <!-- Left Button -->
 <a href="#secondpage" data-icon="arrow-r">Second</a>
 <!-- End of Toolbar -->
</div>
<div data-role="content">
 <p>Hello jQuery Mobile Toolbar</p>
 <p>it's a basic mobile web page utilize jQuery Mobile implementing Toolbar.</p>
 <a href="#secondpage">Jump to Second Page</a>
</div>
<div data-role="footer">
 <h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>
</div>

<div data-role="page" id="secondpage">
<div data-role="header">
 <!-- Example of Toolbar -->
 <!-- Left Button -->
 <a href="#home" data-icon="arrow-l">Home</a>
 <!-- Title -->
 <h1>Toolbar</h1>
 <!-- Left Button -->
 <a href="#secondpage" data-icon="arrow-r">Second</a>
 <!-- End of Toolbar -->
</div>
<div data-role="content">
 <p>It's the SECOND PAGE</p>
 <a href="#home">Back to Home Page</a>
</div>
<div data-role="footer">
 <h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>
</div>

</body>
</html>

Related:
- Footer Toolbar of jQuery Mobile

Friday, December 16, 2011

Handle Slider change event

Handle Slider change event

The article "jQuery Mobile: Read value of Slider" demonstrate how to read slider value when user click on a button. It's modified to automatically detect slider change event here.

In order to detect slider change, we have to add a additional element("my-slider" in my example)surround the slider - I don't know why I can't use "slider" directly!

Then implement:
$("#my-slider").change(function() {
//...do what you want here...
});

example:

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, height = device-height" />
<title>jQuery Mobile: Slider</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>
<body>

<div data-role="page" id="home">
<div data-role="header">
 <h1>Slider</h1>
</div>
<div data-role="content">
 <p>jQuery Mobile: Slider</p>
 <div data-role="fieldcontain">
  <label for="slider">Slider:</label>
  <div id="my-slider">
   <input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
  </div>
  <input type="button" value="Read Slider" onclick="button_clicked()" />
  <p id="slider_value">0</p>
 </div>
</div>
<div data-role="footer">
 <h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>
</div>

<script>
function button_clicked(){
var SliderValue = $("#slider").val();
alert("Slider value = " + SliderValue);
}

$("#my-slider").change(function() {
var SliderValue = $("#slider").val();
$("#slider_value").text("Slider changed: " + SliderValue);
});
</script>

</body>
</html>

Thursday, December 15, 2011

Collapsible Set

Collapsible set start with the exact same markup as individual Collapsible Block. By adding a parent wrapper with a data-role="collapsible-set" attribute around a number of collapsibles, the framework will style these to looks like a visually grouped widget and make it behave like an accordion so only one section can be open at a time.

example:

<!DOCTYPE html>
<html>
<head>
<title>Basic jQuery Mobile Web Page</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>
<body>

<div data-role="page" id="home">
<div data-role="header">
 <h1>mobile-web-app</h1>
</div>
<div data-role="collapsible-set">
 <div data-role="content">
  <p>Collapsible Set</p>
  <p>Collapsible sets start with the exact same markup as individual Collapsible Block.
  By adding a parent wrapper with a data-role="collapsible-set" attribute around a number of collapsibles, the framework will style these to looks like a visually grouped widget and make it behave like an accordion so only one section can be open at a time.</p>
  <div data-role="collapsible">
   <H1>Collapsible block 1</H1>
   <div data-role="collapsible">
    <H1>Nested Collapsible block 1</H1>
    <p>Content of Nested Collapsible block 1.</p>
   </div>
   <div data-role="collapsible">
    <H1>Nested Collapsible block 2</H1>
    <p>Content of Nested Collapsible block 2.</p>
   </div>
  </div>
  <div data-role="collapsible">
   <H1>Collapsible block 2</H1>
   <p>Content of Collapsible Block 2</p>
  </div>
 </div>
</div>
<div data-role="footer">
 <h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>
</div>

</body>
</html>

Wednesday, December 14, 2011

Firefox Add-ons: Web Developer's Toolbox

The collection of Web Developer's Toolbox (by Mozilla) speed up the development process by using add-ons to troubleshoot, edit, and debug web projects without ever clicking away from Firefox.

Link: Web Developer's Toolbox

Nested Collapsible Block

example of nested collapsible block:

<!DOCTYPE html>
<html>
<head>
<title>Basic jQuery Mobile Web Page</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>
<body>

<div data-role="page" id="home">
<div data-role="header">
 <h1>mobile-web-app</h1>
</div>
<div data-role="content">
 <p>Collapsible Block</p>
 <div data-role="collapsible">
  <H1>Collapsible block 1</H1>
  <div data-role="collapsible">
   <H1>Nested Collapsible block 1</H1>
   <p>Content of Nested Collapsible block 1.</p>
  </div>
  <div data-role="collapsible">
   <H1>Nested Collapsible block 2</H1>
   <p>Content of Nested Collapsible block 2.</p>
  </div>
 </div>
 <div data-role="collapsible">
  <H1>Collapsible block 2</H1>
  <p>Content of Collapsible Block 2</p>
 </div>
</div>
<div data-role="footer">
 <h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>
</div>

</body>
</html>

Tuesday, December 13, 2011

Google Chrome Developer Tools

Google Chrome Developer Tools, bundled and available in Chrome, allows web developers and programmers deep access into the internals of the browser and their web application. The Developer Tools are heavily based on the WebKit Web Inspector, a part of the open source WebKit project. This overview of the Developer Tools points out its most popular and useful features. The target audience are web developers who don't know of, or have not yet investigated, the Developer Tools. However, we are sure that even if you are an experienced web developer, you will pick up a tip or two.

know more: Chrome Developer Tools: Overview

App Engine 1.6.1 Released

App Engine 1.6.1 Released. Google App Engine enables developers to build web applications on the same scalable systems that Google power their own applications.

Read the full release notes for Java and Python to get all the details on 1.6.1.

Monday, December 12, 2011

Create collapsible block in jQuery Mobile

To create a collapsible block of content, create a container and add the data-role="collapsible" attribute.

example:

<!DOCTYPE html>
<html>
<head>
<title>Basic jQuery Mobile Web Page</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>
<body>

<div data-role="page" id="home">
<div data-role="header">
<h1>mobile-web-app</h1>
</div>
<div data-role="content">
<p>Collapsible Block</p>
<div data-role="collapsible">
 <H1>To create a collapsible block </H1>
 <p>create a container and add the data-role="collapsible" attribute.</p>
</div>
<div data-role="collapsible">
 <H2>Only the first h-element will be processed as header!</H2>
 <H2>So, it's normal heading text!</H2>
 <p>Content of Collapsible Block 2</p>
</div>
<div data-role="collapsible">
 <p>You can place h-element in any where within Collapsible Block</p>
 <H3>You can place h-element in any where within Collapsible Block</H3>
</div>
<div data-role="collapsible" data-collapsed="false">
 <H3>Defult expanded Collapsible Block</H3>
 <p>add the data-collapsed="false" attribute</p>
</div>
</div>
<div data-role="footer">
<h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>
</div>

</body>
</html>

Related article:
- Nested Collapsible Block
- Collapsible Set

Saturday, December 10, 2011

Apply grid layout on jQuery Mobile

To apply grid layout on jQuery Mobile, we can use ui-grid.

There are four preset configurations layouts that can be used in any situation that requires columns:

ui-grid-a : 2 column
ui-grid-b : 3 column
ui-grid-c : 4 column
ui-grid-d : 5 column

Within the grid container, child elements are assigned ui-block-a/b/c/d in a sequential manner which makes each "block" element float side-by-side, forming the grid.

Here is a example with 3 column grid:

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, height = device-height" />
<title>jQuery Mobile:  Button Icon</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>
<body>

<div data-role="page" id="home">
<div data-role="header">
 <h1>Grid Layout</h1>
</div>
<div data-role="content">
<div class="ui-grid-b">
 <div class="ui-block-a">
  <a data-role="button" data-icon="arrow-l" >arrow-l</a>
  <a data-role="button" data-icon="arrow-r" >arrow-r</a>
  <a data-role="button" data-icon="arrow-u" >arrow-u</a>
  <a data-role="button" data-icon="arrow-d" >arrow-d</a>
  <a data-role="button" data-icon="delete" >delete</a>
  <a data-role="button" data-icon="plus" >plus</a>
 </div>
 <div class="ui-block-b">
  <a data-role="button" data-icon="minus" >minus</a>
  <a data-role="button" data-icon="check" >check</a>
  <a data-role="button" data-icon="gear" >gear</a>
  <a data-role="button" data-icon="refresh" >refresh</a>
  <a data-role="button" data-icon="forward" >forward</a>
  <a data-role="button" data-icon="back" >back</a>
 </div>
 <div class="ui-block-c">
  <a data-role="button" data-icon="grid" >grid</a>
  <a data-role="button" data-icon="star" >star</a>
  <a data-role="button" data-icon="alert" >alert</a>
  <a data-role="button" data-icon="info" >info</a>
  <a data-role="button" data-icon="home" >home</a>
  <a data-role="button" data-icon="search" >search</a>
 </div>
</div>
</div>
<div data-role="footer">
 <h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>

</div>

</body>
</html>

Monday, December 5, 2011

CSS example: text-shadow

<!DOCTYPE html>
<html>
<head>
<title>Basic jQuery Mobile Web Page</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>

</head>
<body>

<div data-role="page" id="home">
<div data-role="header">
 <h1>text-shadow </h1>
</div>
<div data-role="content">
 <p>CSS example: text-shadow</p>
 <p style="text-shadow: red 1px 1px 1px">text-shadow: red 1px 1px 1px</p>
 <p style="text-shadow: #00ff002px 2px 1px">text-shadow: #00ff00 2px 2px 1px</p>
 <p style="text-shadow: #0000ff 3px 3px 5px">text-shadow: #0000ff 3px 3px 5px</p>
 <p style="text-shadow: 3px 3px 10px #0000ff">text-shadow: 3px 3px 10px #0000ff</p>
 <p style="text-shadow: 3px 3px 30px #0000ff">text-shadow: 3px 3px 30px #0000ff</p>
</div>
<div data-role="footer">
 <h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>
</div>

</body>
</html>

Friday, December 2, 2011

jQuery Mobile: icon position

In jQuery Mobile, the default position of icon are placed to the left of the button text. It can be overridden using the data-iconpos attribute to set ="right", "top" or "bottom".

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, height = device-height" />
<title>jQuery Mobile: Button Icon</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>
<body>

<div data-role="page" id="home">
<div data-role="header">
<h1>Button Icon</h1>
</div>
<div data-role="content">
<div>
<div>
<a data-role="button" data-icon="arrow-l" >default </a>
<a data-role="button" data-icon="arrow-r" data-iconpos="right">data-iconpos="right"</a>
<a data-role="button" data-icon="arrow-u" data-iconpos="top">data-iconpos="top"</a>
<a data-role="button" data-icon="arrow-d" data-iconpos="bottom">data-iconpos="bottom"</a>
</div>
</div>
</div>
<div data-role="footer">
<h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>
</div>

</body>
</html>

jQuery Mobile Icons

jQuery Mobile framework provide a selected set of icons most often needed for mobile apps. It can be added using data-icon="arrow-l".

Here is a example to add icon on Button.

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, height = device-height" />
<title>jQuery Mobile:  Button Icon</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>
<body>

<div data-role="page" id="home">
<div data-role="header">
 <h1>Button Icon</h1>
</div>
<div data-role="content">
  <div class="ui-bar" >
   <div>
    <a data-role="button" data-icon="arrow-l" >arrow-l</a>
    <a data-role="button" data-icon="arrow-r" >arrow-r</a>
    <a data-role="button" data-icon="arrow-u" >arrow-u</a>
    <a data-role="button" data-icon="arrow-d" >arrow-d</a>
    <a data-role="button" data-icon="delete" >delete</a>
    <a data-role="button" data-icon="plus" >plus</a>
    <a data-role="button" data-icon="minus" >minus</a>
    <a data-role="button" data-icon="check" >check</a>
    <a data-role="button" data-icon="gear" >gear</a>
    <a data-role="button" data-icon="refresh" >refresh</a>
    <a data-role="button" data-icon="forward" >forward</a>
    <a data-role="button" data-icon="back" >back</a>
    <a data-role="button" data-icon="grid" >grid</a>
    <a data-role="button" data-icon="star" >star</a>
    <a data-role="button" data-icon="alert" >alert</a>
    <a data-role="button" data-icon="info" >info</a>
    <a data-role="button" data-icon="home" >home</a>
    <a data-role="button" data-icon="search" >search</a>
   </div>
  </div>
</div>
<div data-role="footer">
 <h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>
</div>

</body>
</html>

Thursday, December 1, 2011

jQuery Mobile: data-theme

In jQuery Mobile, theme can be applied using data-theme property, it can be set ="a" to "z".

example:

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, height = device-height" />
<title>jQuery Mobile: Slider</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>
<body>

<div data-role="page" id="home" data-theme="b">
<div data-role="header">
 <h1>Slider</h1>
</div>
<div data-role="content">
 <p>jQuery Mobile: data-theme="b" with mixed on Buttons</p>
 <div data-role="fieldcontain" >
  <label for="slider">Slider:</label>
  <input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
  <input type="button" value="Read Slider" onclick="button_clicked()" />
  <input type="button" value="Set Slider to 0." onclick="minbutton_clicked()" data-theme="a" />
  <input type="button" value="Set Slider to half." onclick="halfbutton_clicked()" data-theme="d" />
  <input type="button" value="Set Slider to 100." onclick="maxbutton_clicked()" data-theme="e" />

 
 </div>
</div>
<div data-role="footer">
 <h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>
</div>

<div data-role="page" id="dialog">
<div data-role="header">
 <h1>mobile-web-app</h1>
</div>
<div data-role="content">
 <p>It's a Dialog</p>
</div>
<div data-role="footer">
 <h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>
</div>

<script>
function button_clicked(){
var SliderValue = $("#slider").val();
alert("Slider value = " + SliderValue);
}

function minbutton_clicked(){
var min = $("#slider").attr("min");
$("#slider").val(min).slider("refresh");
}

function halfbutton_clicked(){
var min = $("#slider").attr("min");
var max = $("#slider").attr("max");
var half = (min + max)/2;
$("#slider").val(half).slider("refresh");
}

function maxbutton_clicked(){
var max = $("#slider").attr("max");
$("#slider").val(max).slider("refresh");
}
</script>

</body>
</html>

Sunday, November 27, 2011

jQuery Mobile: get max and min of Slider using attr()

jQuery Mobile: get max and min of Slider using attr()

To get max and min setting of Slider, we can use:
$("#slider").attr("min");
$("#slider").attr("max");

example:

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, height = device-height" />
<title>jQuery Mobile: Slider</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>
<body>

<div data-role="page" id="home">
<div data-role="header">
<h1>Slider</h1>
</div>
<div data-role="content">
<p>jQuery Mobile: Slider</p>
<div data-role="fieldcontain">
 <label for="slider">Slider:</label>
 <input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
 <input type="button" value="Read Slider" onclick="button_clicked()" />
 <input type="button" value="Set Slider to 0." onclick="minbutton_clicked()" />
 <input type="button" value="Set Slider to half." onclick="halfbutton_clicked()" />
 <input type="button" value="Set Slider to 100." onclick="maxbutton_clicked()" />


</div>
</div>
<div data-role="footer">
<h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>
</div>

<div data-role="page" id="dialog">
<div data-role="header">
<h1>mobile-web-app</h1>
</div>
<div data-role="content">
<p>It's a Dialog</p>
</div>
<div data-role="footer">
<h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>
</div>

<script>
function button_clicked(){
var SliderValue = $("#slider").val();
alert("Slider value = " + SliderValue);
}

function minbutton_clicked(){
var min = $("#slider").attr("min");
$("#slider").val(min).slider("refresh");
}

function halfbutton_clicked(){
var min = $("#slider").attr("min");
var max = $("#slider").attr("max");
var half = (min + max)/2;
$("#slider").val(half).slider("refresh");
}

function maxbutton_clicked(){
var max = $("#slider").attr("max");
$("#slider").val(max).slider("refresh");
}
</script>

</body>
</html>

jQuery Mobile: Set value of Slider using JavaScript code dynamically

jQuery Mobile: Set value of Slider using JavaScript code dynamically

To set value of Slider using JavaScript code by calling $("#slider").val(0).slider("refresh"). Remember to include ".slider("refresh")", otherwise the slide may not be updated to the new value.

example:

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, height = device-height" />
<title>jQuery Mobile: Slider</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>
<body>

<div data-role="page" id="home">
<div data-role="header">
 <h1>Slider</h1>
</div>
<div data-role="content">
 <p>Hello ALL</p>
 <p>jQuery Mobile: Slider</p>
 <div data-role="fieldcontain">
  <label for="slider">Slider:</label>
  <input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
  <input type="button" value="Read Slider" onclick="button_clicked()" />
  <input type="button" value="Set Slider to 0." onclick="minbutton_clicked()" />
  <input type="button" value="Set Slider to 100." onclick="maxbutton_clicked()" />
 </div>
</div>
<div data-role="footer">
 <h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>
</div>

<div data-role="page" id="dialog">
<div data-role="header">
 <h1>mobile-web-app</h1>
</div>
<div data-role="content">
 <p>It's a Dialog</p>
</div>
<div data-role="footer">
 <h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>
</div>

<script>
function button_clicked(){
var SliderValue = $("#slider").val();
alert("Slider value = " + SliderValue);
}

function minbutton_clicked(){
$("#slider").val(0).slider("refresh");
}

function maxbutton_clicked(){
$("#slider").val(100).slider("refresh");
}
</script>

</body>
</html>

next:
- jQuery Mobile: get max and min of Slider using attr()

jQuery Mobile: Read value of Slider

To get value of Slider in jQuery Mobile, we can read $("#slider").val().

example:

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, height = device-height" />
<title>jQuery Mobile: Slider</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>
<body>

<div data-role="page" id="home">
<div data-role="header">
 <h1>Slider</h1>
</div>
<div data-role="content">
 <p>Hello ALL</p>
 <p>jQuery Mobile: Slider</p>
 <div data-role="fieldcontain">
  <label for="slider">Slider:</label>
  <input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
  <input type="button" value="Read Slider" onclick="button_clicked()" />
 </div>
</div>
<div data-role="footer">
 <h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>
</div>

<div data-role="page" id="dialog">
<div data-role="header">
 <h1>mobile-web-app</h1>
</div>
<div data-role="content">
 <p>It's a Dialog</p>
</div>
<div data-role="footer">
 <h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>
</div>

<script>
function button_clicked(){
var SliderValue = $("#slider").val();
alert("Slider value = " + SliderValue);
}
</script>

</body>
</html>

next:
- jQuery Mobile: Set value of Slider using JavaScript code dynamically

Saturday, November 26, 2011

jQuery Mobile: Slider

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, height = device-height" />
<title>jQuery Mobile: Slider</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>
<body>

<div data-role="page" id="home">
<div data-role="header">
 <h1>Slider</h1>
</div>
<div data-role="content">
 <p>Hello ALL</p>
 <p>jQuery Mobile: Slider</p>
 <div data-role="fieldcontain">
  <label for="slider">Slider:</label>
  <input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
 </div>
</div>
<div data-role="footer">
 <h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>
</div>

<div data-role="page" id="dialog">
<div data-role="header">
 <h1>mobile-web-app</h1>
</div>
<div data-role="content">
 <p>It's a Dialog</p>
</div>
<div data-role="footer">
 <h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>
</div>

</body>
</html>

next:
- jQuery Mobile: Read value of Slider

Related:
- Implement Slider using jQuery
- Implement Slider using jQuery UI

Sunday, November 13, 2011

Flip Toggle Switches

Example of Flip Toggle Switches:

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, height = device-height" />
<title>jQuery Mobile: Flip toggle switches</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>
<body>

<div data-role="page" id="home">
<div data-role="header">
 <h1>Flip toggle switches</h1>
</div>
<div data-role="content">
 <p>Hello ALL</p>
 <p>jQuery Mobile: Flip toggle switches</p>
 <div data-role="fieldcontain">
  <label for="myoption">Flip toggle switches:</label>
  <select name="myoption" id="myoption" data-role="slider">
   <option value="off">Off</option>
   <option value="on">On</option>
  </select>
 </div>
</div>
<div data-role="footer">
 <h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>
</div>

<div data-role="page" id="dialog">
<div data-role="header">
 <h1>mobile-web-app</h1>
</div>
<div data-role="content">
 <p>It's a Dialog</p>
</div>
<div data-role="footer">
 <h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>
</div>
<script>
function button_clicked(){
alert("Button Clicked!");
}
</script>
</body>
</html>

Tuesday, November 8, 2011

viewport for Mobile device

If you try the examples in former post, you will get difference appearance on difference browser, even on the same device. We haven't take care about the viewport for mobile device. You can override the default viewport by including a viewport meta tag in the <head> section of your page.

example:

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, height = device-height" />
<title>jQuery Mobile: Dialog</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>
<body>

<div data-role="page" id="home">
<div data-role="header">
 <h1>Open Dialog</h1>
</div>
<div data-role="content">
 <p>Hello ALL</p>
 <p>jQuery Mobile: Dialog</p>
 <a href="#dialog" data-rel="dialog" data-transition="pop">Open Dialog</a>
</div>
<div data-role="footer">
 <h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>
</div>

<div data-role="page" id="dialog">
<div data-role="header">
 <h1>mobile-web-app</h1>
</div>
<div data-role="content">
 <p>It's a Dialog</p>
 <input type="button" value="Close Dialog" onclick="button_clicked()" />
</div>
<div data-role="footer">
 <h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>
</div>
<script>
function button_clicked(){
$('.ui-dialog').dialog ('close');
}
</script>
</body>
</html>

Friday, November 4, 2011

jQuery Mobile: Manually close dialog using JavaScript code

To close dialog using JavaScript, by following code:
$('.ui-dialog').dialog ('close');

<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile: Dialog</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>
<body>

<div data-role="page" id="home">
 <div data-role="header">
  <h1>Open Dialog</h1>
 </div>
 <div data-role="content">
  <p>Hello ALL</p>
  <p>jQuery Mobile: Dialog</p>
  <a href="#dialog" data-rel="dialog" data-transition="pop">Open Dialog</a>
 </div>
 <div data-role="footer">
  <h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
 </div>
</div>

<div data-role="page" id="dialog">
 <div data-role="header">
  <h1>mobile-web-app</h1>
 </div>
 <div data-role="content">
  <p>It's a Dialog</p>
  <input type="button" value="Close Dialog" onclick="button_clicked()" />
 </div>
 <div data-role="footer">
  <h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
 </div>
</div>
<script>
function button_clicked(){
 $('.ui-dialog').dialog ('close');
}
</script>
</body>
</html>

Thursday, November 3, 2011

jQuery Mobile: Simple Button and onclick event

Example code:

<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile: Button</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>
<body>

<div data-role="page" id="home">
 <div data-role="header">
  <h1>Button</h1>
 </div>
 <div data-role="content">
  <p>Hello ALL</p>
  <p>jQuery Mobile: Button</p>
  <input type="button" value="Simple Button" onclick="button_clicked()" />
 </div>
 <div data-role="footer">
  <h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
 </div>
</div>

<div data-role="page" id="dialog">
 <div data-role="header">
  <h1>mobile-web-app</h1>
 </div>
 <div data-role="content">
  <p>It's a Dialog</p>
 </div>
 <div data-role="footer">
  <h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
 </div>
</div>
<script>
function button_clicked(){
 alert("Button Clicked!");
}
</script>
</body>
</html>

Monday, October 31, 2011

Detect Swipe event in jQuery Mobile

<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile: Swipe</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>
<body>

<div data-role="page" id="home">
 <div data-role="header">
  <h1>Swipe</h1>
 </div>
 <div data-role="content">
  <p>Hello ALL</p>
  <p>jQuery Mobile: Swipe</p>
  <p>Swipe on the screen, Thx!</p>
 </div>
 <div data-role="footer">
  <h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
 </div>
</div>
<script>
$('body').bind('swipe', function () {
 alert ('You SWIPE on screen!');
 return false;
});
</script>
</body>
</html>

Detect Tap event in jQuery Mobile

<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile: Tap</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>
<body>

<div data-role="page" id="home">
 <div data-role="header">
  <h1>Tap</h1>
 </div>
 <div data-role="content">
  <p>Hello ALL</p>
  <p>jQuery Mobile: Tap</p>
  <p>Tap on the screen, Thx!</p>
 </div>
 <div data-role="footer">
  <h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
 </div>
</div>
<script>
$('body').bind('tap', function () {
 alert ('You TAP on screen!');
 return false;
});
</script>
</body>
</html>

Saturday, October 29, 2011

Open as Dialog in jQuery Mobile

To open a page as dialog in jQuery Mobile, simple specify the data-rel="dialog" attribute in the
link. Normally, data-transition="pop" will be used.

<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile: Dialog</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>
<body>

<div data-role="page" id="home">
 <div data-role="header">
  <h1>Open Dialog</h1>
 </div>
 <div data-role="content">
  <p>Hello ALL</p>
  <p>jQuery Mobile: Dialog</p>
  <a href="#dialog" data-rel="dialog" data-transition="pop">Open Dialog</a>
 </div>
 <div data-role="footer">
  <h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
 </div>
</div>

<div data-role="page" id="dialog">
 <div data-role="header">
  <h1>mobile-web-app</h1>
 </div>
 <div data-role="content">
  <p>It's a Dialog</p>
 </div>
 <div data-role="footer">
  <h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
 </div>
</div>

</body>
</html>

jQuery Mobile First Look

The jQuery Mobile First Look is a perfect reference to keep on your desk for finding out the capabilities of the jQuery Mobile framework and how you can put it to good use. This book will show you how to enjoy your programming by letting a simple yet effective JavaScript library handle the hassles you would encounter otherwise. It will quickly take you through the entire framework and cover every level of specification you need to know to kick-start your mobile web development. This is a First Look book that allows existing jQuery users to get a look at the features of jQuery mobile. It is targeted at jQuery users who want to enter the exciting world of mobile web development. All you need is the basics of jQuery and an interest to get involved with mobile development and you can use this book as a launch-pad for your future ventures in mobile web development with jQuery Mobile framework.

Apply Page Transition effects in jQuery Mobile

The following page transition effects are provided in jQuery Mobile:

slide (default)
slideup
slidedown
pop
fade
flip

To apply the page transition effects, data-transition="slideup".

Test on Android device: I test it on Firefox and Opera Mobile, both have no effect. You can test it using Android default build-in browser. You can check the various effect by clicking the named links. Also you can try BACK button to check how reversed transition applied.

Apply Page Transition effects in jQuery Mobile

<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile: Page Transition</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>
<body>

<div data-role="page" id="home">
<div data-role="header">
 <h1>Page Transition</h1>
</div>
<div data-role="content">
 <p>Hello ALL</p>
 <p>jQuery Mobile: demo of Page Transition</p><br/><br/>
 <a href="#page_slide" data-transition="slide">slide</a><br/>
 <a href="#page_slideup" data-transition="slideup">slideup</a><br/>
 <a href="#page_slidedown" data-transition="slidedown">slidedown</a><br/>
 <a href="#page_pop" data-transition="pop">pop</a><br/>
 <a href="#page_fade" data-transition="fade">fade</a><br/>
 <a href="#page_flip" data-transition="flip">flip</a><br/>
</div>
<div data-role="footer">
 <h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>
</div>

<div data-role="page" id="page_slide">
<div data-role="header">
 <h1>mobile-web-app</h1>
</div>
<div data-role="content">
 <p>This page is slide in</p>
 <a href="#home">Back to Home Page</a>
</div>
<div data-role="footer">
 <h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>
</div>

<div data-role="page" id="page_slideup">
<div data-role="header">
 <h1>mobile-web-app</h1>
</div>
<div data-role="content">
 <p>This page is slideup in</p>
 <a href="#home">Back to Home Page</a>
</div>
<div data-role="footer">
 <h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>
</div>

<div data-role="page" id="page_slidedown">
<div data-role="header">
 <h1>mobile-web-app</h1>
</div>
<div data-role="content">
 <p>This page is slidedown in</p>
 <a href="#home">Back to Home Page</a>
</div>
<div data-role="footer">
 <h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>
</div>

<div data-role="page" id="page_pop">
<div data-role="header">
 <h1>mobile-web-app</h1>
</div>
<div data-role="content">
 <p>This page is pop in</p>
 <a href="#home">Back to Home Page</a>
</div>
<div data-role="footer">
 <h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>
</div>

<div data-role="page" id="page_fade">
<div data-role="header">
 <h1>mobile-web-app</h1>
</div>
<div data-role="content">
 <p>This page is fade in</p>
 <a href="#home">Back to Home Page</a>
</div>
<div data-role="footer">
 <h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>
</div>

<div data-role="page" id="page_flip">
<div data-role="header">
 <h1>mobile-web-app</h1>
</div>
<div data-role="content">
 <p>This page is flip in</p>
 <a href="#home">Back to Home Page</a>
</div>
<div data-role="footer">
 <h4><a href="http://mobile-web-app.blogspot.com/">http://mobile-web-app.blogspot.com/</a></h4>
</div>
</div>

</body>
</html>