Created
January 14, 2015 15:20
-
-
Save jkndrkn/0fc6905d584f16ab38ea to your computer and use it in GitHub Desktop.
Foo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>CSS3 Basic User Interface</title> | |
<meta name="viewport" content="width=device-width, minimum-scale=1.0" /> | |
<style> | |
*{ | |
margin: 0; | |
padding: 0; | |
} | |
body{ | |
padding: 15px; | |
} | |
table{ | |
width: 100%; | |
margin-bottom: 20px; | |
border-collapse: collapse; | |
border-spacing: 0; | |
font-size: .9em; | |
} | |
table caption{ | |
padding: 5px; | |
font-size: 1.2em; | |
} | |
table th, table td{ | |
padding: 10px 5px; | |
} | |
table th{ | |
background-color: #333; | |
color: #fff; | |
box-shadow: inset 1px 1px 0 rgba(255,255,255,.7); | |
} | |
table td{ | |
box-shadow: inset -1px -1px 5px rgba(0,0,0,.7); | |
} | |
table thead tr th{ | |
border-radius: 5px; | |
} | |
table tbody tr:first-child th:first-child{ | |
border-radius: 5px 0 0 0; | |
} | |
table tbody tr:last-child th:first-child{ | |
border-radius: 0 0 0 5px; | |
} | |
table tbody tr:first-child td:last-child{ | |
border-radius: 0 5px 0 0; | |
} | |
table tbody tr:last-child td:last-child{ | |
border-radius: 0 0 5px 0; | |
} | |
.button_wrap{ | |
margin: 0 auto; | |
} | |
.button_wrap button{ | |
margin: 0 .3em; | |
} | |
</style> | |
<script> | |
var db; | |
//database varsion setting | |
var version = 1.0; | |
//database name setting | |
var dbName = "tizendb"; | |
//database display name setting | |
var dbDisplayName = "tizen_test_db"; | |
//database size setting | |
var dbSize = 2 * 1024 * 1024; | |
function selectDB() { | |
if (window.openDatabase) { | |
//openDatabase(name, version, displayname, estimatedsize, callback); | |
try { | |
db = openDatabase(dbName, version, dbDisplayName, dbSize); | |
dropTable(db); | |
createTable(db); | |
//inserting data in table | |
insertData(db, "tizenTest01", "We are pleased to announce that Tizen 2.0"); | |
insertData(db, "tizenTest02", "device vendors. We encourage you to download"); | |
insertData(db, "tizenTest03", "installed and used it. If you have questions"); | |
insertData(db, "tizenTest04", "This release includes many new features"); | |
insertData(db, "tizenTest05", "Highlights of this release include"); | |
dataView(db); | |
} catch(error) { | |
alert(error); | |
} | |
} else { | |
alert("Web SQL Database not supported in this browser"); | |
} | |
} | |
//reads and displays values from the 'places' table | |
function dataView(db) { | |
var html = document.getElementById("tbody01"); | |
var ddlHtml = document.getElementById("ddlTitle"); | |
html.innerHTML = ""; | |
ddlHtml.innerHTML = ""; | |
db.transaction(function (t) { | |
t.executeSql("SELECT * FROM tizenTable", [], | |
function (tran, r) { | |
ddlHtml.innerHTML = "<option value='all'>all</option>"; | |
for (var i = 0; i < r.rows.length; i++) { | |
var id = r.rows.item(i).id; | |
var title = r.rows.item(i).title; | |
var content = r.rows.item(i).content; | |
var insertday = r.rows.item(i).insertDay; | |
//data list rendering | |
if (html) { | |
html.innerHTML += "<tr><td>" + id + "</td><td>" + title + "</td><td>" + content + "</td><td>" + insertday + "</td></tr>"; | |
} | |
//select box rendering | |
if (ddlHtml) { | |
ddlHtml.innerHTML += "<option value=" + id + ">" + title + "</option>"; | |
} | |
} | |
}, | |
function (t, e) { alert("Error:" + e.message); } | |
); | |
}); | |
} | |
// create table | |
function createTable(db) { | |
db.transaction(function (t) { | |
t.executeSql("CREATE TABLE tizenTable (id INTEGER PRIMARY KEY, title TEXT, content TEXT, insertDay DATETIME)", []); | |
}); | |
} | |
//inserting data in table | |
function insertData(db, title, context) { | |
db.transaction(function (e) { | |
var day = new Date(); | |
e.executeSql("INSERT INTO tizenTable(title, content, insertDay) VALUES (?, ?, ?)", [title, context, day], onSuccess, onError); | |
}); | |
} | |
function onSuccess(e) { } | |
function onError(e) { } | |
// drop table | |
function dropTable(db) { | |
db.transaction(function (e) { | |
e.executeSql("DROP TABLE tizenTable"); | |
}); | |
} | |
//Select the data conditions | |
function dataChange(value) { | |
if (value != "all") { | |
var html = document.getElementById("tbody01"); | |
html.innerHTML = ""; | |
db.transaction(function (t) { | |
t.executeSql("SELECT * FROM tizenTable WHERE id=?", [value], | |
function (tran, r) { | |
for (var i = 0; i < r.rows.length; i++) { | |
var id = r.rows.item(i).id; | |
var title = r.rows.item(i).title; | |
var content = r.rows.item(i).content; | |
var insertday = r.rows.item(i).insertDay; | |
if (html) { | |
html.innerHTML += "<tr><td>" + id + "</td><td>" + title + "</td><td>" + content + "</td><td>" + insertday + "</td></tr>"; | |
} | |
} | |
}, | |
function (t, e) { alert("Error:" + e.message); } | |
); | |
}); | |
} else { | |
dataView(db); | |
} | |
} | |
window.onload = function () { | |
selectDB(); | |
}; | |
</script> | |
</head> | |
<body> | |
<div style="float: right;"> | |
<select id="ddlTitle" onchange="dataChange(this.value);"> | |
</select> | |
</div> | |
<table> | |
<caption> | |
Web SQL Database Example</caption> | |
<thead> | |
<tr> | |
<th>id</th> | |
<th>title</th> | |
<th>context</th> | |
<th>date</th> | |
</tr> | |
</thead> | |
<tbody id="tbody01"> | |
</tbody> | |
</table> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment