Saturday, October 29, 2011

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.