2010-09-21 20:33:06 +00:00
<!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" / >
< title > jQuery Mobile Framework - Converter Demo Application< / title >
< link rel = "stylesheet" type = "text/css" href = "../../css/all" / >
< script type = "text/javascript" src = "../../js/all" > < / script >
2010-10-02 15:57:43 +00:00
< script type = "text/javascript" src = "jquery.tmpl.js" > < / script >
2010-09-21 20:33:06 +00:00
< script type = "text/javascript" >
$(function() {
var conversions = [
{
id: "dollar-to-euro",
label: "$ => €",
2010-09-27 18:25:28 +00:00
// TODO lookup localStorage API, maybe use storageJS
2010-09-21 20:33:06 +00:00
//rate: localStorage["dollar-to-euro-rate"] || 0.766694779,
rate: 0.766694779,
update: function(callback) {
2010-09-27 18:25:28 +00:00
return;
2010-09-21 20:33:06 +00:00
var self = this;
var url = "http://query.yahooapis.com/v1/public/yql?q=select%20rate%2Cname%20from%20csv%20where%20url%3D'http%3A%2F%2Fdownload.finance.yahoo.com%2Fd%2Fquotes%3Fs%3DUSDEUR%253DX%26f%3Dl1n'%20and%20columns%3D'rate%2Cname'&format=json&diagnostics=true&callback=?";
$.getJSON(url, function(result) {
self.rate = parseFloat(result.query.results.row.rate);
$("#term").keyup();
//localStorage[self.id + "-rate"] = self.rate;
});
}
},
{
id: "miles-to-kilometers",
label: "m => km",
rate: 1.609344
2010-09-22 11:58:57 +00:00
},
{
id: "inch-to-centimeters",
label: "inch => cm",
rate: 2.54
2010-09-21 20:33:06 +00:00
}
];
$.each(conversions, function(index, conversion) {
conversion.update & & conversion.update();
$("#conversion-field").tmpl(conversion).appendTo("#conversions");
});
$.mobilize($("#conversions"));
$("#term").keyup(function() {
var value = this.value;
$.each(conversions, function(index, conversion) {
$("#" + conversion.id).val( Math.ceil(value * conversion.rate * 100) / 100);
});
}).keyup().focus();
$("form").submit(function() {
2010-09-27 18:25:28 +00:00
$("#term").blur();
2010-09-21 20:33:06 +00:00
return false;
2010-09-27 18:25:28 +00:00
});
2010-09-21 20:33:06 +00:00
});
< / script >
< style >
.field { padding: 15px; }
.ui-back { display: none !important; }
< / style >
< / head >
< body >
< div data-role = "page" >
< div data-role = "header" >
< h1 > Converter demo< / h1 >
< / div >
< div data-role = "content" class = " ui-body-b" >
< form method = "get" action = "" data-role = "autoform" >
< label for = "term" data-role = "nojs" > Search:< / label >
< input type = "number" name = "term" id = "term" placeholder = "search..." data-role = "search" / >
< / form >
< div class = "ui-content" >
< ul id = "conversions" data-role = "listview" data-inset = "true" > < / ul >
< / div >
< script id = "conversion-field" type = "text/x-jquery-tmpl" >
< li >
< label for = "name" class = "ui-input-text" > ${label}< / label >
< input type = "text" readonly = "readonly" name = "${id}" id = "${id}" value = "" / >
< / li >
< / script >
< / div >
< / div >
< / body >
< / html >
