Petualangan demi petualangan dilakukan dan satu persatu perpustakaan-perpustakaan ditemukan dibelantara dunia maya, berbagai kelebihan dan kekurangan dari setiap perpustakaan tersebut ditemukan. Maksud hati ingin menggabungkan kelebihan-kelebihan tersebut, tetapi ternyata tidak semudah itu. Library JavaScript tersebut ternyata tidak bersahabat satu dengan lainnya, peperangan pun terjadi, mereka saling menjatuhkan satu sama lain. Jika salah satu framework berjalan dengan baik maka framework yang lain dapat dipastikan tidak berjalan, satu kode mematikan kode yang lain.
Dalam kasus kali ini, kita akan mencoba mendamaikan dua framework yang saling menjatuhkan, yaitu jQuery Library dan Prototype Library. Kasus ini ditemukan pada saat Blogger TuneUp mencoba menggabungkan efek Pagepeel dan efek LightBox pada blog Electronic Project. Disaat mencoba mengaktifkan efek Pageflip dengan framework jQuery maka efek LightBox dengan framework Prototype tidak dapat bekerja, begitupun sebaliknya. Setelah ditelaah ternyata masalahnya terletak pada penggunaan shortcut yang sama, jQuery dengan Prototype bahkan beberapa framework lainnya menggunakan shortcut $. Hal ini entah kesengajaan atau memang masih satu developer?
Ada beberapa cara untuk mengatasi konflik jQuery dan Prototype, dibawah ini hanya kasus yang sudah ditemukan:
Dibawah ini script efek PageFlip dengan framework jQuery sebelum dimodifikasi:
<script src='jquery.js' type='text/javascript'/>Dibawah ini script efek LightBox dengan framework Prototype sebelum dimodifikasi:
<script type='text/javascript'>
$(document).ready(function(){
$("#pageflip").hover(function() {
$("#pageflip img , .msg_block").stop()
.animate({width: '307px',height: '319px'}, 500);}, function() {
$("#pageflip img").stop()
.animate({width: '50px',height: '52px'}, 220);
$(".msg_block").stop()
.animate({width: '50px',height: '50px'}, 200);
});
});
</script>
<script src='prototype.js' type='text/javascript'/>
<script src='scriptaculous.js?load=effects,builder' type='text/javascript'/>
<script src='lightbox.js' type='text/javascript'/>
Dengan cara diatas, dapat dipastikan ada efek yang tidak berjalan. Jika posisi penempatan jQuery di atas maka Prototype dapat berjalan dengan baik, tetapi jika posisi penempatan Prototype diatas maka jQuery yang berjalan dengan baik.
Pemecahannya dengan mengubah shortcut "$" menjadi "jQuery" dan menambahkan kode jQuery.noConflict(); sebagai berikut:
Modifikasi jQuery Library;<script src='prototype.js' type='text/javascript'/>Modifikasi Prototype Library;
<script src='jquery.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery("#pageflip").hover(function() {
jQuery("#pageflip img , .msg_block").stop()
.animate({width: '307px',height: '319px'}, 500);}, function() {
jQuery("#pageflip img").stop()
.animate({width: '50px',height: '52px'}, 220);
jQuery(".msg_block").stop()
.animate({width: '50px',height: '50px'}, 200);
});
});
</script>
<script src='scriptaculous.js?load=effects,builder' type='text/javascript'/>Perhatikan:
<script src='lightbox.js' type='text/javascript'/>
- Prototype Library ditempatkan diatas jQuery Library.
- Tambahkan kode "jQuery.noConflict();" pada script jQuery.
- Ubah shortcut "$" menjadi "jQuery" pada script jQuery.
Sampai disini konflik yang terjadi sudah bisa diatasi dan kedua efek bisa berjalan bersamaan. Silahkan dibaca disini untuk mengetahui lebih lanjut tentang pemecahan konflik antar framework terutama jQuery.
Dibawah ini link yang menuju berbagai framework JavaScript Librarypopuler:
Mudah-mudahan cara diatas dapat membantu teman-teman yang punya permasalahan sama, bahkan ada beberapa komentar yang menyampaikan bahwa efek-efek yang dibuat Blogger TuneUp tidak berjalan baik, maka silahkan coba trips trik ini dan semoga berhasil. Happy Blogging... :-)
