Bulan ini saya mendapatkan sebuah pekerjaan pembuatan web dari sebuah fakultas di perguruan tinggi. Saya mencoba memberi nuansa animasi pada beberapa bagian dari web yang saya buat, seperti biasa bagian banner adalah langganan utama penggunaan efek animasi, awalnya saya ingin menggunakan flash tetapi saya ingin membuat yang lebih ringan dan benar-benar pure code no flash “so gaya!” he3x…

Muter-muter, browsing sana kemari dan akhirnya saya menemukan script animasi slide image dengan core JQuery yang dibuat oleh Boban Karišik seorang Web dev. Dia memberi nama s3Slider JQuery plugin , sebenarnya script ini tidak jauh beda dengan Smooth Slideshow v2.1
milik dari JonDesign’s.

s3Slider :

Singkat kata script pun terpasang dan animasi berjalan dengan kehendak hati, but sekarang mata saya tertuju pada bagian navigasi web alias menu, nah ini dia bagian yang tidak pernah kurang dari dua mesti lebih tapi kadang – kadang ada juga yang cuman atu he3x. Navigasi favorit saya adalah pada bentuk horizontal dan menggunakan drop down untuk sub menu alias menu anakannya, kali ini si anakan ternyata harus ber anak lagi “ampun deh” banyak bangets anaknya …., sempat puyeng juga gimana buatnya yang tidak sekedar dropdown biasa tapi pengen yang ketika dropdown ada efek smooth dan otomatis scrool up juga. Untung ada gudang bookmark dan menemukan menu yang diinginkan milik mas Jason Jeager , dia memberi nama model navigasinya dengan nama MenuMetic, kaya model sepeda motor saja, mungkin ada benarnya juga karena ada efek otomatisnya, penasaran silahkan liat disini. Scriptsnya berbasi mootools dan ketika di gabungkan dengan JQuery bencana pun tiba…he..he..he ..semua menjadi berantakan, s3Slider tidak jalan dan navigasi pun buyar yar……”aduh!”.

MenuMetic :

Selidik punya selidik dan mencoba cari tau dari bang google, bahwa ada ketidak akuran dari mootools dengan JQuery pada pemanggilan code-nya yang sama – sama menggunakan tanda “$” pada awalnnya sebagai shortcut penulisannya. JQuery menggunakan “$( )” dan si Mootools menggunakan “$” , memang dollar dimana-mana membuat masalah termasuk di coding he3x….tapi “mahal nilainya!”. Google membawa saya kesitus milik Om JQuery sendiri dan Bang Phil Tylor serta Mas “Gatot Ari Wibowo“ sebagai rujukan.

Cara pemecahan yang ditawarkan adalah :

Menambahkan script jQuery.noConflict() seperti pada contoh berikut ;

<html>
 <head>
   <script src="mootools.js"></script>
   <script src="jquery.js"></script>
   <script>
     jQuery.noConflict(); <-------------------------scipt tambahan

     // Use jQuery via jQuery(...)
     jQuery(document).ready(function(){
       jQuery("div").hide();
     });

     // Use Prototype with $(...), etc.
     $('someid').hide();
   </script>
 </head>
 <body></body>
 </html>

Mengganti semua awalan “$” pada fungsi JQuery yang kita buat menjadi “jQuery”
Awalnya :
$(document).ready(function(){ <———————”$”
// Lakukan sesuatu
});
Menjadi :
jQuery(document).ready(function(){ <—————————”jQuery”
// Lakukan sesuatu
});
Jika jQuery dirasa kurang enak kita dapat mendefiniskannya menjadi “var $J = jQuery” , suka-suka sesuai keinginan kita, kala perlu pake nama kita he3x biar keyen! ….

Dan akhirnya saya dapat menjalankan mootools dan JQuery bersama-sama dan hal ini dapat juga digunakan jika kita memasangkan Jquery dengan framework javascript lainnya seperti prototype.

Selamat mencoba

3 Source Free Icons Set Bagi seorang web designer yang namanya icon menjadi kebutuhan yang...
Theme WP menawan dari CODA Pagi ini saya dapat email dari Greg Johnson tentang relis...
Khusus buat yang calon web designer Sekarang kita lagi demam CPNS dimana-mana, mungkin ada yang lagi...
Mengambil halaman web secara penuh menjadi PNG atau JPG Sebagai seorang web designer , pastilah kebiasaan mengumpulkan situs-situs dengan...

6 Responses to “Menggunakan Mootools dan JQuery bersamaan”

widik on December 30, 2008

Penggunaan jQuery.noConflict(); apakah bisa digunakan untuk menggabungkan javascript framework yang lain selain mootools dan prototype?

salam
zoel on December 30, 2008

Menurut dokumentasi dari situs jquery sendiri hal ini dimungkinkan mas, penggunaan jQuery.noConflict(); tersebut memang diperuntukkan untuk frameworks/libs yang lain, lengkapnya silahkan kunjungi situs ini mas : http://docs.jquery.com/Using_jQuery_with_Other_Libraries, semoga membantu “salam!”
Elissis on October 2, 2010

Thank you broooo!!!!
Blogger Madura on October 8, 2010

Kalo mau bikin gambar slide yang kek situs http://www.comm100.com/ itu gimana mas?
zoel on October 8, 2010

Salam!, mungkin link ini bisa membantu http://www.dreamcss.com/2009/04/create-beautiful-jquery-sliders.html
zoel on October 8, 2010

trims balik

widik on December 30, 2008

Penggunaan jQuery.noConflict(); apakah bisa digunakan untuk menggabungkan javascript framework yang lain selain mootools dan prototype?

salam

zoel on December 30, 2008

Menurut dokumentasi dari situs jquery sendiri hal ini dimungkinkan mas, penggunaan jQuery.noConflict(); tersebut memang diperuntukkan untuk frameworks/libs yang lain, lengkapnya silahkan kunjungi situs ini mas : http://docs.jquery.com/Using_jQuery_with_Other_Libraries, semoga membantu “salam!”