Dalam pengembangan suatu website seringkali kita dapati ketika menekan suatu tombol akan muncul sebuah tulisan.
Nah. Tulisan tersebut merupakan suatu fitur yang bekerja berdasarkan javascript yang telah terdapat di dalam halaman suatu website html. Website dengan menggunakan javascript tentu akan lebih menarik dan efisian. Seperti ulasan artikel saya sebelumnya yang berjudul keunggulan javascript.
Kali ini sistemit.com akan berbagi tutorial mengenai pembuatan suatu tombol yang mana ketika tombol tersebut ditekan maka akan menampilkan suatu teks hasil dari tindakan klik tersebut.
1. Model 1 – Menampilkan Teks Biasa
<script type="text/javascript">
function showDiv(toggle){
document.getElementById(toggle).style.display = 'block';
}
</script>
<input type="button" name="answer" onclick="showDiv('toggle')" value="Tunjukkan"/>
<div id="toggle" style="display:none">Halo. Anda Berhasil</div>
Simpan kode di atas ke dalam file berekstensi html lalu jalankan di browser anda.
Penjelasan : Function ShowDiv(tooggle) merupakan fungsi yang ketika tombol di klik akan berjalan
2. Model 2 – Menampilkan Dialog box
Cara lain untuk membuat tombol yang menampilkan teks ketika di klik adalah sebagai berikut :
Silahkan copy paste code ini ke file anda yang berekstensi .html.
Untuk cara kedua ini harus menggunakan jaringan internet untuk menjalankan nya karena ada beberapa kode javascript yang langsung di akses secara online. Silahkan lihat source code nya di bawah ini :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Dialog - Animation</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).on( "click", function() {
$( "#dialog" ).dialog( "open" );
});
} );
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>Teks yang diinginkan akan tampil secara otomatis di sini</p>
</div>
<button id="opener">Buka Dialog</button>
</body>
</html>
Jika anda ingin menjalankan source code di atas secara offline, download file berekstensi .js pada baris ke 7, 8, dan 9 kode di atas dan sesuaikan posisi nya sesuai dengan direktori anda. File yang perlu di download antara lain adalah :
1. http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css
2. https://code.jquery.com/jquery-1.12.4.js
3. https://code.jquery.com/ui/1.12.1/jquery-ui.js
Copy semua teks javascript lalu buat dan simpan dengan file berekstensi .js kemudian anda tinggal menggantinya sesuai letak folder yang anda inginkan.
Bagaimana ?? gampang kaan.
Langsung sedot script bagi yang ga mau ribet :
GET SCRIPT
Demikanlah tutorial untuk membuat tombol javascript yang bereaksi ketika diklik akan memunculkan info teks.
