Programmatore PHP specializzato nella realizzazione e nell'ottimizzazione di pagine Facebook per la tua attività | Promozione e Ottimizzazione Pagine Facebook

Guida a JQUERY per la creazione di un elemento div a scorrimento



Come Programmatore PHP spesso mi sono trovato a lavorare su progetti che utilizzavano in maniera scriteriata o smodata interessanti
librerie Javascript con elementi di interazione grafica molto utili, che realizzano effetti drag&drop o di scomparse di elementi.

Una di queste librerie, a mio avviso la più importante per un Programmatore Javascript che intende sviluppare applicazioni dinamiche e interattive, è sicuramente la libreria JQuery che presenta una buona documentazione che è possibile trovare a quest’indirizzo.

L’utilizzo con criterio e senza troppi fronzoli di questa libreria può consentire ad ogni Programmatore Javascript e nel mo caso Programmatore PHP, la realizzazione di effetti che consentono di realizzare CMS più usabili e navigabili, cercando di non sporcare eccessivamente il codice realizzato.

In questa breve guida analizzeremo come un Programmatore Javascript può realizzare un div che viene nascosto o visualizzato grazie all’utilizzo di un tasto, questo elemento può risultare interessante per la gestione nei CMS di tab o di pagine che intendano visualizzare o meno elementi sfruttando le diverse esigenze.

Per prima cosa occorre che il Programmatore possa scaricare la libreria JQUERY a questo indirizzo, successivamente con poche righe di codice possiamo realizzare grazie alle funzioni incluse nella libreria questo semplice effetto, la funzioni (API) che ho utilizzato in questo esempio è la funzione animate, ma consiglio uno sguardo anche alle funzioni hide, show e toggle che realizzano effetti simili.

Per prima cosa il nostro Programmatore dovrà inserire tra i tag <head></head> le librerie precedentemente scaricata:

<script src="jquery-1.4.2.js" type="text/javascript"></script></div>
Successivamente con una riga di codice è possibile realizzare sempre nel tag <em><head></head> </em>la funzione che richiameremo più tardi:
<script type="text/javascript">
function mostraDivScorrevole(){
$("#divScorrevole").animate({"height": "toggle"}, { duration: 1000 });
}
</script>
Per chiarire bene l'esempio come <strong>Programmatore</strong> <strong>Javascript </strong>ho aggiunto uno stile che identificasse il box che dovrà scomparire:
<style>
#divScorrevole{
display: none;
border: 1px dashed Navy;
padding: 10px 10px 10px 10px;
margin-top: 10px;
width: 500px;
text-align: justify;
}
</style>

la parte più importante e meno estetica di questa classe è sicuramente il display: none; che rende l’elemento non visibile di default quando la pagina verrà richiamata.
Infine dovremmo creare il corpo della pagina in questo modo


<a href="#" onClick="mostraDivScorrevole(); return false;">
Scorrimento</a>
<div id="divScorrevole">
....testo da nascondere/mostrare....
</div>

In questo modo otteniamo il risultato che ci eravamo prefissi come Programmatore Javascript, cioè mostrare o nascondere un div in maniera semplice e con un effetto gradevole come potete vedere in questo esempio.
Come Programmatore PHP consiglierei di includere il CSS in un foglio di stile esterno e la dichiarazione della procedura Javascript in un file esterno in modo da mantenere perfettamente pulito il codice, una buona regola che ogni Programmatore Javascript dovrebbe tener presente in ogni sua implementazione.
Nei prossimi esempi spero di poter mostrare l’implementazione di una procedura drag&drop cercando di tenere pulito ed ordinato il codice sviluppato dal Programmatore Javascript.

PER ULTERIORI INFORMAZIONI:

Daniele Tabacco
Programmatore PHP | Web Developer | Consulente Web e SEO

PHP - MySql - AJAX - HTML5 - JAVASCRIPT - CSS - JSON/XML - JQuery
WebApps, Applicazioni, Realizzazione Siti Mobile per iPhone e Android
Programmatore PHP - Consulente Web Marketing Napoli, Roma, Milano, Firenze.
Tel.+39 329.11.73.918
email: daniele.tabacco[at]gmail.com
skype: daniele.tabacco

Il tuo nome (richiesto)

La tua email (richiesto)

Oggetto

Il tuo messaggio

 


POTREBBE INTERESSARTI ANCHE:
Grazie alle tecnologie PHP e MySQL un Programmatore PHP può realizzare un gestionale online con elementi interattivi (AJAX e JQuery) per gestire le proprie attività, Gestionale di Magazzino, Fatturazione o di un Negozio sono alcuni esempi
Una breve Guida MySQL per spiegare come poter selezionare diverse righe della stessa tabella e raggrupparle per un determinato valore.
Grazie ai Plugin e i Social Button di Facebook è possibile condividere commenti Facebook alle pagine del proprio sito come fosse un Social Guestbook, il tutto senza essere necessariamente un Programmatore PHP
Script PHP che permette di leggere il contenuto di una directory utilizzando le funzioni opendir,readdir e closedir
Ecco dei Semplici consigli per poter progettare e realizzare al meglio Siti Internet Mobile di Successo, scritta da un Programmatore PHP e Consulente Web Marketing specializzato nello sviluppo di Siti Internet Mobile


buzzoole code
Leggi altro:
Upload Multiplo di File con HTML5 e PHP

La scorsa settimana, mi sono trovato con confrontarmi con alcuni addetti ai lavori su quelle che sono le nuove feature...

Chiudi