Italian
English
blog

Blog e News:

blog

Ven 05, settembre 2008

frogCambiare il layout delle Dialog YUI by Danilo Bonardi

YUI è uno dei framework ajax / javascript più completi tra quelli disponibili, dispone di componenti grafici molto utili per ogni web application. I componenti hanno una grafica molto accattivante e si adattano molto bene ad applicazioni come linkedIn, ma sono difficilmente customizzabili senza sapere qualcosa delle classi css utilizzate.

Per alcuni nostri progetti abbiamo avuto la necessità di adattare le Dialog YUI ai nostri design web. In questo articolo descrivero come modificarne il layout tramite i CSS. Negli esempi a seguire farò sempre riferimento a YUI 2.5.2.

Le Dialog YUI hanno molte features interessanti. Graficamente dispongono di un tasto di uscità, c'è la possibilità di renderle modali oscurando la parte sottostante della pagina e dispongono di una funzionalità di Drag & Drop molto utile. Per la parte di programmazzione sono estremamente versatili, specialmente per quel che riguarda AJAX.

Come primo passo creo la parte html di una semplice dialog. 

    <script type="text/javascript">
       YAHOO.util.Event.onDOMReady(demoDialog);
    </script>
    <a href="javascript:null(0)" id="showDemoDialog"></a>

    <div id="demoDialog" class="demoDialog" >
	    <div class="hd">Welcome!</div>
	    <div class="bd">
            <h3>Welcome</h3>
	    </div>
       	<div class="ft">
            <b>by Shiny Frog</b>
        </div>
    </div>

Tramite YUI creo la dialog vera e propria (dialog.js). 

YAHOO.namespace("demodialog");

function demoDialog() {
	var dialogId = 'demoDialog';
	var showId   = 'showDemoDialog';

	YAHOO.demodialog.dialog = new YAHOO.widget.Dialog(dialogId, 
		{ fixedcenter : true,
		  visible 	  : false,
		  width		  : "230px",
		  height 	  : "130px",
		  modal	      : true,
		  constraintoviewport : true,
		  effect	  : [ 
			{ effect:YAHOO.widget.ContainerEffect.FADE,duration:0.5 },
			{ effect:YAHOO.widget.ContainerEffect.SLIDE,duration:0.5} ]
		});
	
	YAHOO.demodialog.dialog.render();
	YAHOO.util.Event.addListener(showId, "click", 
			YAHOO.demodialog.dialog.show,YAHOO.demodialog.dialog, true);
}

A questo punto quello che si presenta è la classica dialog YUI.
yui dialog javascript ajax
Ridefinendo alcune classi CSS è possibile Togliere le immagini in background, i colori di sfondo e tutto quello che vorremo in un futuro ridefinire della dialog. 

.yui-skin-sam .yui-dialog {
	background-image: none;
    background-color: transparent;
	border: 1px solid black;
}

.yui-skin-sam .yui-panel {
	border: none;
}
            
.yui-skin-sam .yui-dialog .hd {
	border: none;
    background-image: none;
	background-color: transparent;
}

.yui-skin-sam .yui-dialog .bd { 
	border: none;
	background-color: transparent;    
}

.yui-skin-sam .yui-dialog .ft {
    background-image: none;
	background-color: transparent;
    border: none;
}

Il risultato è una dialog spoglia di ogni dettaglio. Partendo da questa base si può modificare il contenuto di tutta la dialog tenendo conto delle sue tre parti principali: header (.hd), body (.bd) e footer (.ft). Per comodità ho preferito usare una classe (demoDialog) per definire alcune parti alcuni attributi generici della dialog.
yui dialog javascript ajax 

.demoDialog {
    text-align: center;
    color: white;
    font-style: italic;
    font-variant: small-caps;    
}

.yui-skin-sam .yui-dialog {
	background-image: none;
    background-color: transparent;
	border: 1px solid black;
}

.yui-skin-sam .yui-panel {
	border: none;
}

.yui-skin-sam .yui-dialog .hd {
    height: 25px;
	border: none;
    color: white;
    background: url("images/hd.png") repeat;
	background-color: transparent;
}

.yui-skin-sam .yui-dialog .bd { 
	padding:5px;
	border: none;
	background-color: #AABEC8;    
}

.yui-skin-sam .yui-dialog .ft {
    background-image: none;
	background-color: transparent;
	background-color: #AABEC8;
    border: none;
}
yui dialog javascript ajax

Qui potete trovare il risultato di quest' ultima modifica.

Come nota finale consiglio a chi è interessato agli sviluppi futuri di YUI di seguire il Blog Ufficiale, con particolare attenzione a YUI 3.

Bookmark and Share





add comment

Comments rules:

  • If possible please stick to English language
  • We support Gravatar, go for it!
  • Use BBCode for formatting: [b], [u], [s]
  • Use [i] for quoting
  • Use [link www.site.com] site [/link] for links
  • Use [google] or [wiki] for referencies
  • HTML code is not allowed in comments
Siti Web Parma