jQuery UI è un insieme di widget e plugin degli stessi sviluppatori jQuery. Secondo me questo strumento va studiato quanto necessario per non scrivere le proprie “biciclette”. Puoi scaricare e leggere informazioni su questo componente aggiuntivo per jQuery nella home page del progetto: http://jqueryui.com/.

Cosa dobbiamo sapere su widget e plugin? Il primo è cosa sono e il secondo è come funzionano. Cercherò di soffermarmi su questi due punti.

Interattività

Inizierò con plugin utili che possono semplificarti la vita durante la creazione di interfacce interattive:

• Trascinabile – questo componente ti consente di rendere qualsiasi elemento DOM trascinabile con il mouse
• Droppable è un'estensione logica del componente Draggable; necessario per lavorare con contenitori in cui è possibile trascinare e rilasciare elementi
• Ridimensionabile – come suggerisce il nome, consente di ridimensionare qualsiasi elemento DOM
• Selezionabile – permette di organizzare la “selezione” degli elementi; comodo da usare per organizzare la gestione delle immagini
• Ordinabile: ordinamento degli elementi DOM

Widget

I widget sono già una soluzione completa contenente non solo codice JavaScript, ma anche alcune implementazioni di HTML e CSS:

Tutti i widget e i plugin sono legati al core dell'interfaccia utente jQuery, ma ci sono anche delle dipendenze tra i plugin stessi e vale la pena tenerle a mente. Ma non preoccuparti: quando crei un pacchetto UI jQuery, tutte le dipendenze vengono controllate automaticamente, ad es. quando hai bisogno di un widget precedentemente non connesso, è meglio scaricare nuovamente l'assembly.

Utilità

Non abbiamo molte utilità - ecco un utile plugin di posizione che ti permette di controllare la posizione degli elementi DOM - http://jqueryui.com/position/, e c'è anche una factory per creare widget, ma lo farò te ne parleremo un po' più tardi.

Effetti

Tra gli effetti forniti dall'interfaccia utente di jQuery, evidenzio quattro punti:

• Animazione a colori
• Animazione del cambio di classe
• Effetti impostati
• Ampliare le capacità di allentamento

Il componente “Effects Core” è responsabile dell'animazione del colore, che consente di animare i cambiamenti di colore utilizzando la funzione “.animate()”:

$("#mio" ).animate(( backgroundColor: "black" ), 1000 );

Sì, sì, jQuery di base non può farlo, ma l'interfaccia utente di jQuery ti consente di animare i seguenti parametri:

• colore di sfondo
• borderBottomColor
• borderLeftColor
• borderRightColor
• borderTopColor
• colore
• contornoColor

Un'altra caratteristica contenuta in "Effects Core" è l'animazione dei cambiamenti nella classe di un elemento DOM, ad es. quando assegni una nuova classe ad un elemento, invece della consueta applicazione istantanea delle nuove proprietà CSS, vedrai un'animazione di queste proprietà da quelle attuali a quelle specificate nella classe assegnata. Per utilizzare questa funzionalità, avremo bisogno di vecchi amici: i metodi “.addClass()”, “.toggleClass()” e “.removeClass()”, con una sola differenza: quando si chiama il metodo, è necessario specificare la velocità di animazione come secondo parametro:

$("#mio" ).addClass("attivo" , 1000 ); $("#mio" ).toggleClass("attivo" , 1000 ); $("#mio" ).removeClass("attivo" , 1000 );

Se dal paragrafo precedente non hai capito cosa sta succedendo, allora questo codice fa per te:

#my ( dimensione carattere :14px ; ) #my .active ( dimensione carattere :20px ; ) $(funzione () ( $("#my" ).addClass("active" , 1000 ); // ecco che gira allo stesso modo, chiama $("#my" ).animate(("font-size" :"20px" ), 1000 ); ));

Esiste anche un metodo “.switchClass()” che sostituisce una classe con un'altra, ma non l'ho mai trovato utile.

Non parlerò a lungo del set di effetti; è meglio vederli in azione alla pagina http://jqueryui.com/effect/. Per lavorare con gli effetti, appare il metodo “.effect()”, ma è meglio non usarlo da solo, perché l'interfaccia utente ha ampliato la funzionalità dei metodi integrati “.show()”, “.hide( )” e “.toggle()”. Ora, passando il nome dell'effetto come parametro di velocità dell'animazione, otterrai il risultato desiderato:

$("#mio" ).hide("sbuffo" ); $("#mio" ).show("trasferimento" ); $("#mio" ).toggle("esplodi" );

Fornirò un elenco di effetti, forse qualcuno ricorderà: cieco, rimbalza, clip, rilascia, esplode, piega, evidenzia, soffio, pulsa, scala, scuoti, ridimensiona, diapositiva, trasferisci.

Se in qualsiasi momento hai bisogno di apportare modifiche al tema, apri il file “jquery-ui-#.#.##-custom.css” e trova la riga che inizia con il testo “Per visualizzare e modificare questo tema, visitare http:.. " Segui il collegamento fornito e utilizza ThemeRoller per apportare le modifiche necessarie.

Scriviamo il nostro widget

Il punto di partenza per te quando scriverai un widget per jQuery UI sarà la documentazione ufficiale, ma poiché non tutti hanno una buona conoscenza dell'inglese, cercherò di tradurre e adattare le informazioni in essa presentate.

La prima cosa di cui vale la pena parlare è che le regole per scrivere plugin per jQuery sono troppo imponenti, il che non contribuisce alla loro qualità. Durante la creazione dell'interfaccia utente jQuery, abbiamo deciso di standardizzare il processo di scrittura di plug-in e widget. Non posso dire quanto abbia avuto successo l’idea, ma era chiaramente migliore di prima. Inizierò descrivendo il framework per il tuo widget:

$.widget("book.expose" , ( // opzioni delle impostazioni predefinite: ( color: "red" ), // inizializzazione del widget // apporta modifiche al DOM e collega i gestori _create: function () ( this .element; / / l'oggetto cercato nel wrapper jQuery this .name; // name - espone questo .namespace; // space - prenota this .element.on("click." +this .eventNamespace, function () ( console .log(" fare clic su " ); )); ), // il metodo è responsabile dell'applicazione delle impostazioni _setOption: function ( key, value ) ( // applica le modifiche alle impostazioni this ._super("_setOption" , key, value); ), // il metodo _destroy dovrebbe essere l'opposto di _create // dovrebbe rimuovere tutte le modifiche apportate al DOM e rimuovere tutti i gestori, se presenti, _destroy: function () ( this .element.off("." +this .eventNamespace) ;)));

Mi spiego per chi non ha letto i commenti:

opzioni: memorizzazione delle impostazioni del widget per un elemento specifico

Create() – è responsabile dell'inizializzazione del widget – qui le modifiche dovrebbero verificarsi nel DOM e i gestori di eventi dovrebbero essere “bloccati”

Destroy() è l'antipodo di "_create()": dovrebbe ripulire tutto ciò che abbiamo disseminato

SetOption(chiave, valore) – questo metodo verrà chiamato quando si tenta di modificare qualsiasi impostazione:

$("#mio" ).expose((chiave:valore))

Un occhio attento noterà che tutti i metodi elencati iniziano con un carattere di sottolineatura: questo è un modo per evidenziare i metodi "privati" che non sono disponibili per l'esecuzione. Se proviamo a eseguire "$("#my").expose("_destroy")", riceveremo un errore. Ma tieni presente: questo è solo un accordo, mantienilo!

Per aggirare l’accordo sulla privacy, puoi utilizzare il metodo “data()”:

$("#my" ).data("expose" )._destroy() // posto per lo smiley "(evil)"

In questo esempio, ho provato a impostare un buon tono per la scrittura dei widget: ho "appeso" i gestori di eventi nello spazio dei nomi. Questo ti darà l'opportunità di controllare cosa accadrà in futuro senza dover entrare nel codice del widget. "Storia vera".

Il codice descritto nel metodo “_destroy()” è ridondante, perché è già eseguito nel pubblico “destroy()”. Presentato qui per chiarezza.

E per i più pigri, per non scrivere ogni volta "eventNamespace" nei gestori di eventi, gli sviluppatori hanno aggiunto due metodi nella versione 1.9.0: "_on()" e "_off()". Il primo accetta due parametri:

• Elemento DOM o selettore o oggetto jQuery
• un insieme di gestori di eventi come oggetto

Tutti gli eventi elencati si "bloccheranno" nello spazio "eventNamespace", ad es. il risultato sarà presumibilmente lo stesso:

this ._on(this .element, ( mouseover:funzione (evento ) ( console .log("Ciao mouse" ); ), mouseout:funzione (evento ) ( console .log("Ciao mouse" ); ) ));

Il secondo metodo, "_off()", consente di disabilitare selettivamente i gestori:

this ._off(this .element, "clic del mouseout" );

Bene, il telaio è una scialuppa, è ora di passare alla funzionalità. Aggiungiamo una funzione arbitraria con funzionalità arbitraria:

Chiamami:funzione () ( console .log("Ciao?" ); )

Possiamo accedere facilmente a questa funzione sia da altri metodi widget che dall'esterno:

// dall'interno di questo .callMe() // dall'esterno $("#my" ).expose("callMe" )

Se la tua funzione accetta parametri, questi vengono passati nel modo seguente:

$("#mio" ).expose("chiamami" , "Ciao!" )

Se vuoi raggiungere un metodo widget nel gestore eventi, non dimenticare l'ambito variabile ed esegui la seguente manovra:

( _create: function () ( var self = this ; // eccolo! this .element.on("click." +this .eventNamespace, function () ( // usa self qui, perché punta già a // elemento su cui clicchiamo self.callMe(); )) ) )

Ok, andiamo, ora parliamo degli eventi. Per uno sviluppo e un'implementazione più flessibili dei widget, viene fornita la funzionalità per creare eventi arbitrari e "ascoltarli":

// attiva l'evento questo ._trigger("incomingCall" ); // si iscrive all'evento quando il widget viene inizializzato $("#my" ).expose(( incommingCall: function (ev ) ( console .log("din-don"); ) )) // o dopo, utilizzando il nome evento // nome widget + nome evento $("#my" ).on("exposeincomingCall" , funzione () ( console .log("tru-lya-lya" ) ));

C'è molto materiale, capisco, ma aggiungerò anche una descrizione di diversi metodi che possono essere richiamati dal widget stesso:

Delay() – questa funzione funziona come "setTimeout()", solo il contesto della funzione passata punterà al widget stesso (questo per non preoccuparsi dell'ambito)

Hoverable() e _focusable() – questi metodi necessitano di essere alimentati con elementi per i quali è necessario ascoltare gli eventi “hover” e “focus” per aggiungere automaticamente “ui-state-hover” e “ui-state -focus” quando si verificano

Hide() e _show() – questi due metodi sono apparsi nella versione 1.9.0, sono stati creati per standardizzare il comportamento dei widget quando si utilizzano metodi di animazione; Le impostazioni sono solitamente nascoste nelle opzioni rispettivamente sotto i tasti "nascondi" e "mostra". I metodi dovrebbero essere utilizzati come segue:

( opzioni: ( hide: ( effetto: "slideDown" , // le impostazioni equivalgono alla durata della chiamata: 500 // .slideDown(500) ) ) ) // le chiamate a _hide() e _show() devono essere utilizzate all'interno del widget this ._hide(this .element, this .options.hide, function () ( // questa è la nostra funzione di callback console .log("hidden" ); ));

Ci sono un altro paio di metodi che sono stati implementati prima di noi:

( abilita: funzione () ( restituisce questo ._setOption("disabilitato" , false ); ), disabilita: funzione () ( restituisce questo ._setOption("disabilitato" , true ); ) )

Infatti, queste funzioni creano un sinonimo da chiamare:

$("#my" ).expose(( "disabled" : true )) // o false

Il nostro compito è semplicemente tracciare questo flag nel metodo “_setOption()”.

Introduzione alla libreria jQuery UI per la creazione di interfacce utente. Brevi istruzioni per principianti.

Cos'è l'interfaccia utente jQuery?

Interfaccia utente jQuery (dall'inglese) Interfaccia utente jQuery) è una libreria di widget e interazioni costruita sulla libreria JavaScript jQuery che può essere utilizzata per creare applicazioni Web altamente interattive.

Per familiarizzare visivamente con le funzionalità della libreria jQuery UI, visitare la pagina: Demo e documentazione - sul sito web jqueryui.com.

Ora che hai capito cos'è l'interfaccia utente di jQuery, puoi iniziare a selezionare i componenti necessari per caricare: UI Core (le funzioni principali dell'interfaccia utente), Interactions (interazioni), Widgets (widget), Effects (effetti) e Theme (temi di progettazione) - creando così la tua copia della libreria dell'interfaccia utente jQuery. Per fare ciò, visita la pagina: Crea il tuo download. Lì puoi scaricare rapidamente l'ultima versione stabile o legacy della libreria dell'interfaccia utente jQuery.

L'archivio ZIP della libreria jQuery UI scaricata conterrà quanto segue:

Per connettere la libreria jQuery UI, in genere sono sufficienti tre collegamenti: UI theme CSS, libreria jQuery e jQuery UI. Potrebbe assomigliare a questo:

Dopo aver incluso i file necessari, puoi iniziare ad aggiungere i widget necessari alla tua pagina. Ad esempio, per creare un DatePicker (dall'inglese. selezione della data, aggiungi un contenitore di testo:

E anche il codice JavaScript:

$(funzione())( $("#data").datepicker(); ));

Il risultato del browser che interpreta l'esempio precedente sarà simile al seguente:

Configurazione dell'interfaccia utente jQuery

L'interfaccia utente di jQuery è personalizzabile in diversi modi. Sai già come caricare la tua copia della libreria dell'interfaccia utente jQuery con i componenti di cui hai bisogno, ma ci sono altre opzioni per personalizzare questo codice per implementarlo.

Utilizzo delle opzioni. Ogni componente nell'interfaccia utente di jQuery ha una serie di impostazioni predefinite. Allo stesso tempo, puoi sempre modificarli utilizzando “opzione” (dall’inglese. opzione), passando il valore richiesto al componente.

Ad esempio, per impostare il formato della data per il widget DatePicker, puoi utilizzare l'opzione: dateFormat.

$("#data").datepicker(( dateFormat: "aa-mm-gg" ));

È possibile ottenere il valore dell'opzione dopo l'avvio del widget come segue:

var dateFormat = $("#data").datepicker("opzione", "dateFormat");

È possibile specificare il valore dell'opzione dopo aver avviato il widget come segue:

$("#data").datepicker("opzione", "dateFormat", "aa-mm-gg");

Personalizzazione visiva. Per personalizzare il tuo tema, l'interfaccia utente jQuery include ThemeRoller, che ti consente di personalizzare visivamente i componenti della tua interfaccia. Puoi utilizzare e saperne di più su questo strumento visitando la pagina:

Installazione della libreria dell'interfaccia utente jQuery

Scaricare e installare la libreria dell'interfaccia utente jQuery è in qualche modo più difficile rispetto ad altre librerie JavaScript. Questo processo non è esattamente laborioso, ma richiede una spiegazione, a cui è dedicato questo articolo. Per utilizzare gli esempi, dovrai solo installare la versione di sviluppo della libreria, ma di seguito viene descritto anche come installare file minimizzati destinati alla distribuzione di produzione e come utilizzare l'interfaccia utente jQuery su reti di distribuzione dei contenuti (CDN).

Ottenere la libreria dell'interfaccia utente jQuery

Il processo di caricamento della libreria dell'interfaccia utente jQuery è un po' più complesso rispetto ad altre librerie JavaScript, ma i risultati ne varranno la pena. La libreria dell'interfaccia utente jQuery copre cinque aree di funzionalità e ti viene data la possibilità di configurare tu stesso l'archivio di avvio, includendo solo i componenti necessari. Questa parte ti introdurrà a tutte le funzionalità della libreria jQuery UI, ma quando lavori con applicazioni web reali, puoi eliminare i componenti non necessari per ridurre la dimensione della libreria caricata dai browser.

Selezione di un tema

Prima di iniziare a creare la tua libreria dell'interfaccia utente jQuery, devi scegliere un tema. La libreria dell'interfaccia utente jQuery offre numerose opzioni e opzioni di configurazione, semplificando la modifica dell'aspetto di qualsiasi strumento utilizzato. In effetti, il numero di scelte disponibili è così ampio che a volte è davvero travolgente.

Sul sito web jQuery UI puoi utilizzare i servizi di un'applicazione speciale: un personalizzatore di temi (Themeroller), ma in più c'è un'intera galleria di temi predefiniti, completamente pronti per l'uso, da cui puoi scegliere quello che fa per te la maggior parte, e quindi semplificarti la vita.

Inizia visitando jqueryui.com e fai clic sul pulsante Temi. Si aprirà la pagina ThemeRoller, visualizzando i widget dell'interfaccia utente jQuery e un pannello delle impostazioni alla loro sinistra, con il quale è possibile impostare le opzioni del tema, come mostrato in figura:

Se hai già uno stile visivo specifico a cui devi aderire e desideri che l'interfaccia visiva degli strumenti dell'interfaccia utente JQuery sia coerente con il resto del sito o dell'applicazione, allora la scheda Roll Your Own (che è selezionata per impostazione predefinita ) è proprio questo.necessario. Puoi modificare qualsiasi aspetto del design utilizzando il set di stili CSS utilizzato dalla libreria dell'interfaccia utente jQuery.

Per ottenere uno dei temi già pronti, vai alla scheda Galleria. Al momento in cui scrivo, la galleria comprende 24 temi, che coprono un'ampia gamma di opzioni di colore, dai toni tenui e tenui a quelli luminosi e provocanti. Quando fai clic sui temi della galleria, l'aspetto dei widget visualizzati nel resto della pagina si aggiornerà di conseguenza, dandoti un assaggio di come potrebbe apparire l'applicazione:

Il tema predefinito utilizzato per l'interfaccia utente di jQuery si chiama Luminosità dell'interfaccia utente, ma questo tema non ha abbastanza contrasto, quindi utilizzerò il tema Soleggiato, che sembra un po' migliore. L'unica cosa che ti viene richiesta ora è ricordare il nome dell'argomento adatto a te.

Creazione di un archivio di download della libreria dell'interfaccia utente jQuery personalizzata

Dopo aver scelto un tema, puoi iniziare a creare il download della tua libreria dell'interfaccia utente jQuery. Fare clic sul pulsante Download nella parte superiore della pagina per accedere alla pagina Download Builder. Vedrai un elenco di componenti dell'interfaccia utente jQuery suddivisi in quattro gruppi funzionali: UI Core, Interazioni, Widget ed Effetti.

Scegliendo solo le funzionalità di cui il tuo progetto ha effettivamente bisogno, ridurrai la dimensione dell'insieme di file che i browser devono scaricare. Di per sé non è una cattiva idea, ma io adotto un approccio diverso. Dal mio punto di vista, è molto meglio risparmiare parte della larghezza di banda di comunicazione e scaricare il compito di fornire l'interfaccia utente jQuery ai browser su una delle reti di distribuzione dei contenuti, di cui parleremo più avanti.

Avrai bisogno di tutti i componenti per eseguire gli esempi, quindi assicurati che tutte le caselle siano selezionate.

Esistono delle dipendenze tra alcuni dei componenti nell'elenco, ma potresti non pensarci mentre crei la tua versione della libreria. Selezionando un componente verranno caricati contemporaneamente tutti i componenti da cui dipende.

Il passo successivo è scegliere un argomento. Questa operazione viene effettuata utilizzando l'elenco a discesa situato in fondo alla pagina, come mostrato in figura:

Hai anche la possibilità di selezionare una versione specifica della libreria dell'interfaccia utente jQuery da includere nell'archivio dei download. Dovrai scaricare la versione Stable, che funziona con tutte le versioni della libreria jQuery a partire dalla versione 1.3.2.

Dopo aver selezionato tutti i componenti e selezionato il tema e la versione stabile, scarica l'archivio di download della libreria dell'interfaccia utente jQuery personalizzata che hai creato facendo clic sul pulsante Scarica.

Installazione della versione di sviluppo della libreria dell'interfaccia utente jQuery

Il download dell'interfaccia utente jQuery contiene tutti i file necessari per utilizzare la libreria sia in fase di sviluppo che in produzione. Per lavorare con gli esempi, avrai bisogno di file che contengano codice sorgente non compresso e siano destinati all'uso durante lo sviluppo. Se riscontri problemi, puoi facilmente esaminare il codice per familiarizzare con gli interni della libreria dell'interfaccia utente jQuery, che sarà preziosa per il debug dei tuoi script.

Dovresti copiare i seguenti file e cartelle nella cartella dei file di esempio:

pacchetto-di-sviluppo\ui\jquery-ui.custom.js;

pacchetto-di-sviluppo\themes\sunny\jquery-ui.css;

cartella development-bundle\themes\sunny\images.

I nomi dei file JavaScript e CSS includono il numero di versione della versione della libreria scaricata. Nel mio caso questa è la versione 1.10.3. La libreria dell'interfaccia utente jQuery è in fase di sviluppo attivo e potresti essere in grado di scaricare una versione successiva alla 1.10.3.

Connessione della libreria dell'interfaccia utente jQuery a un documento HTML

Tutto quello che devi fare ora è includere la libreria jQuery UI nel tuo documento HTML. Puoi farlo aggiungendo script ed elementi di collegamento al tuo documento contenente collegamenti ai file JavaScript e CSS che hai caricato, come mostrato nell'esempio seguente:

libreria jQuery

Non è necessario collegarsi direttamente alla cartella delle immagini. Finché la cartella delle immagini e il file CSS sono presenti, l'interfaccia utente di jQuery sarà in grado di trovare in modo indipendente tutte le risorse necessarie.

La libreria dell'interfaccia utente jQuery dipende dalla libreria jQuery. Per utilizzare l'interfaccia utente jQuery in un documento, è necessario prima connettersi ad esso. La libreria dell'interfaccia utente jQuery non è una libreria autonoma.

Il documento mostrato nell'esempio sopra contiene un semplice test per verificare che la libreria jQuery UI sia inclusa correttamente. Se la pagina si apre normalmente, dovresti vedere un pulsante simile a quello mostrato in figura. Per ora, ignora la chiamata al metodo button() sull'elemento script. Imparerai a cosa è destinato e come funziona nel prossimo articolo.

Se scrivi in ​​modo errato il percorso di una delle due librerie, vedrai invece un semplice collegamento.

Installazione della libreria dell'interfaccia utente jQuery per l'ambiente di produzione

Una volta che hai finito di sviluppare la tua applicazione web e sei pronto per distribuirla, puoi utilizzare versioni ridotte dei file inclusi nell'archivio di download. Questi file sono di dimensioni inferiori, ma il loro contenuto non sarà facile da leggere se necessario per scopi di debug. Per utilizzare le versioni di distribuzione dei file, copiare i seguenti file e cartelle nella directory del server Web:

jquery-ui-1.10.3.custom.min;

jquery-ui-1.10.3.custom.min

cartella css\sunny\images

La cartella delle immagini e il file CSS qui sono gli stessi della versione di sviluppo; le modifiche possono influenzare solo il file JavaScript. Per eseguire un'installazione pulita, copiare semplicemente questi file nella directory del server.

Utilizzo della libreria dell'interfaccia utente jQuery tramite una rete di distribuzione dei contenuti

La questione dell'utilizzo di una CDN per caricare la libreria jQuery è già stata affrontata in precedenza. Se sei un fan di questo approccio, sarai felice di sapere che puoi fare la stessa cosa con la libreria jQuery UI. Sia Google che Microsoft forniscono l'hosting dei file dell'interfaccia utente jQuery sui propri CDN. Per il nostro esempio di base, utilizzo il servizio Microsoft perché fornisce sia file JavaScript dell'interfaccia utente jQuery che skin standard.

Per utilizzare una CDN, devi avere gli URL dei file che ti servono. Se si tratta di un servizio Microsoft, vai alla pagina Rete per la distribuzione di contenuti Microsoft Ajax. Mentre scorri la pagina, vedrai un elenco di collegamenti corrispondenti a diverse versioni dell'interfaccia utente di jQuery. Fai clic sul collegamento relativo alla versione che stai utilizzando (nel mio caso è la versione 1.10.3). Vedrai gli URL per le versioni normali e ridotte del file della libreria dell'interfaccia utente jQuery.

Il resto della pagina mostra temi predefiniti, con l'URL di un file CSS sotto ciascun tema.

Per connettere questi file al tuo documento tramite una CDN, inserisci semplicemente gli elementi script e link negli URL corrispondenti anziché collegamenti ai file UI jQuery locali, come mostrato nell'esempio seguente:

libreria jQuery $(funzione() ( $("a").pulsante(); )); Visita il sito www.professorweb.ru

Anche in questo caso, un segnale che gli URL sono stati specificati correttamente sarà la visualizzazione di un pulsante sulla pagina che si apre, simile a quello mostrato nella figura sopra.

Tutto è semplice quando si collega jquery. Ci sono 2 opzioni:
• Per lavorare offline, scarica il file stesso con la libreria jQuery e collegalo
• Per lavorare online, collega rapidamente jQuery dal repository Google o Microsoft con una riga di codice

Ogni opzione ha i suoi pro e contro. Diamo un'occhiata più da vicino a loro.

Collegamento di jquery tramite Google o Microsoft

Per connettere l'ultima versione di jquery tramite Google è necessario aggiungere una riga di codice all'interno

– tutto è estremamente veloce e conveniente:

Per collegare la versione esatta (in questo caso 1.11.0):

Puoi sempre vedere il numero esatto dell'ultima versione, quindi modificare semplicemente questi numeri nel codice e tutto funzionerà.

Per connettere jquery tramite Microsoft, aggiungi il codice:

La connessione con Google è positiva perché molti siti collegano jQuery allo stesso modo: tramite l'API di Google e c'è sempre un'alta probabilità che questa libreria sia già caricata nella cache del browser dell'utente e non venga caricata una seconda volta.

Collegamento di jquery scaricando un file con la libreria

Colleghiamo jQuery dalla pagina del nostro sito Web: richiede più tempo, ma è più affidabile. Per fare questo è necessario:
scarica la libreria jquery dal sito ufficiale, salvala in un file, chiamiamolo jquery-1.11.0.min.js, inseriscilo nella cartella js del nostro sito e aggiungi il seguente codice a

:

L'src specifica il percorso in cui si trova il nostro file jquery, che deve essere collegato alla pagina del sito.

E infine, l'opzione più affidabile e perforante è connettersi con Google; se Google non è disponibile, connettiti dal tuo sito web:

if (typeof jQuery == "unDefinito") ( document.write(unescape("%3Cscript src="/js/jquery-1.11.0.min.js" type="text/javascript"%3E%3C/script% 3E")); )

Oppure l'opzione più moderna: ci registriamo

Il seguente codice: google.load("jquery", "1.11.0"); google.setOnLoadCallback(jQueryIsLoaded); funzione jQueryIsLoaded() ( alert("jQuery da Google caricato"); ) if (tipo di jQuery == "unDefinito") ( document.write(unescape("%3Cscript src="/js/jquery-1.11.0.min. js" type="text/javascript"%3E%3C/script%3E")); )

Dall'autore: Saluti, amici. In questo articolo inizieremo a conoscere la libreria dell'interfaccia utente jQuery, che ti consente di implementare molte interessanti soluzioni già pronte sul tuo sito web: calendario, fisarmonica, ricerca dal vivo, bellissimi effetti di animazione e molto altro. In questo articolo impareremo come scaricare e connettere la libreria jQuery UI.

Allora perché abbiamo bisogno della libreria dell'interfaccia utente jQuery? In realtà, allora, perché ci rivolgiamo a plugin di terze parti: per installare e utilizzare soluzioni già pronte sul sito. Ma la libreria dell'interfaccia utente jQuery è una soluzione completa, ad es. qui troverai non solo una cosa, ma un intero pacchetto di widget, effetti e plugin per lavorare con vari eventi.

Puoi scaricare l'intero pacchetto o selezionare uno o più widget. Nella libreria dell'interfaccia utente jQuery sono incluse anche due dozzine di temi per quasi tutti i gusti. Anche questo è un vantaggio significativo.

Passiamo dalle parole ai fatti: scarica e installa la libreria jQuery UI. Andiamo sul sito ufficiale e passiamo alla sezione Download. Qui è dove possiamo selezionare i componenti da scaricare e il tema.

JavaScript. Inizio veloce

Impara le nozioni di base di JavaScript con un esempio pratico su come creare un'applicazione web.

È possibile selezionare un argomento dall'elenco a discesa nella parte inferiore della pagina.

Inoltre, se lo desideri, puoi progettare il tuo tema con il tuo design; per fare ciò, basta fare clic sul collegamento Progetta un tema personalizzato, che si trova immediatamente sopra l'elenco a discesa. Nella pagina che si apre potremo modificare caratteri, colori e altri design degli elementi, osservando le modifiche online, in generale, possiamo progettare il nostro tema.

Ma torniamo alla pagina precedente e scarichiamo tutti i componenti della libreria jQuery UI con il tema Base.

Nell'archivio risultante avremo bisogno di un file di stili (jquery-ui.css) e di un file di script (jquery-ui.js). Entrambi i file sono offerti in versione normale e compressa, quindi puoi sceglierne uno. Beh, ovviamente avrai bisogno della libreria jQuery, collegherò la versione 1.11.3 dal servizio Google.

Di conseguenza, la pagina con tutte le connessioni sarà simile a questa:

< link rel = "stylesheet" href = "ui/jquery-ui.css" >