[Joomla 2.5] การทำ Popup Modal ส่วน Admin


แชร์ ความรู้ในการ พัฒนา Joomla Component Extension Module Plugin

Moderators: mindphp, ผู้ดูแลกระดาน

User avatar
tsukasaz
PHP VIP Members
PHP VIP Members
Posts: 10601
Joined: 18/04/2012 9:39 am

[Joomla 2.5] การทำ Popup Modal ส่วน Admin

Post by tsukasaz » 12/11/2012 6:32 pm

การทำ Popup Modal ส่วน Admin
[Joomla 2.5] การทำ Popup Modal ส่วน Admin 1.JPG
ตัวอย่าง Popup Modal
1.JPG (20.33 KiB) Viewed 619 times
ตัวอย่างดังภาพด้านบน ซึ่งลักษณะการทำงานจะเป็นปุ่มให้ผู้ใช้คลิกแล้วจะปรากฎเป็น Popup ขึ้นมา

ตัวอย่างโค้ด
สร้าง function ไว้ในไฟล์ view.html.php สำหรับเรียกใช้งาน Modal

Code: Select all

function getModalButtonObject ($name, $text, $link, $width = 400, $height = 300) {
        /*
        กำหนดพารามิเตอร์
        $name เป็นชื่อที่ใช้อ้างอิงตัว Object ของ Modal
        $text เป็นข้อความที่ใช้แสดงบนปุ่ม
        $link เป็น url ที่ตัว Modal จะไปเรียกข้อมูลมาแสดงบน Popup
        $width กำหนดความกว้างของ Popup ในตัวอย่างตั้ง default ไว้ที่ 400
        $height กำหนดความสูงของ Popup ในตัวอย่างตั้ง default ไว้ที่ 300
        */

        JHTML::_('behavior.modal', "a.{$name}");
        /*
        การใช้งาน Popup Modal จำเป็นต้องเรียกใช้ JHTML::_('behavior.modal'); ทุกครั้ง
        ส่วน "a.{$name}" เป็นการกำหนดการใช้งาน Modal ที่ tag <a> 
        และ class คือ ชื่อเดียวกับตัวแปร $name
        */

        $buttonMap = new JObject();   // สร้าง JObject สำหรับเก็บค่าต่างๆ 
        $buttonMap->set('modal', true); // กำหนดการใช้งาน Modal เป็น true
        $buttonMap->set('text', $text ); // กำหนดข้อความที่แสดงบนปุ่ม
        $buttonMap->set('modalname', $name); // กำหนดชื่อของ Modal
        $buttonMap->set('options', "{handler: 'iframe', size: {x: ".$width.", y: ".$height."}}");
        // options อันนี้กำหนด Popup เป็นลักษณะ iframe และกำหนดความกว้าง และ ความสูง
        $buttonMap->set('link', $link); // กำหนด url เมื่อคลิกที่ปุ่ม Modal
        return $buttonMap;
}
 
เมื่อสร้าง function getModalButtonObject เสร็จแล้ว ก็จะเรียกใช้งานใน function display

Code: Select all

function display($tpl = null) {
        $this->buttonModal = $this->getModalButtonObject(
                                           'add_keyword', 
                                           JText::_('JTCONTENT_ADD_KEYWORDS'), 
                                           'index.php?option=com_msearch&c=content&task=view&layout=modal_keywords&tmpl=component&'.JSession::getFormToken().'=1'
                                        );
        /*
        เรียกใช้ function getModalButtonObject และ ส่ง Object เก็บไว้ที่ตัวแปล this->buttonModal 
        ใน url กำหนด layout ที่จะนำมาแสดงใน Popup
        กำหนด tmpl ต้องเป็น component
        และใช้ JSession::getFormToken() ในการเช็ค Token
        */
        parent::display($tpl);
}
 
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)

User avatar
tsukasaz
PHP VIP Members
PHP VIP Members
Posts: 10601
Joined: 18/04/2012 9:39 am

Re: [Joomla 2.5] การทำ Popup Modal ส่วน Admin

Post by tsukasaz » 13/11/2012 10:40 am

ต่อมาในไฟล์ default.php จะใช้โค้ด

Code: Select all

<script>
/*
function addKeyWords อันนี้ใช้สำหรับเป็นตัวรับค่าจาก Popup มายัง window ที่เป็น parent
*/
function addKeyWords(words) {
    jQuery('#new_keywords').append(word); 
    // เพิ่มข้อความในตัวแปร word เข้าไปใน div id keywords
    SqueezeBox.close(); // คำสั่งปิด Popup
}
</script>

<!--tag div เตรียมไว้สำหรับรับค่าจาก popup-->
<div id="new_keywords"></div>

<!--กำหนด attribute ต่างๆ ให้ tag <a> ซึ่งในโค้ดด้านล่างจะเป็นลิ้งให้กด เพื่อเรียกใช้งาน Modal-->
<a id="<?php echo $buttonMap->modalname; ?>" class="<?php echo $buttonMap->modalname; ?>" href="<?php echo $buttonMap->link; ?>" rel="<?php echo $buttonMap->options; ?>">
     <?php echo $buttonMap->text; ?>
</a>
สุดท้ายไฟล์ modal_keyword.php เป็นไฟล์ที่ใช้แสดงเนื้อหาในตัว Popup

Code: Select all

<?php
defined('_JEXEC') or die; // ป้องกันการเปิดไฟล์โดยตรง

if (JFactory::getApplication()->isSite()) {
     // check Token
     JSession::checkToken('get') or die(JText::_('JINVALID_TOKEN'));
}

$function    = JRequest::getCmd('function', 'addKeyWords');
// function ที่จะเรียกใช้งานใน window parent
?>

Code: Select all

<script>
jQuery(document).ready(function() {
     /*
     การทำงานของ script เมื่อคลิกที่ button id msave 
     ให้เอาค่าของ input id key ไปเก็บไว้ที่ตัวแปร word
     และถ้ามี window ที่เป็น parent อยู่ ให้เรียกใช้งาน function และส่งค่า word ใส่ลงไป
     */
     jQuery('#msave').click(function() {
          var word = jQuery('#key').val();
          if (window.parent) window.parent.<?php echo $this->escape($function);?>(word );
     });
});
</script>
<input type='text' name="key" id="key" size="30" />
<input id="msave" type='button' value='Save'>
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)

Post Reply

Return to “Joomla Developing Knowledge”

Users browsing this forum: No registered users and 2 guests