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:
Semplice script che grazie alle API di Google Maps ritrova l'indirizzo stradale della nostra posizione o di una posizione con latitudine e longitudine specificate.
Il codice Javascript che potete utilizzare per interrogare le API di Facebook e ottenere le reactions relative da trasmettere Live su Facebook
Un breve esempio per un engine dedicato ad un Programmatore PHP che intenda separare il codice dalla grafica grazie a Smarty Template
Gestire un progetto web e le varie figure coinvolte al fine di ottimizzare il raggiungimento del risultato? Questo è il lavoro di un Web Project Manager
Come un Programmatore PHP può Utilizzare le espressioni Regolari di PHP per aggiungere un attributo ad un Link


buzzoole code
Leggi altro:
MiniSito Facebook: Creare una Pagina Facebook efficace e di successo

Negli ultimi anni, sull'argomento Pagine Facebook avrò letto centinaia di articoli di Programmatori, Consulenti Web Marketing e Esperti Social, quasi tutti...

Chiudi