Cos’è jQuery, inclusione e sintassi base

Cosa è jQuery?

jQuery è una libreria di funzioni (framework) javascript, cross-browser destinata ad applicazioni web, che si propone come obiettivo quello di semplificare la programmazione lato client delle pagine HTML. Il framework consente ai Designer di sviluppare pagine web con funzionalità interattive in maniera semplice. L'obiettivo è gestire al meglio gli aspetti grafici e strutturali come posizione di elementi, effetto di click su immagini, manipolazione del Document Object Model e quant'altro ancora, mantenendo la compatibilità tra browser diversi e standardizzando gli oggetti messi a disposizione dall' interprete javascript del browser.

Come integro jQuery al mio progetto web?

La libreria jQuery è un singolo file JavaScript, da richiamare tramite HTML con il tag <script> (si noti che il tag <script> dovrebbe essere all'interno della sezione <head>). Per ottenere la libreria: http://jquery.com/download/

Da notare che:

  1. Production version - questa versione è per il vostro sito web di produzione il codice è minimizzato e compresso;

  2. Development version - versione di sviluppo e di test, il codice è facilmente leggibile;

  3. CDN di Google o di jQuery – Content Delivery Network

Con percorsi locali:

<head>

<script src="jquery-3.3.1.min.js"></script>

<script src="mioscript.js"></script>

</head>

Con percorsi remoti:

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>


Se non abbiamo bisogno di modifiche alla libreria usare le versioni .min (sta per minified ovvero compresso) in quanto sono più veloci da caricare, inoltre preferire i CDN di Google per ridurre i tempi di caricamento ( Leggere qui per maggiori dettagli).

Qual è la sintassi di base?

$(selector).action()

  1. Il $ per definire jQuery

  2. Un (selector) per "query (trovare)" elementi HTML

  3. Un’azione: jQuery action() da far eseguire sull’elemento selezionato

Per esempio:

  • $(selector).action();

  • jQuery(‘p’).css(‘color’, ‘blue’);

  • $(‘p’).css(‘color’, ‘blue’);

  • $(this).hide();

  • $("p").hide();

  • $(".test").hide();

  • $("#test").hide();

Ovvero: selettore, azione, parametri.

Cosa è jQuery UI?

jQuery UI è una libreria open source di plug-in basata sulla libreria JavaScript JQuery. Ogni componente è costruito secondo l'architettura di JQuery ed è completamente personalizzabile. Fornisce interazioni ed animazioni, effetti avanzati e widget. Al momento jQuery UI è suddivisa in: Interactions, Widgets, Effects, Utilities.

Dipendente dalla libreria core può essere richiamata sia con percorsi locali che con percorsi remoti. Se usiamo il CDN di jQuery.

  1. http://code.jquery.com/jquery-1.12.1.min.js

  2. http://code.jquery.com/ui/1.12.1/jquery-js

  3. http://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-css

In generale tutti i link assoluti per UI e non solo sono su http://code.jquery.com/

Se invece usiamo il CDN di Google:

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

Cosa sono i Widget di jQuery UI?

Molto amplia è la scelta di Widget in jQuery UI. Il nome potrebbe essere in alcuni casi fuorviante, visto che è spesso usato in moltissimi contesti diversi, tuttavia in questo caso si tratta solo di controlli atti a semplificare e ordinare la fruizione e l’inserimento dei dati in una pagina web.

jQuery UI comprende nativamente 11 tipi di widget, completamente compatibili con i temi UI generati da Theme Roller (la web application per la gestione dei temi) e ricchi di opzioni di personalizzazione.

  • Accordion: Visualizza pannelli di contenuto comprimibili per presentare le informazioni in una quantità limitata di spazio.

  • Autocomplete: suggerisce parole mentre l'utente sta scrivendo.

  • Button: inserisce pulsanti personalizzabili

  • Datepicker: Visualizza un calendario

  • Dialog: visualizza finestre di dialogo personalizzabili

  • Menu: crea menu nidificabili.

  • Progressbar: consente di visualizzare un indicatore di stato

  • Slider: Visualizza diapositive accessibili tramite tastiera

  • Spinner: Visualizza i pulsanti per immettere numeri tramite la tastiera o il mouse.

  • Tabs: Trasforma un insieme di elementi contenitori in una struttura a tab.

  • Tooltip: mostra informazioni addizionali.

Come inserisco un accordion?

<div id="accordion">

<h3><a href="#">Primo headerheader</a></h3>

<div>First contenuto</div>

<h3><a href="#">Secondo header</a></h3>

<div>Secondo contenuto</div>

</div>


A questo punto basterà richiamare il metodo .accordion() sull’elemento con id accordion per attivare il widget

$("#accordion").accordion();

L’Accordion, come gli altri widget offre un ottimo numero di opzioni per personalizzare il comportamento del widget. Fra cui:

  • active : (selettore, jQuery, elemento DOM, numero, booleano – 'first-child’) indica uno specifico elemento o la sua posizione nell’accordion in modo da renderlo subito visibile una volta applicato il widget.

  • autoHeight : (booleano – true) indica se applicare l’altezza del contenitore di testo più alto a tutti gli altri elementi. Questa opzione è attiva di default perché rende il controllo più consistente e impedisce che il cambiamento di altezza dell’accordion possa influire sul posizionamento di altri box nell’interfaccia.

  • collapsible : (booleano – false) strettamente collegato all’opzione precedente, se impostato su true permette di chiudere tutte le aree di testo, facendo collassare completamente il controllo.

  • Per esempio:

<script>

$( function() {

$( ".accordion" ).accordion({

collapsible: true,

active: false,

heightStyle: "content"

});

} );

</script>

Ulteriori dettagli: http://api.jqueryui.com/accordion/#option-animate

Come inserisco un tabulatore?

<div id="tabs">

<ul>

<li><a href="#fragment-1"><span>Uno</span></a></li>

<li><a href="#fragment-2"><span>Due</span></a></li>

<li><a href="#fragment-3"><span>Tre</span></a></li>

</ul>

<div id="fragment-1">

<p>Testo 1</p>

</div>

<div id="fragment-2">

<p>Testo 2</p>

</div>

<div id="fragment-3">

<p>Testo 3</p>

</div>

</div>


A questo punto ci basterà richiamare il metodo .tabs() sull’elemento con id tabs per attivare il widget $("#tabs"). tabs ();

Cosa è il Themeroller/temi di jQuery UI?

la struttura grafica dei widget e delle interazioni di jQuery UI è in gran parte veicolata dall’inclusione di un file CSS compreso nel pacchetto di installazione.

Themeroller è un applicativo online raggiungibile all’indirizzo http://jqueryui.com/themeroller/ che permette di modificare il tema base smoothness secondo le proprie esigenze con un alto grado di personalizzazione. Oltre a questo, mette a disposizione molti temi preconfezionati da scaricare direttamente oppure da usare come base per il propio tema.

N.B. cliccando sul link di download dei temi verrete reindirizzati all’utility di download di jQuery UI, perciò scaricare tutto il pacchetto ed estrarre la cartella del tema dalla directory css. La struttura e la nomenclatura che compongono un tema per jQuery UI sono rigidamente standardizzati, per garantire la compatibilità fra il markup generato dalla libreria e la formattazione disponibile via CSS.

Cosa sono i Plugin jQuery?

In jQuery un plugin non è altro che un’estensione (non autonoma) del framework, che ha come compito quello di ampliarne le funzioni del core. Più nello specifico un plugin è una, o un insieme, di funzioni che hanno lo scopo di utilizzare il framework per compiti pre-stabiliti e quindi aiutare gli sviluppatori quando si tratta di validare i nostri formulari, creare delle slideshow, inserire nei nostri siti delle gallerie fotografiche. Alcuni esempi di plugin che possono essere testati:

  1. Colorbox - a jQuery lightbox A lightweight customizable lightbox plugin

  2. jQuery Zoom A plugin to enlarge images on mouseover or mousedown.

Anche per i plugin abbiamo la versione ridotta (min di produzione) e la versione non compressa (di sviluppo).

Come integro il plugin Colorbox?

<link rel="stylesheet" href="colorbox.css" />

<script src="../jquery.colorbox-min.js"></script>

Il plugin può essere utilizzato sia su una singola immagine sia per raccolte in stile slideshow.


Per raggruppare gli elementi includiamo nel mark-up, p.e., l’attributo rel="gipso"

per poi utilizzare il selettore di attributi di jQuery per trovari tali immagini. $(document).ready(function(){

//Examples of how to assign the Colorbox event to elements

$(".gipso").colorbox({ rel:'gipso’, transition: 'fade’, speed: 500, });

$(".flora").colorbox();

});



1 commento:

  1. ✅ RECUPERO TRUFFA BINARIO ❌ Le opzioni binarie, Forex e simili sono un mezzo per fare soldi ma è più simile al gioco d'azzardo.

    Non ci sono mezzi sicuri per garantire che una persona possa trarne profitto ed è per questo che si può anche considerare una truffa.

    Non dimentichiamo che alcune persone ti danno persino il 💯% di garanzia di realizzare profitti e finiscono per scappare con i tuoi soldi. Internet oggi è pieno di truffe sul recupero delle opzioni binarie, si vedono così tante testimonianze condivise su come un'azienda o società li ha aiutati a recuperare ciò che hanno perso con le opzioni binarie. Ma credici, è solo un modo per attirare più persone e finire per truffarle.

    ❌ Potresti anche aver incontrato alcune persone che dicono che ti daranno la garanzia di scambi di successo, ma finiscono anche per essere TRUFFATORI. Qui dici che cose come il 200% garantito in sole 2 settimane e quando entri in commercio con loro, iniziano a dirti di pagare la percentuale dei profitti prima di poter ottenere il tuo reddito.

    Questi sono tutti bugiardi, per favore evitali. Ma se sei stato una vittima di questi ragazzi, allora dovresti contattare PYTHONAX ora‼ ️

    ✳️ La grande domanda è "Qualcuno può recuperare i soldi persi a causa di opzioni binarie e truffe?" Dirò di sì e ti dirò come. L'unico modo per recuperare i tuoi soldi è assumere HACKER che ti aiutino a entrare nel sistema di sicurezza del database delle aziende utilizzando le informazioni che fornisci loro, estrai il tuo file e recupera i tuoi soldi. Sembra una cosa davvero impossibile da fare, te lo dirò, dovrebbe essere impossibile, ma con l'uso di software appositamente progettati noti a HACKER e autorità (come FBI, CIA ecc.) È possibile e l'unico modo per recuperare i tuoi soldi.

    ✅ PYTHONAX è un gruppo di hacker che usa le proprie capacità di hacking per dare la caccia ai truffatori e aiutare le persone a recuperare i propri soldi dai truffatori di Internet. Abbiamo solo bisogno dei dettagli di contatto di SCAMMERS e Paymnet Info e entro 4-8 ore i tuoi soldi ti verranno restituiti.

    ✳️ Puoi contattarci tramite le e-mail di seguito-: PYTHONAXSERVICES@GMAIL.COM

    Forniamo anche servizi di hacking legale come:
    🔸Hacking / clonazione del telefono 🔸 Hacking e-mail e recupero password
    🔸 Hacking di social media e recupero di password
    🔸 Recupero file cancellati
    🔸 Monitoraggio mobile
    🔸 Rilevamento ed eliminazione dei virus.
    E-mail: PYTHONAXHACKS@GMAIL.COM




    Pythonax. 2020 © Tutti i diritti riservati.

    RispondiElimina

PX, REM, EM, VW e VH per il Responsive design

Le unità di misura Nel responsive design le unità di misura: PX, REM, EM, VW e VH hanno un ruolo fondamentale ed è importante capirne le log...