Mobile-Web-App

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>