Mobile-Web-App

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.