Sama dengan jQuery mootols juga mempunya beberapa metode di dalamnya, sperti metode set(). Metode set ini berfungsi untuk memnambahkan styles atau event pada sautu elemen yang telah kita buat. Dimana elemen tersebut akan terpengaruh oleh style dan event yang telah kita berikan. Pada tutorial kali ini saya akan mencoba membahas tentang Cara Menggunakan Metode Tween pada Mootools.
Metode ini memberikan transisi halus antara dua nilai properti gaya. Mari kita ambil contoh yang menggunakan metode tween untuk mengubah lebar div dari 100px ke 300px.
Nah, sekarang saya akan mencoba menjelaskan Cara Menggunakan Metode Tween pada Mootools, berikut langkah-langkahnya:
– Pertama buka text editor teman-teman dan masukan kode html dan css di bawah ini:
<!DOCTYPE html>
<html>
<head>
<style><br /> /*memberikan css pada id box*/<br /> #box {<br /> width: 100px;<br /> height: 200px;<br /> background-color: lightblue;<br /> border: 3px solid #eeeeee;<br /> }<br /> </style>
</head>
<body>
<div id = "box"> </div><br/>
<input type = "button" id = "tombol_tween" value = "Tambah Lebar"/>
</body>
</html>
Coba teman-teman jalankan di browser teman-teman maka tempilannya akan menjadi seperti gambar di bawah ini:
Kedua, teman-teman download file mootoolsnya di website mootools, lalu simpan di dalam folder yang sama dengan file htmlnya.
Ketiga, kita panggil file mootoolsnya dengan menggunakaan kode di bawah ini:
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script><br /><script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
Keempat, masukan script di bawah ini untuk memberikan efek transisi dan penambahan width pada id box, Berikut scriptnya:
<script type = "text/javascript"><br /> //variabel tweenFunction berfungsi untuk menampung fungsi yang akan kita buat<br /> var tweenFunction = function(){<br /> //merubah lebar box yang ada<br /> $('box').tween('width','400px')<br /> }<br /> //addEvent berfungsi untuk menjalankan proses apabila kita klik tombol tambah lebar<br /> window.addEvent('domready', function() {<br /> $('tombol_tween').addEvent('click', tweenFunction);<br /> });<br /></script>
Setelah itu coba teman-teman refesh browser teman-teman, lalu teman-teman klik tombol Tambah Lebar maka otomatis box akan menambah lebarnya menjadi 400px. Seperti gambar di bawah ini:
Bagaimana teman-teman cukup mudahkan menggunakan method tween pada mootools.
Sekain tutorial kali ini tentang Cara Menggunakan Metode Tween pada Mootools. Selamat mencoba yah teman-teman semoga bermanfaat.
The post Cara Menggunakan Metode Tween pada Mootools appeared first on Kursus Website Terbaik.