用Yii框架创建一个幻灯片部件

Yii框架对于前台页面的组织引入了Widget的概念，

从设计上而言就是一个个相对独立的窗口部件，读取、组织数据并展示于页面的局部区域，比如幻灯片，搜索，登录栏等等。

下文以创建一个幻灯片部件为例，简要介绍如何创建这样一个Widget。

1、创建Widget

在protected目录下有一个components子目录，这里就是用来放置Widgets的。

如果你有模块，那么相应于该模块的Widgets应该放在该模块根目录的components下面。本文是后面一种情况。

实现了一个Gallery模块，因此Widget应该创建在.../Gallery/components下面。

<?php
Yii::import('Gallery.models.Gallery');
class SliderWidget extends YWidget
{
    public $GalleryId = 1;
    
    public function run() {
        $gallery = $this->findGallery();
        if (empty($gallery)){
            return '';
        }

        return $this->render('AutoSlider', array(
                                        'gallery' => $gallery,
                                        ));
    }
    
    private function findGallery() {
        return Gallery::model()->findById($this->GalleryId);
    }
}

2、创建AutoSlider视图

在.../Gallery/components/views下面新建一个视图文件AutoSlider.php

<div class="wapper">        
        <div id="slider" class="slider">
               <?php
		    	  $images = unserialize($gallery->Images);
		    	  if (is_array($images)){
                               $i=0;
                               foreach($images as $image){
                                  $img = YOUR_GALLERY_FOLDER.'/'.$image;
                                  $ret = '<div style="opacity: 1;" class="'.$i>0?'">':'current"';
                                  $ret .= '<img src="'.Yii::app()->request->baseUrl.'/'.$img.'" alt="">';
                                  $ret .= '</div>';
		            	  $i++;
                                  echo $ret;
                               }   }?>        </div>
</div>
<script type="text/javascript">
function slideSwitch() {
    var $current = $("#slider div.current");
    if ( $current.length == 0 ) $current = $("#slider div:last");
    var $next =  $current.next().length ? $current.next() : $("#slider div:first");
    $current.addClass('prev');
    
    $next.css({opacity: 0.0}).addClass("current").animate({opacity: 1.0}, 1000, function() {
            $current.removeClass("current prev");
        });
}

$(function() {
    $("#slideshow span").css({"opacity":"0.7","display":"block"});
    $(".current").css("opacity","1.0");

    setInterval( "slideSwitch()", 3000 ); //3s
});
</script>

css略。

iefreer