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="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(); ใช้แบบนี้ก้อง่าย ดี
// Do something with jQuery
j("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';
สามารถอ่านเพิ่มเติมได้ที่ http://docs.jquery.com/Core/jQuery.noConflict
Post new comment