CMenu customizzato

paskuale · January 7, 2012, 10:36am

Ciao a tutti finalmente (grazie a tutti voi) inizio a divertirmi davvero con Yii

Alla fine (dopo una esaustiva spiegazione da parte di sensoriario circa i widget) ho deciso che per una index.php pluricomposita l’ideale è inzepparla di widgets

Sono alle prese con il zii.widgets.CMenu e dopo aver letto nei dettagli la classe sono riuscito ad adattare il tutto al menù del mio template (img allegata).

Solo che non capisco perchè non mi tenga la proprietà “active” dell’item selezionato.

In realtà il mio template riconosce l’item selezionato come ‘current’, e quindi ho personalizzato il widget con

…

‘activeCssClass’=>‘current’,

grazie

janka74 · January 7, 2012, 1:56pm

Dall’allegato sembra tu stia facendo un buon lavoro.

Perché non posti un pò il codice di questo primo lavoro?

Così vediamo come aiutarti e magari imparare qualcosa.

paskuale · January 7, 2012, 6:13pm

Ci mancherebbe, hai fatto bene a dirlo nella foga del divertimento e dall’orario (04:00 A.M.) non ho approfondito l’argomento.

Allora premesso che la mia intenzione è tenere tutto il più possibile sotto una unica view, e per questo potrei cavarmela con una serie di widget (personalizzati e non).

Ho acquistato un template molto carino che prevede un menù superiore orizzontale con relative sotto.voci (come si vede nell’immagine).

Dato che stavo testando il concetto di widget ho pensato bene di riprendere il widget del menù già presente nel file /protected/views/layouts/main.php ed adattarlo al menù previsto dal template acquistato.

L’esperimento è riuscito perchè la struttura è quella di <ul><li> annidati

posto qui la struttura originale:


<!-- Main nav -->

	<nav id="main-nav">

		

		<ul class="container_12">

			<li class="home current"><a href="#" title="Home">Home</a>

				<ul>

					<li class="current"><a href="#" title="Dashboard">Dashboard</a></li>

					<li><a href="#" title="My profile">My profile</a></li>

					<li class="with-menu"><a href="#" title="My settings">My settings</a>

						<div class="menu">

							<img src="images/menu-open-arrow.png" width="16" height="16">

							<ul>

								<li class="icon_address"><a href="#">Browse by</a>

									<ul>

										<li class="icon_blog"><a href="#">Blog</a>

											<ul>

												<li class="icon_alarm"><a href="#">Recents</a>

													<ul>

														<li class="icon_building"><a href="#">Corporate blog</a></li>

														<li class="icon_newspaper"><a href="#">Press blog</a></li>

													</ul>

												</li>

												<li class="icon_building"><a href="#">Corporate blog</a></li>

												<li class="icon_computer"><a href="#">Support blog</a></li>

												<li class="icon_search"><a href="#">Search...</a></li>

											</ul>

										</li>

										<li class="icon_server"><a href="#">Website</a></li>

										<li class="icon_network"><a href="#">Domain</a></li>

									</ul>

								</li>

								<li class="icon_export"><a href="#">Export</a>

									<ul>

										<li class="icon_doc_excel"><a href="#">Excel</a></li>

										<li class="icon_doc_csv"><a href="#">CSV</a></li>

										<li class="icon_doc_pdf"><a href="#">PDF</a></li>

										<li class="icon_doc_image"><a href="#">Image</a></li>

										<li class="icon_doc_web"><a href="#">Html</a></li>

									</ul>

								</li>

								<li class="sep"></li>

								<li class="icon_refresh"><a href="#">Reload</a></li>

								<li class="icon_reset">Reset</li>

								<li class="icon_search"><a href="#">Search</a></li>

								<li class="sep"></li>

								<li class="icon_terminal"><a href="#">Custom request</a></li>

								<li class="icon_battery"><a href="#">Stats server load</a></li>

							</ul>

						</div>

					</li>

				</ul>

			</li>

			<li class="write"><a href="#" title="Write">Write</a>

				<ul>

					<li><a href="#" title="Articles">Articles</a></li>

					<li><a href="#" title="Add article">Add article</a></li>

					<li><a href="#" title="Posts">Posts</a></li>

					<li><a href="#" title="Add post">Add post</a></li>

				</ul>

			</li>

			<li class="comments"><a href="#" title="Comments">Comments</a>

				<ul>

					<li><a href="#" title="Manage">Manage</a></li>

					<li><a href="#" title="Spams">Spams</a></li>

				</ul>

			</li>

			<li class="medias"><a href="#" title="Medias">Medias</a>

				<ul>

					<li><a href="#" title="Browse">Browse</a></li>

					<li><a href="#" title="Add file">Add file</a></li>

					<li><a href="#" title="Manage">Manage</a></li>

					<li><a href="#" title="Settings">Settings</a></li>

				</ul>

			</li>

			<li class="users"><a href="#" title="Users">Users</a>

				<ul>

					<li><a href="#" title="Browse">List</a></li>

					<li><a href="#" title="Add user">Add user</a></li>

					<li><a href="#" title="Settings">Settings</a></li>

				</ul>

			</li>

			<li class="stats"><a href="#" title="Stats">Stats</a></li>

			<li class="settings"><a href="#" title="Settings">Settings</a></li>

			<li class="backup"><a href="#" title="Backup">Backup</a></li>

		</ul>

	</nav>

<!-- End main nav -->

nello stesso file ho commentato tutto l’html che vedete sopra e ho aggiunto queste righe (risparmio di spazio notevole)


<!-- Main nav -->

	<nav id="main-nav">

	<?php $this->widget('zii.widgets.CMenu',array(

			'htmlOptions'=>array('class'=>'container_12'),

			'activeCssClass'=>'current',

			'items'=>array

			(

				array('label'=>'Home', 'url'=>array('/site/index'),'itemOptions'=>array('class'=>'home'),

				'items'=>array

					(

						array('label'=>'Dashboard','url'=>array('/site/dashboard'),'itemOptions'=>array('class'=>'current'),'linkOptions'=>array('title'=>'dashboard')),

						array('label'=>'My profile','url'=>array('/site/myprofile'),'linkOptions'=>array('title'=>'My profile')),

						array

						(

						 'label'=>'My settings',

						 'url'=>array('/site/mysettings'),

						 'itemOptions'=>array('class'=>'with-menu'),

						 'linkOptions'=>array('title'=>'Mysettings'),

						 'template'=>'{menu}<div class="menu"><img src="'.Yii::app()->theme->baseUrl.'/images/menu-open-arrow.png" width="16" height="16">',

						  'items'=>array

						  (

						   array('label'=>'Browse by','url'=>array('/site/browseby'),'itemOptions'=>array('class'=>'icon_address'),

							 'items'=>array

							 (

								array('label'=>'Blog','url'=>array('/site/blog'),'itemOptions'=>array('class'=>'icon_blog'),'linkOptions'=>array('title'=>'My blog'),

								'items'=>array

								(

									array('label'=>'Recents','url'=>array('/site/recents'),'itemOptions'=>array('class'=>'icon_alarm'),

									'items'=>array

									(

										array('label'=>'Corporate blog','url'=>array('/site/corporateblog'),'itemOptions'=>array('class'=>'icon_building'),'linkOptions'=>array('title'=>'Corporate blog')),

										array('label'=>'Press blog','url'=>array('/site/pressblog'),'itemOptions'=>array('class'=>'icon_newspaper'),'linkOptions'=>array('title'=>'Corporate blog')),

									)),

									

									array('label'=>'Corporate blog','url'=>array('/site/recents'),'itemOptions'=>array('class'=>'icon_building')),

									array('label'=>'Support blog','url'=>array('/site/recents'),'itemOptions'=>array('class'=>'icon_computer')),

									array('label'=>'Search...','url'=>array('/site/recents'),'itemOptions'=>array('class'=>'icon_search')),

								)),

								array('label'=>'Website','url'=>array('/site/blog'),'itemOptions'=>array('class'=>'icon_server')),

								array('label'=>'Domain','url'=>array('/site/blog'),'itemOptions'=>array('class'=>'icon_network')),

							 ),

						  ),

							 

						   array('label'=>'Export','url'=>array('/site/browseby'),'itemOptions'=>array('class'=>'icon_export'),

							 'items'=>array

							 (

								array('label'=>'Excel','url'=>array('/site/browseby'),'itemOptions'=>array('class'=>'icon_doc_excel')),

								array('label'=>'CSV','url'=>array('/site/browseby'),'itemOptions'=>array('class'=>'icon_doc_csv')),

								array('label'=>'PDF','url'=>array('/site/browseby'),'itemOptions'=>array('class'=>'icon_doc_pdf')),

								array('label'=>'Image','url'=>array('/site/browseby'),'itemOptions'=>array('class'=>'icon_doc_image')),

								array('label'=>'Html','url'=>array('/site/browseby'),'itemOptions'=>array('class'=>'icon_doc_web')),

							 

							 ),

						  

							),

						    

						   array('label'=>'&nbsp;','url'=>array('#'),'itemOptions'=>array('class'=>'sep')),

						   array('label'=>'Reload','url'=>array('/site/reload'),'itemOptions'=>array('class'=>'icon_refresh')),

						   array('label'=>'Reset','url'=>array('/site/reload'),'itemOptions'=>array('class'=>'icon_reset')),

						   array('label'=>'Search','url'=>array('/site/reload'),'itemOptions'=>array('class'=>'icon_search')),

						   array('label'=>'&nbsp;','url'=>array('#'),'itemOptions'=>array('class'=>'sep')),

						   array('label'=>'Custom request','url'=>array('/site/reload'),'itemOptions'=>array('class'=>'icon_terminal')),

						   array('label'=>'Stats server load','url'=>array('/site/reload'),'itemOptions'=>array('class'=>'icon_battery')),

						  )),

					)

				),

				array('label'=>'Write', 'url'=>array('/site/page'),'itemOptions'=>array('class'=>'write')),

				array('label'=>'Comments', 'url'=>array('/site/comments'),'itemOptions'=>array('class'=>'comments')),

				array('label'=>'Medias', 'url'=>array('/site/medias'),'itemOptions'=>array('class'=>'medias')),

				array('label'=>'Users', 'url'=>array('/site/users'),'itemOptions'=>array('class'=>'users')),

				array('label'=>'Stats', 'url'=>array('/site/stats'),'itemOptions'=>array('class'=>'stats')),

				array('label'=>'Settings', 'url'=>array('/site/settings'),'itemOptions'=>array('class'=>'settings')),

				array('label'=>'Backup', 'url'=>array('/site/backup'),'itemOptions'=>array('class'=>'backup')),

			),	

	)); ?>

	</nav>

	<!-- End main nav -->

… et voilà stesso risultato grazie al widget zii.widgets.CMenu

è chiaro che al momento sono fermo al primo livello di voci (items) ma la classe prevede un ulteriore array di array (per i sotto.menù)

semplicemente straordinario I like Yii !

p.s.

un ringraziamento và a sensorario (x il widget pasquale.Pasquale)

janka74 · January 7, 2012, 6:31pm

Eh ho notato che sia tu che pecora nera vi state proprio intrigando con yii, pure il sabato a postare…

Io non faccio testo perché mi ero già intrippato 2 settimane fa

Questo tuo esperimento è molto interessante. Ma su che sito l’hai trovato quel bel template?

E come hai fatto per adattarlo a yii.

Hai creato una directory dedicata al tuo tema, oppure hai sovrascritto i files classici di yii?

paskuale · January 7, 2012, 9:16pm

Ciao Giancarlo in realtà x il template ho seguito 1 dei tanti indizi qui sul forum che consigliava di scaricarsene uno e fare la copia esatta della cartella x rendere meglio l’idea.

Io ho scaricato un template a caso e poi i son reso conto di come dev’essere una cartella template e cioè così:

1-creare nuova cartella: /themes/nomeDelTemplate

2- poi creare all’interno :

[b]/themes/nomeDelTemplate/views

/themes/nomeDelTemplate/views/layout

/themes/nomeDelTemplate/views/site

/themes/nomeDelTemplate/views/system[/b]

e dentro /themes/nomeDelTemplate/layout/main.php

il resto è tutto quello che fà parte del template che ho acquistato(css, js, images,e quant’altro relativo al mio template)

posto uno screenshot della struttura che faccio prima

(la parte viola è tutto materiale del template)

e uno del risultato finale del menu multilivello.

buon sabato notte a tutti

paskuale · January 8, 2012, 1:52pm

Aggiungo queste due righe per le 2ore passate a capire come funzionasse questa prorpietà ‘template’ dell’item di CMenu.

Se nella struttura di <UL><LI></LI></UL> dovesse capitarvi qualche dom extra (es. un <div>, un <img>) non spaventatevi.

Vi basterà precisare all’item, la proprietà ‘template’

Si usa così:


array

(

'label'=>'My settings',

'url'=>array('/site/mysettings'),

'itemOptions'=>array('class'=>'with-menu'),

'linkOptions'=>array('title'=>'Mysettings'),

'template'=>'{menu}<div class="menu"><img src="/images/menu-open-arrow.png" width="16" height="16">',

.

.

praticamente il segnaposto {menu} si riferisce alla voce che in quel momento state definendo come menù (<ul><li></li></ul>) quello che viene dopo verrà iniettato nella struttura così da rispettare l’originale.

Se avete dubbi sul dove vada a posizionare l’html aggiuntivo fate pure delle prove, scrutando l’html con firebug.