Jquery ต้องใช้ร่วมกับ Prototype/Mootools จะทำไง (โดยเฉพาะใน Drupal)

200915 Jun

ถ้าใครใช้ jQuery, Prototype และ Mootools นั้นจะรู้ว่ามี namespace ตัวนึงคือ $ ซึ่งจะเป็นตัวอ้างอิงเสมือนเวลาอ้างอิงการทำงานใด ๆ ใน ถ้าอ่านในเว็บ jQuery ก็จะบอกไว้เลยว่า By default, jQuery uses “$” as a shortcut for “jQuery” ปัญหาก็คือ ..... คือ namespace ใช้วิธีที่ไปเหมือนกับ Prototype, MooTools และ YUI นั้นซิจะบ้าตาย เหมือน Jquery คงคิดว่าต้องมีปัญหาแน่ ๆ เลยกับ Frame work ตัวอื่นเลยได้จัดเตรียม "jQuery.noConflict( )" เอาไว้ใช้ร่วมกับ Frame work ตัวอื่น ๆ เรามาดูวิธีแก้ไขกัน

แบบที่ 1 jQuery.noConflict(); แบบตรงๆ ไม่ต้องมีตัวแปร

แบบนี้จะถูก Map โดย default ให้ใช้ชื่อ jQuery แทนโดย default

<script type="text/javascript" src="prototype.js" />

<script type="text/javascript" src="mootools.js" />

<script type="text/javascript" src="jquery.js" />

<script type="text/javascript">

  // เพิ่มบรรทัดนี้ลงไป

  jQuery.noConflict();

//  jQuery จาก $ เป็น jQuery(...) แทน

jQuery(document).ready(function(){

        jQuery("div").hide();

});

// ส่วน Prototype/Mootools ใช้ $(...) ได้ตามปกติ

$('#navid').style.display = 'none';

</script>

ยังมีวิธีอื่น ๆอีก การกำหนด name space ใหม่ก้อได้ในชื่อเราต้องการ

แบบที่ 2 สร้าง alias ใหม่

แบบนี้สร้าง alias โดยการสร้างตัวแปรมารองรับ แทน alias เดิมที่ใช้ "jQuery" จาก jQuery.noConflict(); ข้อดีก้อคือชื่อตามใจเรานั้นเอง แต่นำแนะว่าอย่าเปลี่ยนเลย jQuery.noConflict(); ใช้แบบนี้ก้อง่าย ดี

var j = jQuery.noConflict();

// Do something with jQuery

j("div p").hide();

// Do something with another library's $()

$("content").style.display = 'none';