Guida introduttiva a jQuery UI

link Cos’è jQuery UI?

jQuery UI è un widget e libreria di interazione costruito sulla parte superiore della libreria jQuery JavaScript che è possibile utilizzare per costruire applicazioni web altamente interattive. Questa guida è progettata per aggiornarti su come funziona jQuery UI. Segui qui sotto per iniziare.

link Inizia controllando le demo

Per avere un’idea di cosa sia l’interfaccia utente di jQuery, controlla le demo dell’interfaccia utente.

Nella sezione demo, la navigazione elenca tutte le interazioni e i widget che jQuery UI offre. Scegli un’interazione o un widget e ti verranno presentate diverse configurazioni demo per quel particolare plugin. Ogni demo consente di visualizzare il codice sorgente, cambiare i temi, e l’URL può sempre essere segnalibro. Ad esempio, controlla la pagina demo dello spazio di riempimento del widget fisarmonica.

link Crea la tua UI jQuery personalizzata Scarica

Una volta che hai una conoscenza di base di cosa è jQuery UI e cosa fa, sei pronto per provarlo! È ora di andare al Generatore di download sul sito Web di jQuery UI per scaricare una copia di jQuery UI. Download Builder di jQuery UI consente di scegliere i componenti che si desidera scaricare e ottenere una versione personalizzata della libreria per il progetto. Ci sono tre semplici passaggi per costruire il tuo download personalizzato di jQuery UI:

link Passo 1: Scegli quali componenti hai bisogno

La colonna principale del Generatore di download elenca tutti i componenti JavaScript in jQuery UI classificati in gruppi: core, interazioni, widget ed effetti. Alcuni componenti in jQuery UI dipendono da altri componenti. Basta selezionare le caselle per i widget che desideri scaricare e tutte le dipendenze richieste verranno automaticamente controllate. I componenti selezionati verranno tutti combinati in un file JavaScript jQuery UI personalizzato.

link Passo 2: Seleziona un tema (o fai rotolare il tuo tema personalizzato)

Nella colonna di destra del Generatore di download, troverai un campo in cui puoi scegliere tra una serie di temi pre-progettati per i tuoi widget jQuery UI.È possibile scegliere tra i vari temi che forniamo, oppure è possibile progettare il proprio tema personalizzato utilizzando ThemeRoller (ne parleremo più avanti).

Impostazioni avanzate del tema: La sezione tema del Generatore di download offre anche alcune impostazioni di configurazione avanzate per il tema. Se si prevede di utilizzare più temi su una singola pagina, questi campi saranno utili. Se si prevede di utilizzare un solo tema in una pagina, è possibile saltare queste impostazioni del tutto.

collegamento Passo 3: Scegliere una versione di jQuery UI

L’ultimo passo nel Generatore di download è quello di selezionare un numero di versione. Assicurati di controllare non solo quale versione di jQuery UI scegli, ma anche la versione di jQuery Core supportata dalla versione, poiché diverse versioni della libreria supportano diverse versioni di jQuery. Per ulteriori informazioni sulle novità di ogni versione di jQuery UI, consultare le guide di aggiornamento e i changelog del progetto.

collegamento Clicca Scarica!

Hai finito con il Generatore di download! Fai clic sul pulsante Download e otterrai un file zip personalizzato contenente tutto ciò che hai selezionato.

collegamento Panoramica di base: Utilizzando jQuery UI su una pagina Web

Quindi, aprireindex.html dallo zip scaricato in un editor di testo. Vedrai che fa riferimento al tuo tema, jQuery e jQuery UI. In generale, è necessario includere questi tre file in qualsiasi pagina per utilizzare i widget e le interazioni dell’interfaccia utente jQuery:

<link rel="stylesheet" href="jquery-ui.min.css">
<script src="external/jquery/jquery.js"></script>
<script src="jquery-ui.min.js"></script>

una Volta che hai inserito i file necessari, è possibile aggiungere alcuni widget jQuery per la tua pagina. Ad esempio, per creare un widget datepicker, aggiungerai un elemento di input di testo alla tua pagina e quindi chiamerai .datepicker() su di esso. Come questo:

HTML:

<input type="text" name="date">

JavaScript:

$( "#date" ).datepicker();

link That’s It!

For demos of all of the jQuery UI widgets and interactions, check out the demos section of the jQuery UI website.

collegamento Personalizzazione jQuery UI alle vostre esigenze

jQuery UI consente di personalizzare in diversi modi. Hai già visto come il Generatore di download ti consente di personalizzare la tua copia di jQuery UI per includere solo le parti che desideri, ma ci sono altri modi per personalizzare quel codice per la tua implementazione.

link jQuery UI Basics: Utilizzo delle opzioni

Ogni plugin in jQuery UI ha una configurazione predefinita che si adatta al caso d’uso più semplice e comune. Ma se vuoi che un plugin si comporti in modo diverso dalla sua configurazione predefinita, puoi sovrascrivere ciascuna delle sue impostazioni predefinite usando “opzioni”. Le opzioni sono un insieme di proprietà passate in un widget jQuery UI come argomento. Ad esempio, il widget cursore ha un’opzione per l’orientamento, che consente di specificare se il cursore deve essere orizzontale o verticale. Per impostare questa opzione per un cursore sulla tua pagina, basta passarla come argomento, in questo modo:

$( "#mySliderDiv" ).slider({
 orientation: "vertical"
});

You can pass as many different options as you’d like by following each one with a comma (except the last one):

$( "#mySliderDiv" ).slider({
 orientation: "vertical",
 min: 0,
 max: 150,
 value: 50
});

Basta ricordarsi di surround vostre opzioni con parentesi graffe { } e siete bene sul vostro modo. Naturalmente, l’esempio sopra tocca a malapena ciò che puoi fare con l’interfaccia utente jQuery. Per ottenere informazioni dettagliate sull’intero set di widget dell’interfaccia utente jQuery, visitare la documentazione dell’interfaccia utente jQuery.

collegamento personalizzazione visiva: Progettazione di un tema jQuery UI

Se si desidera progettare il proprio tema, jQuery UI ha un’applicazione molto liscia proprio per questo scopo. Si chiama ThemeRoller, e si può sempre arrivare ad esso facendo clic sul link “Temi” nella navigazione jQuery UI, o semplicemente andando a jQuery UI ThemeRoller.

ThemeRoller fornisce un’interfaccia personalizzata per la progettazione di tutti gli elementi utilizzati dai widget jQuery UI. Mentre modifichi le “leve” nella colonna di sinistra, i widget sulla destra rifletteranno il tuo design. La scheda Galleria di ThemeRoller offre una serie di temi pre-progettati (gli stessi offerti dal Generatore di download) che è possibile modificare o scaricare così come sono.

link Scaricare il tema

Quando si fa clic sul pulsante “Scarica tema” in ThemeRoller, sarete indirizzati al Generatore di download e il tema personalizzato verrà selezionato automaticamente nel menu a discesa tema. È possibile configurare il pacchetto di download più lontano da lì. Una volta scaricato, vedrai che la pagina example.html è disegnata usando il tuo tema personalizzato.

Suggerimento rapido: Se hai bisogno di modificare il tuo tema, apri semplicemente il file CSS e trova dove dice “Per visualizzare e modificare questo tema, visita …”Quell’URL aprirà il tema in ThemeRoller per la modifica.

Supporto collegamento: dove posso ottenere aiuto?