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.
Tuesday, December 13, 2011
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:
Related article:
- Nested Collapsible Block
- Collapsible Set
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:
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:
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>
<!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.
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:
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>
Subscribe to:
Posts (Atom)