Plugin e librerie JQuery per lo sviluppo web

Un plugin è uno strumento di codice riutilizzabile scritto in un file JavaScript standard. Questi file forniscono utili metodi jQuery che possono essere utilizzati insieme ai metodi del framework jQuery.

Vediamo alcuni plugin disponibili ed esempi di come usarli

Plugin Pagepilling o Stacked Page
PagePiling.js è un plugin jQuery per navigare tra le sezioni di un sito web scorrendo con il mouse come se fossero diapositive di un menu, utilizzando le frecce della tastiera o ruotando la rotellina del mouse, tutte le sezioni sono sullo stesso sito web. Lo scorrimento è verticale, quindi la pagina è impilata.

 Cominciare
 Temary
 JQuery

L'obiettivo di questo tutorial è presentare i plugin
dalla libreria JavaScript JQUERY

1 - Introduzione a jQuery
2 - Programmazione di base con jQuery
3 - Effetti avanzati con jQuery

Una libreria JavaScript per scrivere di meno e fare di più

Esempio

La configurazione avviene invocando la funzione pagepiling, dove indichiamo l'id del menu, poi indichiamo il nome di ogni sezione, indichiamo il colore di sfondo per ogni sezione e poi nella navigazione a destra indichiamo il nome che apparirà.

 $ ('# pagina') pagepiling ({menu: '#menu', anchors: ['start', 'section', 'sectionb'], sectionColor: ['# 9aceed', '# 2ebe21', '# 2C3E50 '], navigazione: {' position ':' right ',' tooltips': ['Home', 'Sezione A', 'Sezione B']}

La classe della sezione è quella usata dal Plugin JQuery Per riconoscere ogni sezione, la classe intro è quella che indichiamo per iniziare il contenuto di una sezione.

Plugin ordinabile per ordinare gli elenchi
Questo plugin è molto utile per riordinare gli elenchi trascinandoli con il mouse e scambiando gli elementi. I cms wordpress usano questo plugin per riordinare categorie, post e pagine.

Facciamo un esempio, supponiamo di avere una lista di una squadra iniziale di giocatori e una squadra sostitutiva, abbiamo anche una lista di giocatori di riserva. Realizzeremo queste tre liste e tramite il plugin ordinabile potremo scambiare le liste giocatori semplicemente trascinando il loro nome con il mouse sulla lista che vogliamo inserire o modificarne la posizione all'interno della stessa lista.

 jQuery Ordinabile - Elenco giocatori 
jQuery Sortable - proprietario della squadra del giocatore

 Squadra dei titoli Squadra sostitutiva Giocatori di riserva 

 
 

José
Alberto
Carlo
Articolo 4

 

Javier
cornici
Daniele
Genaro

 

Mario
Fernan
Giacinto
Manuel
Silvano

 

 

Esempio

Come creare il mio plugin jQuery?
Un plugin jQuery è uno script o un nuovo metodo che utilizziamo per creare una nuova funzionalità estendendo o facilitando le possibilità che jQuery ci offre. Per creare un plugin, dobbiamo dichiarare una funzione e programmare la funzionalità in forma generica in modo che possa essere riutilizzato su qualsiasi pagina o sito web.

Dobbiamo analizzare e tenere in considerazione che quando includiamo il nostro plugin in jQuery non abbiamo conflitti con nessun'altra libreria o funzione o anche con file css che potrebbero alterare le prestazioni del nostro plugin. jQuery ci permette di definire i plugin in modi diversi. Gli elementi di un sito Web non possono essere manipolati in modo sicuro finché il documento non è completamente caricato nel browser. jQuery rileva questo stato per determinare quando è possibile accedere agli elementi html.

L'evento .ready() verrà eseguito solo una volta che il web è stato caricato e prima che venga mostrato nel browser, .ready() ha lo scopo di eseguire alcune funzioni subito dopo aver caricato l'intero documento HTML assicurando che il nostro codice venga eseguito su elementi che vengono visualizzati.

Il formato di questa funzione è:

 // Queste funzioni saranno disponibili quando il web avrà finito di caricare $ (document) .ready (function () {function myfunction () {// codice della funzione}});

Se invece di una funzione applico un selettore CSS. Questa riga verrà eseguita automaticamente al termine del caricamento della pagina, ad esempio dopo aver caricato la pagina, mettere tutti i collegamenti in verde e con una dimensione di 14 pixel.

 $ (document) .ready (function () {$ ('a'). css ({'color': green, 'font-size': '14px'});}); 

Successivamente creeremo un plug-in che elimina qualsiasi posta pubblicata in un elenco di commenti su un sito Web.

 
 
 
Recensioni degli utenti 
 

 
 
Commenta Lorem Ipsum 1 - Venerdì 01/04/2016 12:35 Lorem Ipsum è semplicemente un testo fittizio proveniente da stampanti e file di testo.
[email protected] 
 

 
 
Commenta Lorem Ipsum 2 - Venerdì 01/04/2016 12:35 Lorem Ipsum è semplicemente un testo fittizio proveniente da stampanti e file di testo.
[email protected] 
 

 

 

Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo