SqueezeBox หลายคนคงไม่คุ้นเคยเท่าใดนักโดยเฉพาะนักพัฒนามือใหม่ แต่หากพูดถึง JHTML::_('behavior.modal') หลายๆคนอาจจะร้องอ๋อ ใช่แล้วครับมันคือ JavaScript ที่ใช้สร้าง Popup Window บน Joomla! 1.5 นั่นเองครับ

ตัว SqueezeBox คือส่วนขยายของ Mootools ที่ Joomla! มีมาให้สำหรับใช้ในการทำ Window Popup ซึ่งในส่วนของ Backend ต่างๆ จะมีการใช้งานค่อนข้างมากโดยปกติผู้เขียนจะใช้งานค่อนข้างบ่อยโดยใช้ผ่าน IFRAME HANDLER ซึ่งเราสามารถดึง content มาแสดงได้โดยตรง สำหรับการใช้งานใน Joomla จะเรียกใช้ผ่าน function JHTML::_('behavior.modal') 

1. การปิด Popup Window โดยใช้ JavaScript Code สามารถทำได้โดยการเขียน JavaScript ไว้ใน JavaScript ที่เราจะ load ใน SqueezeBox ถ้าเราเรียกตัว Window ที่เปิด popup ว่า Opener (Parent) และเรียกตัว popup ว่า Poup ตัว JavaScript นี้ก็คืออยู่ใน code ของ Popup ดังนี้

   window.parent.document.getElementById('sbox-window').close();

   เนื่องจาก SqueezeBox จะสร้างตัว DIV ขึ้นมาเป็น window หลักโดยใช้ ID ชื่อ sbox-window นั่นเอง
2. การเรียกใช้ function ใน parent window หรือ window ที่ load ตัว SqueezeBox popup จาก ตัว Popup Window สามารถทำได้โดยการอ้างถึง window.parent ก่อน ดังนี้

   window.parent.changeUserId(selected_user_id);

   โดย changeUserId(..) เป็น JavaScript function บน parent window ครับ
3. การป้องกันไม่ให้ปิด Popup Window เมื่อผู้ใช้ Click นอกพื้นที่ของ Window เนื่องจากในตัว SqueezeBox จะกำหนดค่า option ตัวหนึ่งซึ่งใช้สำหรับกรณีนี้โดยเฉพาะคือ closeWithOverlay เป็น true เราแค่กำหนดค่า option นี้เป็น false ก็เรียบร้อยครับ

   $popupAttribs = array("class"=>"modal", "rel"=>"{handler:'iframe', closeWithOverlay:false}");

   หลังจากนั้นก็เรียกใช้ โดยเราจะกำหนด tmpl=component ใน url ที่จะเรียกใช้บน modal window เพื่อให้ Joomla ใช้ component template แทน Site template โดยจะตัดส่วนของ Module Position ต่างๆ ออกไป ดังนี้  

   echo JHTML::link('index.php?option=com_payment&tmpl=component&task=employees', 'change', $popupAttribs);

   อย่าลืมนะครับว่าเราต้อง load ตัว JavaScript พร้อมกับกำหนด option ด้วย function นี้คือ

   JHTML::_('behavior.modal', 'a.modal');

   ซึ่งเป็นการระบุว่าเราจะให้ Anchore ที่มี class ชื่อ modal สามารถกด popup ได้
4. การเรียกใช้โดยผ่าน JavaScript นอกจากการเรียกใช้ผ่าน Joomla! API คือ JHTML แล้วเราสามารถเรียกผ่าน JavaScript ก็ได้นะครับ ส่วนมากก็เนื่องจากก็ที่ Url ที่ใช้เรียกไม่แน่นอน ขึ้นอยู่กับ Input ของ User ในขณะนั้นๆ ครับ เช่นการที่ User ทำการเปลี่ยนหน่วยงานโดยการเลือกจาก Select List ซึ่งเก็บค่า unit_id ไว้เมื่อ User ต้องการเลือกพนักงานจากรายชื่อในหน่วยงานนั้นๆ ก็ต้องพึ่งการ Load จาก JavaScript ครับ ตัวอย่างครับ

       function submit(task)
       {
           form = window.frames['unitroleframe'].document.getElementById('unitrole-form');
           var checkedcount = parseInt(form.boxchecked.value);
           //[].contains resides in mootools Array.js
           if ( (['unitrole.edit', 'unitrole.move'].contains(task)) && (checkedcount <= 0) )
           {
               alert("Please select at least one item for this task, "+ task);
               return false;
           }
           
           var s = window.frames['unitroleframe'].makeQueryString();
           var url = '<?php echo JURI::base().'index.php?option=com_hrms&tmpl=component&task='?>'+task+'&'+s;
           SqueezeBox.fromElement(url, {handler:'iframe', closeWithOverlay:false, size:{x:800,y:500}});   
       }

 ครับ การนำเสนอในส่วนของ SqueezeBox ก็คิดว่าน่าจะครอบคลุมแล้วนะครับ สำหรับการใช้งานในส่วนของ options ต่างๆ สามารถดูได้จาก source code ใน /media/system/js/modal.js ตัวที่ใช้บ่อยๆ ก็คือ size ครับสำหรับกำหนดขนาดของ Window โดยอยู่ในรูปแบบ size: {x: 500, y:400} ครับ x คือความกว้างและ y คือความสูงครับ อ๋อ อย่าลืมนะครับว่า SqueezeBox สำหรับ Joomla! 1.5 (1.5.15 สำหรับตอนที่เขียน) คือ 1.0rc1 แต่บน Internet จะเป็น 1.1 แล้วมันแตกต่างกันนะครับ เพราะฉะนั้นเวลาอ่านบทความก็ต้องตรวจสอบด้วยครับ