การใช้ jQuery ร่วมกับไลบราลีอื่นๆ ด้วยโหมด no-conflict

ในบางครั้งท่านผู้อ่านอาจจะมีปัญหา ในการนำ jQuery ไปใช้กับ ร่วมสคริปต์อื่นๆ หรือแม้กระทั่งพวก css framework ที่บางตัวจะมีการฝัง script ไว้ข้างในด้วย  ซึ่งอาจทำให้ script ของท่านทำงานผิดเพี้ยนไปจากที่ควรเป็น  วันนี้ผมจะนำเสนอเทคนิคในการแก้ปัญหาดังกล่าว นั่นก็คือ การปรับ jQuery ไปใช้งานในโหมด no-conflict นั่นเองครับ

jQueryLogo

สิ่งที่พึงระวังสำหรับมือใหม่ก็คือ ตัว jquery เองนั้นจะใช้ตัวแปร $  อ้างถึงฟังก์ชั่น jQuery  ดังนั้น ถ้ามีสคริปต์ตัวอื่นที่ใช้ตัวแปร $ นี้เหมือนกันล่ะก็  เกิดปัญหาขึ้นแน่นอนครับ

วิธีแก้ปัญหา วิธีแรกคือให้สร้างตัวแปรเพิ่มขึ้นมาอีกตัวเพื่อใช้แทนเครื่องหมาย $

ลองดูโค๊ดตัวอย่างพร้อมคำอธิบายครับ

<script src="other_library.js"></script>
<script src="jquery.js"></script>
<script>
 //ในที่นี้เราประกาศตัวแปร $j แทนตัว $ ครับ
 var $j = jQuery.noConflict();
 $j(document).ready(function(){
    $j("div").hide();
 });

 // ถึงตรงนี้ตัวแปร $ จะหมายถึงตัวแปรจากสคริปต์ other_library.js
 // mainDiv ดังนั้นคำสั่งข้างล่างนี้ $('main') จึงหมายถึงการเรียกฟังก์ชั่น
 // จาก other_library ไม่ใช่การเรียกฟังก์ชั่นของ jquery ครับ
 window.onload = function(){
    var mainDiv = $('main');
 }
</script>

Read more