jQuery UI Demos jQuery UI offre una combinazione di interazioni, effetti, widget, utilità e temi progettati per lavorare bene insieme o da soli. Gioca con le demo, visualizzare il sorgente, costruire un tema. leggere la documentazione delle API e iniziare a utilizzare jQuery UI oggi. Interazioni Interazioni aggiungono comportamenti di base basato sul mouse a qualsiasi elemento. È possibile creare liste ordinabili, elementi ridimensionabili, comportamenti goccia trascinare ampli e di più con poche righe di codice. Interazioni anche fare grandi blocchi di costruzione per altri widget e le applicazioni complesse. I widget sono i comandi full-optional dell'interfaccia utente che portino la ricchezza delle applicazioni desktop al Web. Tutti i widget forniscono una solida base con un sacco di punti di estensione per personalizzare il comportamento, così come il supporto completo tematizzazione. Effetti aggiungere il supporto per l'animazione colori e transizioni di classe, oltre a fornire diversi easing supplementari. Inoltre, una suite completa di effetti personalizzati sono disponibili per l'uso quando mostrare e nascondere gli elementi o solo per aggiungere un po 'di appeal visivo. Utilità utilizzati da jQuery UI per costruire interazioni e widget. InteractionsTabs Widget schede sono generalmente utilizzati per rompere i contenuti in più sezioni che possono essere scambiati per risparmiare spazio, molto simile a una fisarmonica. Il contenuto di ogni pannello scheda può essere definita in-page o può essere caricato tramite Ajax entrambi sono gestite automaticamente in base al href dell'ancora associato alla scheda. Per impostazione predefinita, le schede vengono attivati al click, ma gli eventi possono essere modificati per librarsi tramite l'opzione evento. Note aggiuntive: Questo widget richiede un po 'di CSS funzionale, altrimenti wonapost lavoro. Se si crea un tema personalizzato, utilizzare il file CSS widgetaposs specifica come punto di partenza. ajaxOptionsxA0 Ulteriori opzioni Ajax da considerare durante il caricamento di contenuti scheda (vedi jQuery. ajax ()). cachexA0 O meno di memorizzare nella cache il contenuto schede a distanza, ad esempio caricare solo una volta o con ogni clic. contenuto memorizzato nella cache viene pigro caricato, ad esempio una volta e solo una volta per il primo scatto. Si noti che per evitare che le richieste effettive Ajax di essere memorizzate nella cache dal browser è necessario fornire una cache in più: false flag nell'opzione ajaxOptions. collapsiblexA0 Quando è impostata su true. pannello attivo può essere chiuso. cookiexA0 Conservare l'ultima scheda selezionata in un cookie. Il cookie viene poi utilizzato per determinare la scheda inizialmente selezionato se l'opzione selezionata non è definita. Richiede il plugin biscotto, che può anche essere trovato nella cartella di sviluppo-fascio-esterno dal builder scaricare. L'oggetto deve avere coppie keyValue della forma del plugin biscotto si aspetta come opzioni. Esempio: . Dal momento che jQuery UI 1.7 è anche possibile definire il nome del cookie utilizzato tramite la proprietà nome. disabledxA0 Quali schede sono disattivate. tipi multipli supportati: booleano. Attivare o disattivare tutte le schede. Array. Un array che contiene gli indici a base zero le schede che dovrebbero essere disattivati, per esempio 0, 2 sarebbe disattivare la prima e terza scheda. eventxA0 Il tipo di evento che le linguette dovrebbero reagire al fine di attivare la scheda. Per attivare il passaggio del mouse, usare quotmouseoverquot. Abilita animazioni per hidniga ND mostrando pannelli struttura a schede. tipi multipli supportati: oggetto. coppie keyvalue di oggetti da animare e durata opzionale, ad esempio . Array. impostazioni di animazione nelle hideSettings forma, showSettings. idPrefixxA0 Se la scheda remota, il suo elemento di ancoraggio che è, non ha alcun attributo title per generare un ID da un identificatore idfragment è creato da questo prefisso e un ID univoco, per esempio quotui-schede-54quot. modello panelTemplatexA0 HTML dalla quale un nuovo pannello a schede si crea in caso di aggiunta di una scheda con il metodo add () o durante la creazione di un pannello per una scheda a distanza al volo. selectedxA0 L'indice a base zero del pannello che viene selezionato (aperto). Impostazione selezionata a -1 crollerà tutti i pannelli. Ciò richiede l'opzione pieghevole per essere vero. contenuti spinnerxA0 Il codice HTML per mostrare in un titolo della scheda mentre il contenuto a distanza sta caricando. Impostare questa opzione su una stringa vuota per disattivare il comportamento filatrice. Un elemento arco deve essere presente nel tag di ancoraggio del titolo per il contenuto filatore di essere visibile. modello tabTemplatexA0 HTML dalla quale viene creata una nuova scheda e aggiunto. I segnaposto e vengono sostituiti con l'etichetta URL e scheda che vengono passati come argomenti al metodo add (). abort () restituisce: jQuery (plug-in solo) Terminare il tutto in esecuzione richieste Ajax scheda e animazioni. Questo metodo non accetta alcuna interazione tastiera arguments. Tabs Widget Quando focus è su una scheda, i seguenti comandi sono disponibili: in alto a sinistra. Spostare attenzione alla scheda precedente. Se sulla prima scheda, l'attivazione si sposta all'ultimo scheda. Attiva scheda concentrata dopo un breve ritardo. Destra verso il basso. Spostare attenzione alla scheda successiva. Se da ultima scheda, l'attivazione si sposta alla prima scheda. Attiva scheda concentrata dopo un breve ritardo. CTRL in alto a sinistra. Spostare attenzione alla scheda precedente. Se sulla prima scheda, l'attivazione si sposta all'ultimo scheda. La scheda concentrata deve essere attivato manualmente. CTRL in basso a destra. Spostare attenzione alla scheda successiva. Se da ultima scheda, l'attivazione si sposta alla prima scheda. La scheda concentrata deve essere attivato manualmente. CASA. Spostare messa a fuoco per la prima scheda. Attiva scheda concentrata dopo un breve ritardo. FINE. Spostare attenzione all'ultima scheda. Attiva scheda concentrata dopo un breve ritardo. CTRL HOME. Spostare messa a fuoco per la prima scheda. La scheda concentrata deve essere attivato manualmente. CTRL END. Spostare attenzione all'ultima scheda. La scheda concentrata deve essere attivato manualmente. SPAZIO. Attivare relativo pannello con scheda concentrato. ACCEDERE. Attivare o commutare pannello associato con scheda concentrato. ALT OPZIONE SU PAG. Spostare attenzione alla scheda precedente e attivare immediatamente. ALT OPZIONE PGGIÙ. Spostare attenzione alla scheda successiva e attivare immediatamente. Quando messa a fuoco è in un pannello, i seguenti comandi sono disponibili: CTRL UP. Spostando il cursore sulla scheda associata. ALT OPZIONE SU PAG. Spostare attenzione alla scheda precedente e attivare immediatamente. ALT OPZIONE PGGIÙ. Spostare attenzione alla scheda successiva e attivare immediatamente. Il widget di schede utilizza il framework di interfaccia utente CSS jQuery per lo stile il suo aspetto grafico. Se è necessario uno stile specifico le schede, i seguenti nomi delle classi CSS possono essere utilizzati per le sostituzioni o come chiavi per l'opzione classi: ui-schede. Il contenitore esterno delle schede. Questo elemento sarà inoltre avere una classe di ui-schede-pieghevole quando l'opzione pieghevole è impostata. ui-tabs-nav. L'elenco delle schede. ui-tabs-Tab. Uno degli elementi della lista di tabs. The elemento attivo avrà la classe ui-schede-attiva. Ogni elemento della lista il cui contenuto associato is loading tramite una chiamata Ajax avrà la Class UI-schede-caricamento. ui-schede-ancoraggio. Le ancore usati per commutare pannelli. ui-tabs-panel. I pannelli associati con le schede. Solo il pannello la cui scheda corrispondente è attivo sarà visibile. Dipendenze Note aggiuntive: Questo widget richiede un po 'di CSS funzionale, altrimenti wonapost lavoro. Se si crea un tema personalizzato, utilizzare il file CSS widgetaposs specifica come punto di partenza. Pannello activexA0 che è attualmente aperto. tipi multipli supportati: booleano. L'impostazione attiva a false crollerà tutti i pannelli. Ciò richiede l'opzione pieghevole per essere vero. Numero intero . L'indice a base zero del pannello che è attivo (aperto). Un valore negativo seleziona pannelli che vanno indietro rispetto l'ultimo pannello. esempi di codice: inizializzare le schede con l'opzione attiva specificato:
No comments:
Post a Comment