Monday, October 31, 2011

Detect Swipe event in jQuery Mobile

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

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>


Open as Dialog in jQuery Mobile

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>

Multi-page jQuery Mobile web page

In jQuery Mobile, each HTML file can have more than one page. Each page defined inside div with data-role="page", and identified by id attribute.

Example: A html of jQuery Mobile with two page.

Multi-page jQuery Mobile web page

<!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>My first web Home page</h1>
</div>
<div data-role="content">
<p>Hello ALL</p>
<p>it's a basic mobile web page utilize jQuery Mobile</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">
<h1>My first web Home page</h1>
</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>

Friday, October 28, 2011

Basic jQuery Mobile Web Page

It's a sample code of a basic mobile web page utilize jQuery Mobile.

<!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>My first web Home page</h1>
</div>
<div data-role="content">
<p>Hello ALL</p>
<p>it's a basic mobile web page utilize jQuery Mobile</p>
</div>
<div data-role="footer">
<h4>http://mobile-web-app.blogspot.com/</h4>
</div>
</div>

</body>
</html>



The HTML loaded on Firefox running at Android device:
Basic jQuery Mobile Web Page

Related:
- Multi-page jQuery Mobile web page



jQuery CDN

For all web page utilize jQuery Mobile have to links to jQuery, jQuery Mobile and also jQuery Mobile stylesheet.

http://code.jquery.com/ is CDN-hosted versions of the libraries and css. You can link to it from your web page directly, without download to your host.

However, if your web app have to work offline, you can download it to your local host. And also, the latest version of CDN-hosted versions will be changed constantly, you can specify the fixed version for your libraries, or download it.

Refer to the post Basic jQuery Mobile Web Page for example to link to jQuery CDN.

jQuery CDN

jQuery Mobile: Touch-Optimized Web Framework for Smartphones & Tablets


jQuery Mobile is a unified, HTML5-based user interface system for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.

jQuery Mobile 1.0 RC2 RELEASED!

Website: http://jquerymobile.com/

About PhoneGap

  • Build your app once with web-standards
    Based on HTML5, PhoneGap leverages web technologies developers already know best... HTML and JavaScript.
  • Wrap it with PhoneGap
    Using the free open source framework or PhoneGap build you can get access to native APIs.
  • Deploy to multiple platforms!
    PhoneGap uses standards-based web technologies to bridge web applications and mobile devices.


PhoneGap - An Open Source Mobile Framework



Website: phonegap.com



Mobile Web Development

Explosive growth in the mobile web is set to continue. Don't leave yourself behind. Writing a new app in every native environment is not always possible, and HTML5 is a way to reuse the bulk of your code across all major platforms. We will show you step-by-step how to build an amazing web app that works on many devices.

Google I/O 2011: Mobile Web Development: From Zero to Hero

Mobile Web and web application

Mobile Web refers to the use of Internet-connected applications, or browser-based access to the Internet from a mobile device, such as a smartphone or tablet computer, connected to a wireless network...more details from Wikipedia.

A Web Application is an application that is accessed over a network such as the Internet or an intranet. The term may also mean a computer software application that is hosted in a browser-controlled environment (e.g. a Java applet)[citation needed] or coded in a browser-supported language (such as JavaScript, combined with a browser-rendered markup language like HTML) and reliant on a common web browser to render the application executable...more details from Wikipedia.

Mobile-Web-App



Mobile-Web-App