Beautiful jQuery Mobile Themes Part 5 – Android

Written by on April 7, 2015

Beautiful jQuery Mobile Themes Part 5 – Android

This is an attempt to create a custom jQuery Mobile theme, that matches the Holo Light theme which make Android 4.0. The styles are based on Android Design’s Style Guide. Theme uses custom Roboto font so be careful when deploying it.

This theme is built for jQuery Mobile 1.1 (up to 1.3.2) and it will not work on higher versions. Swatches are not included, every theme acts as a single swatch.

Link

Website
GitHub

Working example

Working Plunker example can be found here:

Plunker Demo

Embedded example:

Other reviewed themes

Click here if you need to go to the original review article.

Code

Code example in case plnkr.co is offline.

HTML


<!DOCTYPE html> 
<html> 
<head> 
<title>Android Holo Light Theme for JQuery Mobile</title> 

<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<link rel="stylesheet" href="https://dl.dropboxusercontent.com/u/3875067/holo-light/themes/android-holo-light.min.css" />
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" />
		<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head> 
<body> 
	<div class="preview ui-shadow swatch">
	<div class="ui-header ui-bar-a" data-swatch="a" data-theme="a" data-form="ui-bar-a" data-role="header" role="banner">
		<a class="ui-btn-left ui-btn ui-btn-icon-notext ui-btn-corner-all ui-shadow ui-btn-up-a" data-iconpos="notext" data-theme="a" data-role="button" data-icon="home" title=" Home ">
			<span class="ui-btn-inner ui-btn-corner-all">
				<span class="ui-btn-text"> Home </span>
				<span data-form="ui-icon" class="ui-icon ui-icon-home ui-icon-shadow"></span>
			</span>
		</a>
		<h1 class="ui-title" tabindex="0" role="heading" aria-level="1">Holo Light Demo</h1>
		<a class="ui-btn-right ui-btn ui-btn-icon-notext ui-btn-corner-all ui-shadow ui-btn-up-a" data-iconpos="notext" data-theme="a" data-role="button" data-icon="grid" title=" Navigation ">
			<span class="ui-btn-inner ui-btn-corner-all">
				<span class="ui-btn-text"> Navigation </span>
				<span data-form="ui-icon" class="ui-icon ui-icon-grid ui-icon-shadow"></span>
			</span>
		</a>
	</div>
	
	<div class="ui-content ui-body-a" data-theme="a" data-form="ui-body-a" data-role="content" role="main">
	
		<p>
			Follow me on <a class="ui-link" data-form="ui-body-a" href="http://twitter.com/enathu" data-theme="a">Twitter</a>.
		</p>
		
		<div data-role="fieldcontain">
		    <fieldset data-role="controlgroup">
			<li data-swatch="a" class="ui-li ui-li-divider ui-btn ui-bar-a ui-corner-top" data-role="list-divider" role="" data-form="ui-bar-a">List Header</li>
		
				<input type="radio" name="radio-choice-a" id="radio-choice-1-a" value="choice-1" checked="checked" />
		        <label for="radio-choice-1-a" data-form="ui-btn-up-a" class="ui-corner-none">Radio 1</label>

         		<input type="radio" name="radio-choice-a" id="radio-choice-2-a" value="choice-2" />
	         	<label for="radio-choice-2-a" data-form="ui-btn-up-a">Radio 2</label>

				<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" checked="checked" />
				<label for="checkbox-1" data-form="ui-btn-up-a">Checkbox</label>
					
		    </fieldset>
		</div>

		<div data-role="fieldcontain"> 
			<fieldset data-role="controlgroup" data-type="horizontal">
				<input type="radio" name="radio-view-a" id="radio-view-a-a" value="list" checked="checked"/> 
				<label for="radio-view-a-a" data-form="ui-btn-up-a">On</label> 
				<input type="radio" name="radio-view-a" id="radio-view-b-a" value="grid"  /> 
				<label for="radio-view-b-a" data-form="ui-btn-up-a">Off</label> 
			</fieldset> 
		</div>
		
		<div data-role="fieldcontain">
			<select name="select-choice-1" id="select-choice-1" data-native-menu="false" data-theme="a" data-form="ui-btn-up-a">
				<option value="standard">Option 1</option>
				<option value="rush">Option 2</option>
				<option value="express">Option 3</option>
				<option value="overnight">Option 4</option>
			</select>
		</div>
		
		<input type="text" value="Text Input" class="input" data-form="ui-body-a" />
		
		<div data-role="fieldcontain">
			<input type="range" name="slider" value="50" min="0" max="100" data-form="ui-body-a" data-theme="a" data-highlight="true" />
		</div>
		
		<button data-icon="plus" data-theme="a" data-form="ui-btn-up-a">This is cool!</button>
	</div>
</div>
</body>
</html>

Categories

Leave a Reply