Posts Tagged with itemOptions

Displaying 1-2 of 2 results.
Wiki: Yii 1: Как задавать стили css (class, id) для CMenu, пунктов меню и ссылок в менюwiki
posted by admin on October 10, 2016
Часто хочется задать свои стили css, своё оформление для меню CMenu. Это сводится к добавлению классов и идентификаторов id в html (виджет Cmenu формирует ненумерованный список <ul>, <li>;). В Yii для этих целей предусмотрены htmlOptions, itemOptions, and linkOptions.
1. Добавление названий id и class к CMenu.
Используются id и htmlOptions для добавления своих идентификаторов и классов.

//in your view
$this->widget('zii.widgets.CMenu', array(
'id'=>'myMenu',
'items'=>$this->myMenu,
'htmlOptions'=>array('class'=>'span-24 last'),
'encodeLabel'=>false, // чтобы можно было в label использовать html-теги (жирность, наклон, цвет и т.д.)
));

Это сформирует следующий html:

<ul class="span-24 last" id="myMenu">
...
</ul>

2. Добавление названий классов (class names) к пунктам CMenu (CMenu items) и ссылкам в пунктах меню (CMenu item links).
Используем itemOptions и linkOptions. Например:

//in your controller
$this->myMenu = array(
'id'=>'myMenu',
'items'=>array(
array(
'label'=>'Home',
'url'=>array('site/index'),
'itemOptions'=>array('class'=>'visited'),
'linkOptions'=>array('class'=>'bar'),
),
array('label'=>'Sign Out', 'url'=>array('site/signout')),
),
);

Эти команды позволят Yii сгенерировать следующий кусочек меню:

...
<ul id="myMenu">
<li class="visited">
<a class="bar" href="/site/index">Home</a>
</li>
...

Установив таким образом идентификаторы и классы в шаблоне html, далее расписывайте в файле стилей .css соответствующее оформление для них.Read more
Wiki: Yii 1.1: Add id or class to CMenu itemswiki
posted by admin on April 12, 2016
CMenu comes with a lot of great customization options built in. One of the most used is the class 'active' being added to menu item. But, what if you want to add your own class or id to a menu item ?

It's very easy, you just need to use the 'itemOptions'.

If you want a menu like :

<ul id="myMenu">
<li id="first"><a href="#"><span>First</span></a></li>
<li id="second"><a href="#"><span>Second</span></a></li>
</ul>


Just do :

<?php $this->widget('application.components.MyMenu', array(
'id' => 'myMenu',
'items' => array(
array('label' => 'First', 'url' => array('#'), 'itemOptions'=>array('id' => 'first'), ),
array('label' => 'First', 'url' => array('#'), 'itemOptions'=>array('id' => 'second'), ),
),
));
?>
Read more