jquery-mobile/experiments/converter/index.html

82 lines
No EOL
2.7 KiB
HTML

<!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" src="jquery.tmpl.js"></script>
<script type="text/javascript" src="storage.js"></script>
<script type="text/javascript" src="application.js"></script>
<style>
.field { padding: 15px; }
.editbutton { float: right; }
</style>
</head>
<body>
<div data-role="page">
<div data-role="header">
<a href="#customize" class="editbutton">Edit</a>
<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" value="1" />
</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 conversion-${type}" title="From ${from} to ${to}">${$item.symbols[from]} to ${$item.symbols[to]}</label>
<input type="text" readonly="readonly" name="${from}${to}" id="${from}${to}" value="" />
</li>
</script>
</div>
</div>
<div data-role="page" id="customize">
<div data-role="header">
<h1>Edit conversions</h1>
</div>
<div data-role="content" class="ui-body-b">
sort conversions, add new ones or delete some
<a href="#add-dialog" data-role="button">Add currency conversion</a>
<a id="restore" href="#" data-role="button">Restore default</a>
<a id="clear" href="#" data-role="button">Delete all conversions</a>
</div>
</div>
<div data-role="page" id="add-dialog">
<div data-role="header" data-theme="d">
<h1>Add conversion</h1>
<a href="index.html" class="ui-back" data-icon="arrow-l">Cancel</a>
</div>
<div data-role="content" class=" ui-body ui-body-c">
<h1>Demo description</h1>
From
<select name="currency-options" id="currency-options-from">
<option value="EUR">EUR - Euro</option>
<option value="USD">USD - US Dollar</option>
<option value="GBP">GBP - Great Britain Pound</option>
</select>
To
<select name="currency-options" id="currency-options-to">
<option value="EUR">EUR - Euro</option>
<option value="USD">USD - US Dollar</option>
<option value="GBP">GBP - Great Britain Pound</option>
</select>
<a id="add" href="#add-dialog" data-role="button">Add conversion</a>
</div>
</div>
</body>
</html>