By arunraj
IUI is a web framework used for creating mobile websites and webapps providing a native look-alike in a lesser time. It supports IOS, android etc.,
The following is a basic example application in html which uses IUI framework. Please download IUI framework to run this example application.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<link rel="stylesheet" href="iui/iui.css" type="text/css" />
<link rel="stylesheet" href="iui/t/default/default-theme.css" type="text/css"/>
<script type="application/x-javascript" src="iui/iui.js"></script>
</head>
<body>
<body>
<div class="toolbar">
<h1 id="pageTitle"></h1>
<a id="backButton" class="button" href="#"></a>
</div>
<ul id="screen1" title="Screen 1" selected="true">
<li><a href="#screen2">Go to Android Home Page</a></li>
</ul>
<div id="screen2" class="panel" title="Screen 2">
<ul id="android" title="Screen 1" selected="true">
<li><a href="#1.5">Android 1.5</a></li>
<li><a href="#2.3">Android 2.3</a></li>
<li><a href="#3.0">Android 3.0</a></li>
<li><a href="#4.0">Android 4.0</a></li>
<li><a href="#4.1">Android 4.1</a></li>
</ul>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<link rel="stylesheet" href="iui/iui.css" type="text/css" />
<link rel="stylesheet" href="iui/t/default/default-theme.css" type="text/css"/>
<script type="application/x-javascript" src="iui/iui.js"></script>
</head>
<body>
<body>
<div class="toolbar">
<h1 id="pageTitle"></h1>
<a id="backButton" class="button" href="#"></a>
</div>
<ul id="screen1" title="Screen 1" selected="true">
<li><a href="#screen2">Go to Android Home Page</a></li>
</ul>
<div id="screen2" class="panel" title="Screen 2">
<ul id="android" title="Screen 1" selected="true">
<li><a href="#1.5">Android 1.5</a></li>
<li><a href="#2.3">Android 2.3</a></li>
<li><a href="#3.0">Android 3.0</a></li>
<li><a href="#4.0">Android 4.0</a></li>
<li><a href="#4.1">Android 4.1</a></li>
</ul>
</div>
<div id="1.5" title="Screen 3"><b>Cup Cake </b>
</div>
<div id="2.3" title="Screen 3"><b>Ginger Bread </b>
</div>
<div id="3.0" title="Screen 3"><b>Honey Comb</b>
</div>
<div id="4.0" title="Screen 3"><b>IceCream Sandwich</b>
</div>
<div id="4.1" title="Screen 3"><b>JellyBean</b>
</div>
</body>
</html>
Technology: