<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Theme Preview</title>


<link rel="stylesheet" href="css/jquery.ui.all.css">
<link rel="stylesheet" href="css/MyTheme.css"/>
<link rel="stylesheet"  href="css/default.css" />
<script src="js/jquery-1.6.2.js"></script>
<script src="js/jquery.ui.core.js"></script>
<script src="js/jquery.ui.widget.js"></script>
<script src="js/jquery.ui.tabs.js"></script>
<script src="js/jquery-mobile.js"></script>

 <script> 
	$(function() {
	$( "#tabs" ).tabs();
	});
 </script>


<style type="text/css">
.preview{
width: 230px;
float: left;
border: none;
margin: 4px 0 4px 8px;
}
.wrapper{
background: #fff;
min-height: 500px;
}
#highlight{
display: none; 
z-index: 20;
}
.ui-page{
background: #fff;
}
.ui-page-corner
{
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
.ui-jQuery-tab-corner
{
-moz-border-radius: 10px 10px 1px 1px;
-webkit-border-radius: 10px 10px 1px 1px;
}
</style>
</head> 
<body> 
<div id="tabs" class="ui-page-corner"> 
<ul class="ui-page-corner"> 
<li class= "ui-jQuery-tab-corner">
	<a href="#tabs-0">a</a>
</li>
<li class= "ui-jQuery-tab-corner">
	<a href="#tabs-1">b</a>
</li>
<li class= "ui-jQuery-tab-corner">
	<a href="#tabs-2">c</a>
</li>
<li class= "ui-jQuery-tab-corner">
	<a href="#tabs-3">d</a>
</li>
<li class= "ui-jQuery-tab-corner">
	<a href="#tabs-4">e</a>
</li>
</ul> 
<div id="tabs-0">
<div class="wrapper">
<div class="preview ui-shadow swatch">
<div class="ui-header ui-bar-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-form="ui-btn-up-a" 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">a</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-form="ui-btn-up-a" 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>
Sample text and <a class="ui-link" data-form="ui-link" href="#">links</a>.</p>
<ul data-role="listview" data-inset="true" data-theme="a" data-dividertheme="a">
<li data-role="list-divider" role="heading" data-form="ui-bar-a">Divider</li>
<li data-form="ui-btn-up-a"><a href="#">Item</a></li></ul>
<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="aui-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">
<input type="range" name="slider" value="0" min="0" max="100" data-form="ui-body-a" data-theme="a" />
</div>
<button data-icon="star" data-theme="a" data-form="ui-btn-up-a">Button</button>
</div>
</div>
</div>
</div>
<div id="tabs-1">
<div class="wrapper">
<div class="preview ui-shadow swatch">
<div class="ui-header ui-bar-b" data-theme="b" data-form="ui-bar-b" 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-b" data-iconpos="notext" data-form="ui-btn-up-b" data-theme="b" 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">b</h1>
<a class="ui-btn-right ui-btn ui-btn-icon-notext ui-btn-corner-all ui-shadow ui-btn-up-b" data-iconpos="notext" data-form="ui-btn-up-b" data-theme="b" 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-b" data-theme="b" data-form="ui-body-b" data-role="content" role="main">
<p>
Sample text and <a class="ui-link" data-form="ui-link" href="#">links</a>.</p>
<ul data-role="listview" data-inset="true" data-theme="b" data-dividertheme="b">
<li data-role="list-divider" role="heading" data-form="ui-bar-b">Divider</li>
<li data-form="ui-btn-up-b"><a href="#">Item</a></li></ul>
<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="bui-btn-up-b">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-b">Off</label> 
</fieldset> 
</div>
<div data-role="fieldcontain">
<input type="range" name="slider" value="0" min="0" max="100" data-form="ui-body-b" data-theme="b" />
</div>
<button data-icon="star" data-theme="b" data-form="ui-btn-up-b">Button</button>
</div>
</div>
</div>
</div>
<div id="tabs-2">
<div class="wrapper">
<div class="preview ui-shadow swatch">
<div class="ui-header ui-bar-c" data-theme="c" data-form="ui-bar-c" 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-c" data-iconpos="notext" data-form="ui-btn-up-c" data-theme="c" 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">c</h1>
<a class="ui-btn-right ui-btn ui-btn-icon-notext ui-btn-corner-all ui-shadow ui-btn-up-c" data-iconpos="notext" data-form="ui-btn-up-c" data-theme="c" 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-c" data-theme="c" data-form="ui-body-c" data-role="content" role="main">
<p>
Sample text and <a class="ui-link" data-form="ui-link" href="#">links</a>.</p>
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="c">
<li data-role="list-divider" role="heading" data-form="ui-bar-c">Divider</li>
<li data-form="ui-btn-up-c"><a href="#">Item</a></li></ul>
<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="cui-btn-up-c">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-c">Off</label> 
</fieldset> 
</div>
<div data-role="fieldcontain">
<input type="range" name="slider" value="0" min="0" max="100" data-form="ui-body-c" data-theme="c" />
</div>
<button data-icon="star" data-theme="c" data-form="ui-btn-up-c">Button</button>
</div>
</div>
</div>
</div>
<div id="tabs-3">
<div class="wrapper">
<div class="preview ui-shadow swatch">
<div class="ui-header ui-bar-d" data-theme="d" data-form="ui-bar-d" 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-d" data-iconpos="notext" data-form="ui-btn-up-d" data-theme="d" 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">d</h1>
<a class="ui-btn-right ui-btn ui-btn-icon-notext ui-btn-corner-all ui-shadow ui-btn-up-d" data-iconpos="notext" data-form="ui-btn-up-d" data-theme="d" 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-d" data-theme="d" data-form="ui-body-d" data-role="content" role="main">
<p>
Sample text and <a class="ui-link" data-form="ui-link" href="#">links</a>.</p>
<ul data-role="listview" data-inset="true" data-theme="d" data-dividertheme="d">
<li data-role="list-divider" role="heading" data-form="ui-bar-d">Divider</li>
<li data-form="ui-btn-up-d"><a href="#">Item</a></li></ul>
<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="dui-btn-up-d">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-d">Off</label> 
</fieldset> 
</div>
<div data-role="fieldcontain">
<input type="range" name="slider" value="0" min="0" max="100" data-form="ui-body-d" data-theme="d" />
</div>
<button data-icon="star" data-theme="d" data-form="ui-btn-up-d">Button</button>
</div>
</div>
</div>
</div>
<div id="tabs-4">
<div class="wrapper">
<div class="preview ui-shadow swatch">
<div class="ui-header ui-bar-e" data-theme="e" data-form="ui-bar-e" 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-e" data-iconpos="notext" data-form="ui-btn-up-e" data-theme="e" 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">e</h1>
<a class="ui-btn-right ui-btn ui-btn-icon-notext ui-btn-corner-all ui-shadow ui-btn-up-e" data-iconpos="notext" data-form="ui-btn-up-e" data-theme="e" 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-e" data-theme="e" data-form="ui-body-e" data-role="content" role="main">
<p>
Sample text and <a class="ui-link" data-form="ui-link" href="#">links</a>.</p>
<ul data-role="listview" data-inset="true" data-theme="e" data-dividertheme="e">
<li data-role="list-divider" role="heading" data-form="ui-bar-e">Divider</li>
<li data-form="ui-btn-up-e"><a href="#">Item</a></li></ul>
<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="eui-btn-up-e">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-e">Off</label> 
</fieldset> 
</div>
<div data-role="fieldcontain">
<input type="range" name="slider" value="0" min="0" max="100" data-form="ui-body-e" data-theme="e" />
</div>
<button data-icon="star" data-theme="e" data-form="ui-btn-up-e">Button</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html> 
