Mootools

mootools Offline Document (.CHM)

สำหรับใครที่ใช้ mootools นี่คงไม่อยากนั่ง online เพื่อดู document ของมันเท่าไหร่ มีคนใน forum mootools ทำ chm file ไว้ให้ที่นี่ ผมเลยโหลดมา แล้วเอามาใส่ใน Server ผมแทนแล้วกัน โหลดได้ที่นี่ครับ ขนาดไม่ใหญ่มาก

เมื่อ jQuery อยู่ร่วมโลกกับ Prototype/Mootools ไม่ได้ (โดยเฉพาะใน Drupal)

ถ้าใครใช้ jQuery, Prototype และ Mootools นั้นจะรู้ว่ามี namespace ตัวนึงคือ $ ซึ่งจะเป็นตัวอ้างอิงเสมือนเวลาอ้างอิงการทำงานใด ๆ ใน ถ้าอ่านในเว็บ jQuery ก็จะบอกไว้เลยว่า

By default, jQuery uses “$” as a shortcut for “jQuery”

ปัญหาก็คือ …..

มันดันใช้วิธีที่ไปเหมือนกับ Prototype, MooTools และ YUI นั้นดิ

ทำให้เวลาเอามาใช้ร่วมกันมันจะตีกันสนุกสนานเลยหล่ะ วิธีแก้ไขก็คือให้ jQuery หลีกทางให้กับตัวอื่น ๆ ซะ

จาก

< View plain text >
code

  1. <script type="text/javascript" src="prototype.js" />
  2. <script type="text/javascript" src="mootools.js" />
  3. <script type="text/javascript" src="jquery.js" />
  4. <script type="text/javascript">
  5. // ต้องใช้ jQuery
  6. $(document).ready(function(){ $("div").hide(); });
  7. // ต้องใช้ Prototype/Mootools
  8. $('someid').style.display = 'none';
  9. </script>

ถ้าเป็นแบบนี้มันจะใช้งานไม่ได้ ครับ จะเกิดการตีกันระหว่างทั้ง 3 ตัวครับ เราต้องเปลี่ยนมาเป็น

< View plain text >
code

  1. <script type="text/javascript" src="prototype.js" />
  2. <script type="text/javascript" src="mootools.js" />
  3. <script type="text/javascript" src="jquery.js" />
  4. <script type="text/javascript">
  5. // เพิ่มบรรทัดนี้ลงไป
  6. jQuery.noConflict();
  7. // แล้วใช้ jQuery จาก $ เป็น jQuery(...) แทน
  8. jQuery(document).ready(function(){jQuery("div").hide();});
  9. // ส่วน Prototype/Mootools ใช้ $(...) ได้ตามปกติ
  10. $('someid').style.display = 'none';
  11. </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 ตัวนึงลงไปคือ

< View plain text >
code

  1. jQuery.noConflict();

โดยเอาไปใส่ไว้ด้านล่าง Durpal $scripts ที่ Theme ของเรา ตามด้วยการใส่ mootools.js ไปก่อนหน้า Drupal $head

เฮ้อ ….. เล่นซะมึนไปครึ่งวัน

การมีมาตรฐานและเอามาใช้ร่วมกันนี่ยากเหมือนกันนะเนี่ย ยิ่ง JavaScript ที่มี Prototype หลายค่ายเหลือเกินยิ่งแล้วใหญ่ ความเข้ากันได้ยิ่งยากเข้าไปอีก แถมแต่ละตัวก็ ok ในเรื่องการใช้งาน แต่ว่าบางตัวมีข้อดีแต่ต่างกัน บางตัวใช้งานบางอย่างได้ดี และง่าย บางตัวทำแบบอีกตัวก็ได้ แต่ง่ายกว่ามาก เลยต้องหาจุดลงตัวของมันไป ทำให้ต้องมาปวดหัวกันไป แต่ก็นะเอามาใส่ลงไปในงานของเรา เพื่องานที่ออกมาดีที่สุด และง่ายที่สุดด้วย (ก็มีให้ใช้นิ)

อ้างอิงจาก