MEMBUAT VIRTUAL KEYBORD DENGAN HTML
1. Virtual Keyboard
Virtual keyboar adalah merupakan inovasi dalam produk perangkat lunak yang memungkinkan alternatif untuk penggunaan komputer konvensional Keyboard.
Berikut contoh gambar dari virtual keybord yang akan kita buat mengunakan HTML.
langakah pertama silahkan kalian buka editor kesayangan anda lalu masukan koding di bawah ini .
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Virtual Key board </title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="softkeys-0.0.1.css">
<style>
body {
background-color: #FFFFFF;
font-family: 'Roboto';
}
body,td,th {
font-family: Roboto;
}
</style>
</head>
<body>
<div id="jquery-script-menu">
<div class="jquery-script-center" align="center">
<ul>
</ul>
<div class="jquery-script-ads"><script type="text/javascript">
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>
<div class="jquery-script-clear"></div>
</div>
</div>
<div class="container-fluid" style="margin-top:150px;" align="center">
<p>codingcerdas.blogspot.co.id</p>
<hr>
<form class="row form">
<div class="col-sm-offset-4 col-sm-4 form-group">
<input type="text" name="code" class="form-control input-lg">
</div>
<div class="softkeys" data-target="input[name='code']"></div>
</form>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="softkeys-0.0.1.js"></script>
<script>
$(document).ready(function(){
$('.softkeys').softkeys({
target : $('.softkeys').data('target'),
layout : [
[
['`','~'],
['1','!'],
['2','@'],
['3','#'],
['4','$'],
['5','%'],
['6','^'],
['7','&'],
['8','*'],
['9','('],
['0',')'],
['-', '_'],
['=','+'],
'delete'
],
[
'q','w','e','r','t','y','u','i','o','p',
['[','{'],
[']','}']
],
[
'capslock',
'a','s','d','f','g','h','j','k','l',
[';',':'],
["'",'"'],
['\\','|']
],
[
'shift',
'z','x','c','v','b','n','m',
[',','<'],
['.','>'],
['/','?'],
['@']
]
]
});
});
</script>
</body><script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36251023-1']);
_gaq.push(['_setDomainName', 'jqueryscript.net']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</html>
|
Setelah selesi mengketik coding di atas lalu anda tekan CTRL + S agar dapat tersave automatis lalu beri nama dengan index.html .
baca juga : fungsi dari tag tag HTML
bagi yang masih kebingungan silahkan kalian download saja di link di bawah ini . semoga ilmunya bermanfaat jangan lupa share dan follow terus ya.
1 comments:
Click here for commentsNice post,
doc to html converter