Hello World: » jQuery

E’ arrivato CADIE ( Cognitive Autoheuristic Distributed-Intelligence Entity )

admin — Wed, 01 Apr 2009 07:59:19 +0000

Questo post è un po’ fuori dagli schemi, volevo solo far notare ai miei visitatori che da Google ci devono tenere davvero molto al 1° Aprile, ecco infatti che oggi viene alla luce la tecnologia CADIE ( Cognitive Autoheuristic Distributed-Intelligence Entity ), una sorta di applicazione che scansiona il web per crearsi un blog… ehehe bello scherzo… o sarà tutto vero?

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Menu a tendina multilivello crossbrowser con jQuery e Css

admin — Sat, 04 Oct 2008 04:21:10 +0000

Crossbrowser Multi Level Drop Down Menu Con jQuery e Css

I menu a tendina sono molto utilizzati nelle applicazioni web, e molto spesso per crearli si ricorre a chilometri di codice javascript, scelta che potrebbe comportare diverse problematiche a livello di portabilità, accessibilità, efficienza ecc… Non è il caso del menù che andremo a vedere tra poco, interamente realizzato dal sottoscritto, creato quasi completamente utilizzando ’semplice’ codice css con un pizzico di jQuery. Prima di buttarmi in questo lavoro ho effettuato diverse ricerche per vedere se ciò di cui avevo bisogno fosse già stato creato da qualcuno, ed in effetti, in molti hanno già creato cose abbastanza simili. Ciò che mi ha fatto decidere di creare qualcosa ex novo è stata la difficoltà di riadattare il codice altrui alle mie esigenze, e spero che con le spiegazioni che darò qui di seguito nessuno vada incontro alle medesime problematiche.

Ecco subito un esempio di cosa andremo ad ottenere e qui di seguito il codice:

index.html

  
  
    
      
      
      
      
      Drop Down Menu
    
  

  
    
      Voce 1
        
          Sub Voce 1-1
            
              Sub Voce 1-1-1
                
                  Sub Voce 1-1-1-1
                  Sub Voce 1-1-1-2sssssss sssssssss ssssss
                  Sub Voce 1-1-1-3
                  Sub Voce 1-1-1-4
                    
                      Sub Voce 1-1-1-4-1
                      Sub Voce 1-1-1-4-2
                      Sub Voce 1-1-1-4-3
                      Sub Voce 1-1-1-4-4
                      Sub Voce 1-1-1-4-5
                      Sub Voce 1-1-1-4-6
                    
                  
                  Sub Voce 1-1-1-5
                  Sub Voce 1-1-1-6
                
              
              Sub Voce 1-1-2
                
                  Sub Voce 1-1-2-1
                  Sub Voce 1-1-2-2
                  Sub Voce 1-1-2-3
                  Sub Voce 1-1-2-4
                  Sub Voce 1-1-2-5
                  Sub Voce 1-1-2-6
                  Sub Voce 1-1-2-7
                
              
              Sub Voce 1-1-3
            
          
          Sub Voce 1-2
        
      
      Voce 2
      Voce 3
        
          Sub Voce 3-1
          Sub Voce 3-2
            
              Sub Voce 3-2-1
              Sub Voce 3-2-2
              Sub Voce 3-2-3
            
          
        
      
      Voce 4
      Voce 5
      Voce 6

style/style.css

	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, font, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td {
		margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
		font-size: 100%;
		vertical-align: baseline;
		background: transparent;
	}

	body {
		line-height: 1;
	}

	ol, ul {
		list-style: none;
	}

	blockquote, q {
		quotes: none;
	}

	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}

	/* remember to define focus styles! */
	:focus {
		outline: 0;
	}

	/* remember to highlight inserts somehow! */
	ins {
		text-decoration: none;
	}

	del {
		text-decoration: line-through;
	}

	/* tables still need 'cellspacing="0"' in the markup */
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}

	span {
		display: none;
	}

	#navigator {
		width: 990px;
		height: 21px;
		background-color: rgb(250,211,211);
	}

	#navigator ul {
		list-style-type:none;
		border: 0px solid #000000;
		position: absolute;
		z-index: 90;
	}

	#navigator ul li {
		width: 130px;
		float: left;
		border: 1px solid black;
		text-align: center;
		font-size: 11px;
		font-weight: bold;
		display: block;
	}

	#navigator ul li ul {
		display: none;
		visibility: hidden;
		width: 130px;
		border: 0px;
		border-left: 1px solid black;
		border-right: 1px solid black;
		background-color: #ffffff;
		margin: 1px 0px 0px -1px;
	}

	* html #navigator ul li ul {
		margin: 0px;
		background-color: #fff000;
		margin: 1px 0px 0px -66px;
	}

	#navigator ul li ul li {
		border: 0px solid black;
		border-bottom: 1px solid black;
		width: 130px;
	}

	#navigator ul ul ul {
		border: 0px solid black;
		border-top: 1px solid black;
		border-left: 1px solid black;
		border-right: 1px solid black;
		float: left;
		width: 130px;
		margin: -18px 0px 0px 130px;
		height: auto;
	}

	* html #navigator ul ul ul {
		margin: 0px;
		margin: -18px 0px 0px 65px;
	}

	#navigator ul li p {
		margin: 0px;
		padding: 3px 0px 3px 0px;
		color: #000000;
		width: 100%;
		height: 100%;
		background-color: #ff0000;
	}

	#navigator ul li p a {
		color: #000000;
		background-color: #00ff00;
	}

js/menu.js


  $(document).ready(function(){
    $("#navigator li").hover(
      function(){
        $(this).children('ul:first:hidden').css({visibility: "visible",display:'block'});
      },
      function(){
        $(this).children('ul:first:visible').css({visibility: "hidden",display:'none'});
      }
    );
  });

Ricordatevi inoltre di includere correttamente la libreria jQuery.

Il file html non ha bisogno di spiegazioni, un semplice div che contiene un ul con degli li che a loro volta possono contenere altri ul ecc..

Il file menu.js utilizza il metodo hover di jQuery, che in pratica, mette in ascolto gli oggetti LI presenti all’interno del DIV#navigator con i metodi onmouseover e onmouseout.

Il file style.css è quello che andremo a dissezionare, vedendo passo passo i comportamenti che prende il nostro menu al variare del suo contenuto. Procederemo quindi in vari step che ci porteranno alla versione finale. Il codice in testa al file è parte del Meyerweb Reset che personalmente includo in ogni progetto.

Step 1

Il primo passo è semplice… eliminate il contenuto che segue alla definizione degli attributi per il div#navigator, otterrete questo risultato. Il contenuto degli ul li è subito visibile ed ogni elemento è a capo dell’altro. I file html e js sono rimasti invariati, infatti passando con il mouse sugli elementi LI potremo visualizzare/nascondere eventuali ul figli se disponibili.

Step 2

Non seguiremo l’ordine del codice come impostato nel file css nei vari step, infatti il file css di questo secondo passaggio sarà la versione dello step 1 con aggiunta delle definizioni di ‘#navigator ul li p’ e ‘#navigator ul li p a’. Cliccate qui per vedere il risultato e controllare se state eseguendo tutto correttamente. Abbiamo formattato i tag P ed A presenti all’interno degli LI. Perchè tag P? La versione fnale del menu senza la presenza dei tag P aveva un fastidioso difetto di sovrapposizione degli UL. Più nel dettaglio, la coordinata X dell’UL era uguale alla coordinata X del testo presente nell’LI parente sommata della sua lunghezza ( l’UL compariva subito dopo la fine del testo e non alla fine dell’LI, donando un effetto di disordine ).

Step 3

In questo passaggio le cose iniziano a prendere forma. Aggiungiamo le definizioni per ‘#navigator ul’ e ‘#navigator ul li’ ovvero l’UL che conterrà gli LI che rappresenteranno le categorie. Scrivo ‘rappresenteranno’ in quanto adesso la definizione prende tutti gli UL e gli LI discendenti del div#navigator. Ciò che abbiamo ottenuto è che adesso, le sottocategorie compaiono al di sotto della categoria a cui appartengono. Questo step 3 sarà visualizzato in maniera abbastanza differente dai vari browser ( leggi: su IE6 viene interpretato in modo differente che dagli altri browser ). Da sottolineare la presenza dell’attributo position: absolute; che permette la visualizzazione degli UL come se fossero al di fuori di qualsiasi altro elemento ( modificare questa voce con relative o rimuoverla per capire di cosa sto parlando ).

Step 4

Aggiungiamo le definizioni di ‘#navigator ul li ul’, ‘#navigator ul li ul li’ e ‘* html #navigator ul li ul’. In questo modo differenziamo la visualizzazione delle categorie di primo livello ( lo abbiamo fatto nello step 3 ) dalle sottocategorie ( a qualsiasi livello ). Inoltre definiamo che le sottocategorie di default NON debbano visualizzarsi. Della loro visualizzazione se ne occupera il file js ( che cerca il primo figlio UL nascosto dell’LI scatenante l’evento mouseover e lo visualizza ). Ciò che otteniamo è la corretta visualizzazione delle categorie di primo livello. Da notare che un selettore preceduto dal suffisso ‘* html’ viene letto esclusivamente da IE6, quindi le proprietà al suo interno sono specifiche per far funzionare il tutto anche su questo browser.

Final Step

Infine aggiungiamo le regole ‘#navigator ul ul ul’ e ‘* html #navigator ul ul ul’ che definiscono la visualizzazione per le categorie dal terzo livello in poi. Otteniamo quindi il risultato finale.

Riadattare il tutto

Ciò a cui bisogna porre attenzione modificando il css di questo menù sono principalmente la larghezza degli li/ul e la loro altezza, data principalmente dalla proprietà padding del tag P. Inoltre, la presenza del bordo di 1px è da tenere in considerazione in quanto la sua rimozione/modifica comporterebbe la modifica di altre proprietà per fare in modo che tutto si riadatti. Rispettando l’equilibrio tra le varie proprietà non dovrebbe essere eccessivamente un problema riadattare il tutto alle proprie esigenze.

Si conclude qui questo tutorial. Eventuali commenti per richieste o consigli su come modificare in meglio il codice sono sempre ben accetti.

Note: There is a rating embedded within this post, please visit this post to rate it.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Introduzione a JQuery

admin — Fri, 03 Oct 2008 05:50:20 +0000

Il Framework jQuery

JQuery è un framework javascript che semplifica, e anche di molto, il lavoro per tutti quelli che hanno a che fare con il suddetto linguaggio. JQuery è inizialmente scritto da John Resig, a cui si sono unite altre persone creando un vero e proprio team. Diversi grandi nomi utilizzano questo framework nei loro siti internet, tra cui Google, Mozilla.org, Technorati ed altri che potete vedere sul sito di JQuery, dove tra l’altro, potete anche scaricarlo a scelta tra la versione compressa per produzione e non.

Ma cosa ci permette di fare questo framework? Niente altro che tutto quello che ci permette di fare javascript, ma in maniera estremamente più semplice e veloce. Prima di scendere nel dettaglio con qualche codice di esempio, vediamo come inizializzare JQuery. Il mio consiglio è quello creare un file esterno ed includerlo nelle pagine subito dopo aver incluso il file principale della libreria:

prova.html

  
  
    
      
      
      
      
      JQuery Test Application
    
  
  [...]

myJQueryStuff.js

$(document).ready(function(){

// codice javascript/jquery

});

Tutto qui. Da questo momento in poi potrete usufruire di tutte le caratteristiche della libreria, come per esempio:

Selettori

Tramite la chiamata della funzione $, è possibile selezionare praticamente qualsiasi oggetto html in qualsiasi maniera si voglia. La sintassi dei selettori è molto simile ai selettori css, quindi per esempio, se volessimo selezionare il

del nostro documento html, il codice sarebbe:

Selezione del div #container

 var container = $('#container');

Alla stessa maniera è quindi possibile selezionare uno o più oggetti per classe, tagName, per via gerarchica utilizzando il simbolo >

Selezione degli ul ‘figli’ del div #container

 var container = $('#container > ul');

e molti altri ancora. Esistono inoltre una grande quantità di filtri, raggruppati per filtri base, filtri di contenuto, visibilità, attributo, per i figli, per i forms ecc.. potete trovare tutto spiegato in maniera dettagliata con la spiegazione dei vari valori ritornati cliccando qui.

Ajax

JQuery semplifica radicalmente la creazione delle richieste asincrone. Non dovremo più preoccuparci delle problematiche crossbrowser di creazione dell’oggetto XMLHttpRequest, JQuery ci pensa per noi, di seguito un esempio dello script da utilizzare:

richiesta Ajax con JQuery

      $.ajax({
        url: './myServerScript.php',
        type: 'GET',
        data: 'myVar='+myVar,
        success:  function(html){
        }
      });

Questo è solo un esempio di come poter effettuare una richiesta di tipo GET al file myServerScript.php. Eventuali dati ritornti dalla richiesta saranno contenuti nella variabile html. Sono inoltre disponibili le chiamate POST e JSON. E’ possibile inoltre specificare diverse altre proprietà per efttuare la chiamata ajax, per approfondimenti vi rimando a questo link.

Eventi

Molto intuitiva anche la gestione degli eventi, con cui è possibile aggiungere o rimuovere un oggetto dall’ascolto di un determinato evento. Esiste inoltre la possibilità di scatenare un certo evento mediante il metodo trigger. Di seguito un esempio che mette in ascolto un elemento all’evento click:

esempio evento click

  $('myButton').bind('click',function(){
    alert('hai cliccato myButton!');
  });

Per tutti i dettagli sulla gestione degli eventi cliccate qui.

Effetti

Ovviamente non poteva mancare una gestione degli effetti, come animazioni, comparsa/scomparsa, slide ecc.. Ecco un esempio:

Effetto slide su un div

    $("button").click(function () {
      $("div.slide").slideToggle("slow");
    });

Potete trovare tutta la documentazione con esempi pronti qui.

Su jQuery c’è moltissimo da scrivere, questo tutorial aveva il semplice scopo di introdurre le funzionalità base del framework, ritorneremo presto sull’argomento con interessanti script pronti all’uso. Nel mentre, ecco alcuni link estremamente interessanti di alcuni utilissimi plugin che estendono le già non poche funzionalità:

Note: There is a rating embedded within this post, please visit this post to rate it.

Introduzione a EXT JS Javascript Framework Ext: Non l'ennesima libreria javascript Oggi introdurremo la libreria EXT...

Related posts brought to you by Yet Another Related Posts Plugin.