<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" charset="utf-8">
//add listener when device ready
document.addEventListener("deviceready", onDeviceReady, false);
var db = window.openDatabase("Dummy_DB", "1.0", "Just a Dummy DB", 200000); //will create database Dummy_DB or open it
//function will be called when device ready
function onDeviceReady(){
db.transaction(populateDB, errorCB, successCB);
}
//create table and insert some record
function populateDB(tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS SoccerPlayer (id INTEGER PRIMARY KEY AUTOINCREMENT, Name TEXT NOT NULL, Club TEXT NOT NULL)');
tx.executeSql('INSERT INTO SoccerPlayer(Name,Club) VALUES ("Alexandre Pato", "AC Milan")');
tx.executeSql('INSERT INTO SoccerPlayer(Name,Club) VALUES ("Van Persie", "Arsenal")');
}
//function will be called when an error occurred
function errorCB(err) {
alert("Error processing SQL: "+err.code);
}
//function will be called when process succeed
function successCB() {
alert("success!");
db.transaction(queryDB,errorCB);
}
//select all from SoccerPlayer
function queryDB(tx){
tx.executeSql('SELECT * FROM SoccerPlayer',[],querySuccess,errorCB);
}
function querySuccess(tx,result){
$('#SoccerPlayerList').empty();
$.each(result.rows,function(index){
var row = result.rows.item(index);
$('#SoccerPlayerList').append('<li><a href="#"><p class="record">'+row['Name']+'</p><p class="small">Club '+row['Club']+'</p></a></li>');
});
$('#SoccerPlayerList').listview();
}
</script>
<script src="js/iscroll.js"></script>
<script type="text/javascript">var myScroll;function loaded() {myScroll = new iScroll('wrapper');}document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);</script>
<script src="js/cordova-2.2.0.js"></script>
</head>
<body>
<header>
<img class="gear" src="img/cogwheel.png" width="33" height="33" />
<p class="heading">
iLOCKER
</p>
<img class="newItem" src="img/new.png" width="30,9" height="31,5" />
</header>
<div class="headerShadow"></div>
<div class="searchDiv">
<img class="searchImg" src="img/search.png" width="20,9" height="21,5" />
<div class="searchPlaceholder"><input class="search" id="search" type="text" placeholder="Sök efter något..." name="search" /><hr class="search" /></div>
</div>
<div id="wrapper">
<div id="scroller">
<ul id="SoccerPlayerList">
</ul>
</div>
</div>
</body>
</html>