Finestre con Ajax

 

In alcuni casi è necessario realizzare finestre dinamiche che ci permettono di presentare  i contenuti con maggiore usabilità, raggruppando informazioni  dello stesso argomento in finestre diverse. Ajax e DHTML ci permettono di realizzare queste finestre.

Lo script è molto semplice da configurare, utilizza un foglio di stile (tab-view.css) per creare le finestre e (ajax.js)  (tab-view.js) per gestire le finestre.

<link rel="stylesheet" href="css/tab-view.css" type="text/css" media="screen">  <script type="text/javascript" src="js/ajax.js"></script>  <script type="text/javascript" src="js/tab-view.js">

Le prime tre righe richiamano il foglio di stile e i due script e vanno inseriti nell'Head della pagina Html

<div id="dhtmlgoodies_tabView1"> <div class="dhtmlgoodies_aTab">I contenuti della prima finestra.</div> <div class="dhtmlgoodies_aTab">I contenuti della seconda finestra</div> <div class="dhtmlgoodies_aTab">I contenuti della terza finestra</div> <div class="dhtmlgoodies_aTab">E questa &egrave; l'ultima finestra</div> </div> <script type="text/javascript"> initTabs('dhtmlgoodies_tabView1',Array('Prima finestra','Seconda','terza','Quarta'),0,450,250); </script>

Le righe successive si occupano della creazione delle finestre e dei contenuti. La classe dhtmlgoodies_tabView1 crea il gruppo di finestre e al suo interno vengono annidati i contenuti utilizzando la classe dhtmlgoodies_aTab, ovviamente è possibile creare anche più finestre o meno, in questo esempio ne abbiamo creato 4 .

La parte finale dello script ci permette di creare i titoli delle finestre e di configurare la grandezza della finestra

Per maggiori approfondimenti visitate il sito  www.dhtmlgoodies.com  creatore dello script

Ecco un esempio

 

Scarica un esempio  formato zip 12KByte

Commenta questo articolo Visualizza i commenti (-0,5)