สำหรับใครที่ใช้ mootools นี่คงไม่อยากนั่ง online เพื่อดู document ของมันเท่าไหร่ มีคนใน forum mootools ทำ chm file ไว้ให้ที่นี่ ผมเลยโหลดมา แล้วเอามาใส่ใน Server ผมแทนแล้วกัน โหลดได้ที่นี่ครับ ขนาดไม่ใหญ่มาก
Mootools
เมื่อ jQuery อยู่ร่วมโลกกับ Prototype/Mootools ไม่ได้ (โดยเฉพาะใน Drupal)
ถ้าใครใช้ jQuery, Prototype และ Mootools นั้นจะรู้ว่ามี namespace ตัวนึงคือ $ ซึ่งจะเป็นตัวอ้างอิงเสมือนเวลาอ้างอิงการทำงานใด ๆ ใน ถ้าอ่านในเว็บ jQuery ก็จะบอกไว้เลยว่า
By default, jQuery uses “
$
” as a shortcut for “jQuery”
ปัญหาก็คือ …..
มันดันใช้วิธีที่ไปเหมือนกับ Prototype, MooTools และ YUI นั้นดิ
ทำให้เวลาเอามาใช้ร่วมกันมันจะตีกันสนุกสนานเลยหล่ะ วิธีแก้ไขก็คือให้ jQuery หลีกทางให้กับตัวอื่น ๆ ซะ
จาก
- <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
- $(document).ready(function(){ $("div").hide(); });
- // ต้องใช้ Prototype/Mootools
- $('someid').style.display = 'none';
- </script>
ถ้าเป็นแบบนี้มันจะใช้งานไม่ได้ ครับ จะเกิดการตีกันระหว่างทั้ง 3 ตัวครับ เราต้องเปลี่ยนมาเป็น
- <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 ใช้ $(...) ได้ตามปกติ
- $('someid').style.display = 'none';
- </script>
แนวทางการแก้ปัญหาก็ ok นะ แต่ …..
ใน Drupal หล่ะ ถ้าเราเอามาใช้เนี่ยทำไง
โดยตัว Drupal 5.2 แล้วมี jQuery 1.0.1 ใส่มาด้วย แต่ปัญหาคือมันดันไม่มี noConflict มาให้ ตอนนั่งแก้ปัญหา นั่งงงไปพักนึง เลยไปนั่งไล่แกะ จนรู้ว่าต้องมา upgrade เป็น jQuery 1.2 เสียก่อน เลยจัดการเอามาใส่ทับลงไปใน /misc แทนตัวเก่า
แล้วทำการแก้ไขไฟล์ต่าง ๆ ที่ Drupal นั้นใช้ jQuery ซึ่งได้แก่
- misc/autocomplete.js
- misc/collapse.js
- misc/drupal.js
- misc/progress.js
- misc/tableselect.js
- misc/textarea.js
- misc/upload.js
- misc/update.js
- misc/farbtastic/farbtastic.js
โดยทำการ replace ‘$(‘ เป็น ‘jQuery(‘ แล้วทำการใส่ JavaScript ตัวนึงลงไปคือ
- jQuery.noConflict();
โดยเอาไปใส่ไว้ด้านล่าง Durpal $scripts ที่ Theme ของเรา ตามด้วยการใส่ mootools.js ไปก่อนหน้า Drupal $head
เฮ้อ ….. เล่นซะมึนไปครึ่งวัน
การมีมาตรฐานและเอามาใช้ร่วมกันนี่ยากเหมือนกันนะเนี่ย ยิ่ง JavaScript ที่มี Prototype หลายค่ายเหลือเกินยิ่งแล้วใหญ่ ความเข้ากันได้ยิ่งยากเข้าไปอีก แถมแต่ละตัวก็ ok ในเรื่องการใช้งาน แต่ว่าบางตัวมีข้อดีแต่ต่างกัน บางตัวใช้งานบางอย่างได้ดี และง่าย บางตัวทำแบบอีกตัวก็ได้ แต่ง่ายกว่ามาก เลยต้องหาจุดลงตัวของมันไป ทำให้ต้องมาปวดหัวกันไป แต่ก็นะเอามาใส่ลงไปในงานของเรา เพื่องานที่ออกมาดีที่สุด และง่ายที่สุดด้วย (ก็มีให้ใช้นิ)
อ้างอิงจาก