вторник, 23 августа 2011 г.

CMenu – меню с иконками

Для выбора категорий товара я использую меню, которое отображается пользователям в правой колонке. Это виджет CMenu, который принимает список пунктов из функции All_shown(). Само меню генерируется в файле Z:\home\catalog.loc\www\protected\views\layouts\column2.php следующим образом:

echo "<div id=\"usermenu\">";
$this->beginWidget('zii.widgets.CPortlet', array(
'title'=>'Category',
));
$this->widget('zii.widgets.CMenu', array(
'items'=>Category::All_shown(),
'htmlOptions'=>array('class'=>'iconized' ),
));
$this->endWidget();                             
echo "</div><!-- usermenu-->";

Иконки выводятся в тег
    с классом iconized, его css свойства изменим чуть позже. А функция All_shown(), в файле модели Z:\home\catalog.loc\www\protected\models\Category.php
    /**
    * Returns all shown category.
    * —return all category where shown = yes
    */
    public static function All_shown()
    {
     
    $r[] =   array('label'=>'Show all', 'url'=>array('/assortiment'), 
    'active' => ((Yii::app()->controller->getId() == 
    'assortiment')and
    (!$_GET['category']) and (!$_GET['id'])),
    );      
    $models = Category::model()->findAll(
    array('order' => 'name',
    'condition' => 'shown = "yes"',
    )
    );
    foreach($models as $val)
    {
    $model = Assortiment::model()->findByPk((int)$_GET['id']);	
    $r[] =   array(
     'label'=>$val->name, 
     'url'=>array('/assortiment/index','category'=>$val->id),
     'active' => (($val->id == $model->category_id)or
    ($val->id == (int)$_GET['category'])),
    'linkOptions'=>array('style'=>'background-image:url('.Yii::app()->
    urlManager->baseUrl.'/images/category_img/'.$val->id.'_category.gif); 
    background-position: 0px 0px no-repeat; padding: 10px 0px 10px 55px;')
     );
    }  
    return $r;
    }
    В этой функции интерес представляет 'linkOptions'. Генерируется ссылка, с картинкой в виде css фона, а текст ссылки сдвинут на 55px. Выводится картинка, а потом текст ссылки. Картинки берутся из папки Z:\home\catalog.loc\www\images\category_img Чтобы это заработало, необходимо подправить главный файл стилей Z:\home\catalog.loc\www\css\main.css
    .iconized
    {
    	list-style-type: none;
    	margin: 0;
    	padding: 0;
    }
    
    .iconized li
    {
    	padding-bottom: 0px;
    }
    
    .iconized li a
    {
    	font: bold 12px Arial;
    	color: #0066A4;
    	display: block;
    	line-height: 15px;
    	text-decoration: none;
    	padding-top: 2px;
    	padding-right: 0;
    	padding-bottom: 0px;
    	padding-left: 55px;
    	background: no-repeat;
    	height: 35px;
    
    }
    
    .iconized li a:visited
    {
    	color: #0066A4;
    }
    
    .iconized li a:hover
    {
    	background: #80CFFF;
    	background: no-repeat;
    }
    Про такой метод я прочитал на форуме yiiframework в теме Иконки для ссылок в CMenu Чтобы загрузить картинку в нужную папку использую то же, что использовал для загрузки картинок к товарам.
    \\ Вывести картинку или картинку no_photo.gif 
    <? echo $this->category_image($model->id, $model->name, '50','my') ?>
    <?
    //Если файл картинки сужествует
    if(file_exists($_SERVER['DOCUMENT_ROOT'].
    Yii::app()->urlManager->baseUrl.
    '/images/category_img/'.$model->id.'_category.gif'))
    // Показать блок с чекбоксом Удалить картинку{
    echo '<div class="row">';
    echo $form->labelEx($model,'del_img'); 
    echo $form->checkBox($model,	'del_img' );   	
    echo '</div>';
    }
    ?>	 
    <? echo '<br />' ?>
    <?php echo CHtml::activeFileField($model, 'icon'); ?>
    Функция category_image() в файле Z:\home\catalog.loc\www\protected\controllers\CategoryController.php
    	/**
    	 * —return html image tag for category. No photo 
             * if image not exests
    	 * $id id of the category
    	 * $name name of category
    	 * $width width of image
    	 * $class class of image
    	 */
    public function category_image($id,$name, $width='50', 
    $class='category_img')
    {
    if(file_exists($_SERVER['DOCUMENT_ROOT'].
    Yii::app()->urlManager->baseUrl.
      '/images/category_img/'.$id.'_category.gif'))
    return CHtml::image(Yii::app()->urlManager->baseUrl.
    
    '/images/category_img/'.
    	   $id.'_category.gif',$name,
    array(
    'width'=>$width,
    'class'=>$class,
    ));
    else
    return CHtml::image(Yii::app()->urlManager->baseUrl.
    	   '/images/category_img/no_photo.gif','No photo',
    array(
    'width'=>$width,
    'class'=>$class
    ));
    }
    Обработки этой формы производится в действиях actionCreate() и actionUpdate() файла контроллера Z:\home\catalog.loc\www\protected\controllers\CategoryController.php
    	/**
    	 * Creates a new model.
    	 * If creation is successful, the browser will 
    	 * be redirected to the 'view' page.
    	 */
    public function actionCreate()
    {
    $model=new Category;
    
    // Uncomment the following line if AJAX validation is needed
    // $this->performAjaxValidation($model);
    if(isset($_POST['Category'])){
    $model->attributes=$_POST['Category'];
    $model->icon=CUploadedFile::getInstance($model,'icon');
    				
    if($model->save()){
                
    if ($model->icon){
    $file = './images/category_img/'.$model->id.'_category.gif';
    $model->icon->saveAs($file);
    }
    $this->redirect(array('view','id'=>$model->id)); 
    }
    }
    $this->render('create',array(
    'model'=>$model,
    ));
    }
    В отличии от картинок товаров, иконки меню не обрабатываются сервером, они должны быть подготовлены вручную и использоваться как есть.
    	/**
    	 * Updates a particular model.
    	 * If update is successful, the browser will be 
    	 * redirected to the 'view' page.
    	 * —param integer $id the ID of the model to be updated
    	 */
    public function actionUpdate($id)
    {
    
    		
    $model=$this->loadModel($id);
    
    if(isset($_POST['Category'])){
    $model->attributes=$_POST['Category'];
                
    $model->icon=CUploadedFile::getInstance($model,'icon');
    				
    if($model->save()){
    if($model->del_img)
    {
    if(file_exists('./images/category_img/'.$id.'_category.gif'))
    {
    unlink('./images/category_img/'.$id.'_category.gif');
    }
    }
                
    if ($model->icon){
    $file = './images/category_img/'.$model->id.'_category.gif';
    $model->icon->saveAs($file);
    }
    $this->redirect(array('view','id'=>$model->id)); 
    }
    }
    $this->render('update',array(
    'model'=>$model,
    ));
    }
    При удалении категории её картинка тоже должна удалиться: Действие Delete()
    if(file_exists('./images/category_img/'.$id.'_category.gif'))
    	{
    		unlink('./images/category_img/'.$id.'_category.gif');
            }

    Меню с картинками готово. Продолжение следует.

Комментариев нет:

Отправить комментарий