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

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

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

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

1、创建Widget

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

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

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

<?phpYii::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