---
Cara Mudah Buat Calculator Apps dengan jQuery Mobile
LANGKAH2
1) Layari URL http://www.compileonline.com/try_jquerymobile_online.php
3) Bina User Interface
4) Masukkan kod skrip memproses
5) Jalankan Apps
LANGKAH2
1) Layari URL http://www.compileonline.com/try_jquerymobile_online.php
2) Kod untuk menghasilkan Apps ini diambil dari https://github.com/j-shepard/calculator/tree/master/src
3) Bina User Interface
Salin semua kod dari https://github.com/j-shepard/calculator/blob/master/src/calculator.html dan paste ke dalam CompileOnline Editor.
4) Masukkan kod skrip memproses
Salin semua kod dari https://github.com/j-shepard/calculator/blob/master/src/calculator.js .
Gantikan baris kod “<script src="calculator.js"></script>” dengan kod yang anda salin seperti berikut:
Kod pernuh akan jadi seperti berikut:
<!DOCTYPE html>
<html manifest="cache.manifest">
<head>
<meta charset="utf-8"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<title>Calculator</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css"/>
<link rel="apple-touch-icon" href="/calculator.png"/>
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<script>
var displayField;
$(document).ready(function() {
displayField = $('#display')
$("button").bind('tap', function() {
buttonPressed()
})
})
function buttonPressed() {
var buttonText = event.target.innerText
if (isCompute(buttonText)) {
compute()
} else if (isClear(buttonText)) {
clear()
} else if (isBackSpace(buttonText)) {
backSpace()
} else {
display(buttonText)
}
}
function isClear(buttonText) {
return "C" == buttonText
}
function isBackSpace(buttonText) {
return "\u21D0" == buttonText
}
function isCompute(buttonText) {
return "=" == buttonText
}
function display(buttonText) {
var newDisplay = displayField.val() + buttonText
displayField.val(newDisplay)
}
function clear() {
displayField.val("")
}
function backSpace() {
var display = displayField.val()
if (display.length > 0) {
var newDisplay = display.substr(0, display.length - 1)
displayField.val(newDisplay)
}
}
function compute() {
try {
var newDisplay = eval(displayField.val())
displayField.val(newDisplay)
} catch (error) {
displayField.val("Error")
}
}
</script></script>
</head>
<body>
<div data-role="page" data-theme="b" id="simple-calculator">
<div data-role="fieldcontain">
<label for="display"></label>
<textarea cols="40" rows="8" name="display" id="display" readonly></textarea>
</div>
<fieldset class="ui-grid-c">
<div class="ui-block-a">
<button type="button">7</button>
</div>
<div class="ui-block-b">
<button type="button">8</button>
</div>
<div class="ui-block-c">
<button type="button">9</button>
</div>
<div class="ui-block-d">
<button type="button" data-theme="b">+</button>
</div>
<div class="ui-block-a">
<button type="button">4</button>
</div>
<div class="ui-block-b">
<button type="button">5</button>
</div>
<div class="ui-block-c">
<button type="button">6</button>
</div>
<div class="ui-block-d">
<button type="button" data-theme="b">-</button>
</div>
<div class="ui-block-a">
<button type="button">1</button>
</div>
<div class="ui-block-b">
<button type="button">2</button>
</div>
<div class="ui-block-c">
<button type="button">3</button>
</div>
<div class="ui-block-d">
<button type="button" data-theme="b">*</button>
</div>
<div class="ui-block-a">
<button type="button">(</button>
</div>
<div class="ui-block-b">
<button type="button">0</button>
</div>
<div class="ui-block-c">
<button type="button">)</button>
</div>
<div class="ui-block-d">
<button type="button" data-theme="b">/</button>
</div>
<div class="ui-block-a">
<button type="button" data-theme="e">C</button>
</div>
<div class="ui-block-b">
<button type="button">.</button>
</div>
<div class="ui-block-c">
<button type="button" data-theme="e">⇐</button>
</div>
<div class="ui-block-d">
<button type="button" data-theme="a">=</button>
</div>
</fieldset>
</div>
</body>
</html>
|
