ตัวอย่างการสร้าง widget ครับ

ขั้นตอนที่ 1. สร้างไฟล์ /components/BreadCrumb.php

class BreadCrumb extends CWidget {
 
    public $crumbs = array();
    public $delimiter = ' / ';
 
    public function run() {
        $this->render('breadCrumb');
    }
 
}

ขั้นตอนที่ 2. สร้างไฟล์ /components/views/breadCrumb.php

   
        foreach($this->crumbs as $crumb) {
       if(isset($crumb['url'])) {
            echo CHtml::link($crumb['name'], $crumb['url']);
        } else {
            echo $crumb['name'];
        }
        if(next($this->crumbs)) {
            echo $this->delimiter;
        }
    }
    ?>

ขั้นตอนที่ 3. เวลานำไปใช้งาน

widget('application.components.BreadCrumb', array(
  'crumbs' => array(
    array('name' => 'หน้าหลัก', 'url' => array('site/index')),
    array('name' => 'เกี่ยวกับเรา'),
  ),
  'delimiter' => ' → ', // if you want to change it
)); ?>

อ้างอิง : http://www.yiiframework.com/wiki/23/

การประยุกต์ เช่น ถ้าต้องการทำลิ้งด้วยรูปภาพ แทนข้อความ วิธีการแก้ไขมีดังนี้


ในขั้นตอนที่ 2. เพิ่ม

   
        foreach($this->crumbs as $crumb) {

        if(isset($crumb['img']) && isset($crumb['url']) {

         // CHtml::image($img,$alt,$options);
         $imghtml=CHtml::image($crumb['img']),$crumb['url']);
         echo CHtml::link($imghtml, $crumb['url']);
         // ส่วนนี้ผมเอามาประยุกต์ทดลองใช้รูปและลิ้งครับ      

       }else if(isset($crumb['img'])) {

         echo CHtml::image($crumb['img']);
         // ส่วนนี้ผมเอามาประยุกต์ทดลองใช้รูปครับ      

       }else if(isset($crumb['url'])) {
    
            echo CHtml::link($crumb['name'], $crumb['url']);
        } else {
            echo $crumb['name'];
        }
        if(next($this->crumbs)) {
            echo $this->delimiter;
        }
    }
    ?>

เวลาใช้งาน

  $this->widget('application.components.BreadCrumb', array(
  'crumbs' => array(
    array('name' => 'Home', 'url' => array('site/index'), 'img'=> array('icon.png')),  
  //ผมเพิ่ม , 'img'=>'icon.png' สำหรับแสดงเป็นลิ้งด้วยรูป
    array('name' => 'Login'),
  ),
  'delimiter' => ' → ', // if you want to change it
));