mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-29 20:20:27 +00:00
86 lines
No EOL
2.7 KiB
HTML
86 lines
No EOL
2.7 KiB
HTML
<?php /*gzip page*/ ob_start("ob_gzhandler"); ?>
|
|
<!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>
|
|
<script type="text/javascript">
|
|
$(function() {
|
|
var conversions = [
|
|
{
|
|
id: "dollar-to-euro",
|
|
label: "$ => €",
|
|
//rate: localStorage["dollar-to-euro-rate"] || 0.766694779,
|
|
rate: 0.766694779,
|
|
update: function(callback) {
|
|
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
|
|
},
|
|
{
|
|
id: "inch-to-centimeters",
|
|
label: "inch => cm",
|
|
rate: 2.54
|
|
}
|
|
];
|
|
$.each(conversions, function(index, conversion) {
|
|
conversion.update && conversion.update();
|
|
// need to theme these; styles get applied only to existing elements at pageload time
|
|
$("#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() {
|
|
return false;
|
|
})
|
|
});
|
|
</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> |