Kita mengenal salah satu framework javascript yaitu jQuery ternyata masih banyak lagi framework javascript yang bisa kita gunakan salah satunya adalah mootools. Mootools adalah kumpulan utilitas JavaScript dirancang untuk pengembang JavaScript tingkat menengah sampai tingkat mahir. Hal ini memungkinkan anda untuk menulis kode yang kuat dan fleksibel namun tetap elegan, didokumentasikan dengan baik, dan API yang koheren. Pada Tutorial kali ini saya akan mencoba membagi Cara Membuat Toggle Menggunakan Mootools.
Toggle adalah kondisi dimana pada saat kita mengklik atau mengarahkan kursor pada elemen maka elemen tersebut akan berubah kondisinya seperti pada saat di klik maka akan timbul elemen lainnya. Kali ini saya akan menjelaskan Cara Membuat Toggle Menggunakan Mootools, berikut langkah-langkahnya:
– Pertama buka text editor teman-teman dan masukan kode html di bawah ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html> <head> <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script> <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script> </head> <body> <div class='moreWrapper'> <div class='divToggle'> <h3 style="cursor:pointer">+ Webmaster</h3> </div> <div class='moreInfo'> <h3>Paket Webmaster</h3> <p>HTML5 & CSS3</p> <p>Bootstrap</p> <p>PHP & MySQL</p> <p>Photoshop Web Design</p> </div> </div> </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 ketikan dan simpan dalam tag head dengan menggunakaan kode di bawah ini:
|
1 2 |
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script> <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script> |
Keempat, teman-teman ketikan script sebelum tag body, kodenya di bawah ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<script type="text/javascript"> //mengambil seluruh class moreWrapper dan moreInfo yang ada pada div $$('.moreWrapper .moreInfo').each(function(item){ item.set('slide', { duration: 600 }).slide('hide'); }); $$('.moreWrapper .divToggle').each(function(item){ //addEvent dixsini berfumgsi item.addEvent('click', function(e){ var el = this.getFirst('h3'); if (this.getNext('div').getDimensions().height == 0) { //pada saat di klik maka tanda + akan berubah menjadi - el.set('html', el.get('html').replace('+','-')); } else { //sebaliknya pada saat di klik kembali maka tanda - akan berubah menjadi + el.set('html', el.get('html').replace('-','+')); } this.getNext('div').getFirst('.moreInfo').slide('toggle'); }); }); </script> |
Penjelasan ada di commenting di dalam kode di atas. Coba teman-teman refresh browser teman-teman:
lalu arahkan cursor ke elemen yang ada dan klik pada elemen tersebut, maka akan muncul elemen yang kita hide tadi:
Jadi selain menggunakan jQuery kita juga bisa menggunakan mootools sebagai framawork javascript, sekarang terserah pada teman-teman mau menggunakan framework yang mana untuk membuat toggle.
Sekain tutorial kali ini tentang Cara Membuat Toggle Menggunakan Mootools. Selamat mencoba yah teman-teman.