jQuery schede scorre all'inizio della pagina quando si utilizza l'opzione FX. Questo è più irritante quando gli utenti quanto per creare slide-show effetti come le animazioni causano pagina per saltare verso l'alto, e non vi è alcun modo per evitare questo attraverso i mezzi tipici di ritorno falso per mostrare gli eventi, ecc Sembra questo accade solo con l'opzione FX: ie. Funziona bene, tuttavia seguente solito: dopo avere attaccato il naso nel codice sorgente schede, ho trovato questa linea:. Show. hide () removeClass (ui-tabs-nascondere) evitare lo sfarfallio in questo modo Sembra la chiamata per nascondere () è innescando questo per qualche ragione. Rimuovere la chiamata per nascondere si fermerà il problema, ma come il commento suggerisce, questo fa sì che lo spettacolo di animazione di sfarfallio. (3) Commento: 1 Modificato 7 fa da MiiJaySung OK, dopo un po 'Googling, Ive ha inciampato in questo: The Wrap il div che contiene le schede in un div con altezza fissa. commento sembra funzionare, e stavo pensando a un linee simili che questo è dovuto sia articoli che sono nascosti. Detto questo, sarebbe utile di questa eccentricità è documentato modo che gli utenti siano consapevoli e in grado di gestire la situazione come si sentono funziona meglio per loro. Commento: 2 Modificato 7 fa da scalvert Questo non solo avviene quando si utilizza l'opzione fx. Im sperimentare usando il seguente markup: selezionato: vars. userStateSelectedTab, filatore: falso, selezionare: la funzione (evento, ui) (schede-carico).Show () tabSelected vero, carico: la funzione (evento, ui) parametri var getParameters ( ) Tabs widget interazione tastiera 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: schede in jQuery UI 1.7 Il widget UI schede viene utilizzato per attivare o disattivare la visibilità attraverso una serie di elementi diversi, a ogni elemento contenente il contenuto che si può accedere cliccando sul suo titolo, che appare come un scheda individuale. Le linguette sono strutturati in modo che siano allineati uno accanto all'altro, mentre le sezioni di contenuto sono stratificati uno sopra l'altro, con solo la parte superiore visibile. Facendo clic su una scheda evidenzierà la scheda e portare il suo pannello contenuto associato in cima alla pila. Solo un pannello contenuto può essere aperto alla volta. La seguente immagine mostra i diversi componenti di una serie di schede di interfaccia utente: Un'implementazione scheda Base La struttura degli elementi HTML sottostanti, su cui si basano le schede, è rigido e widget richiedono un certo numero di elementi per loro di lavorare. Le schede devono essere creati da un elemento di lista (ordinata o non ordinata) e ogni elemento della lista deve contenere un elemento ltagt. Ogni collegamento dovrà avere un corrispondente elemento con id specificato che è associato con i collegamenti attributo href. Ebbene chiarire l'esatta struttura di questi elementi dopo il nostro primo esempio. In un nuovo file con un editor di testo, creare la seguente pagina: Salvare il codice come tabs1.html nella cartella di lavoro jQueryUI. Consente di rivedere ciò che è stato utilizzato. Le seguenti risorse di script e CSS sono necessari per il widget scheda predefinita esemplificazione: Un widget scheda è costituito da diversi elementi HTML standard, disposti in maniera specifica (queste possono essere sia hardcoded nella pagina, o aggiunti in modo dinamico, o può essere una miscela di entrambi a seconda delle esigenze della vostra implementazione). Un elemento contenitore esterno, che il metodo di schede viene chiamato su un elemento della lista (ltulgt o ltolgt) Un elemento ltagt per ogni scheda Un elemento per il contenuto di ogni scheda I primi due elementi all'interno del contenitore esterno fare le intestazioni delle schede cliccabili, che sono utilizzato per mostrare la sezione contenuto associato con la scheda. Ogni scheda deve includere un elemento della lista che contiene il collegamento. L'attributo href del collegamento deve essere impostato come un identificatore di frammento, con prefisso. Esso dovrebbe corrispondere all'attributo id dell'elemento che forma la sezione di contenuto, con cui è associato. Le sezioni di contenuto di ogni scheda vengono creati dagli elementi. L'attributo id è richiesto e saranno diretti dal suo elemento corrispondente. Weve utilizzati elementi in questo esempio i pannelli di contenuto per ogni scheda, ma altri elementi, quali elementi possono anche essere usati. Gli elementi discussi finora, insieme ai loro attributi richiesti, sono il minimo che sono richiesti dal sottostante markup. We collegamento in diverse risorse ltscriptgt dalla libreria nella parte inferiore della ltbodygt prima della sua tag di chiusura. Caricamento script scorso, dopo i fogli di stile e gli elementi della pagina è una tecnica collaudata per migliorare le prestazioni. Dopo il collegamento prima di jQuery, ci collegamento al file ui. core. js che è richiesto da tutti i componenti (eccetto gli effetti, che hanno un proprio file core). Abbiamo poi link al file componenti di origine che in questo caso è ui. tabs. js. Dopo le tre file di script necessari dalla libreria, possiamo rivolgerci al nostro elemento scriptgt lt personalizzato in cui si aggiunge il codice che crea le schede. Abbiamo semplicemente usato il () function () di scelta rapida per eseguire il nostro codice quando il documento è pronto. Abbiamo quindi chiamare il metodo widget di schede () sull'oggetto jQuery, che rappresenta il nostro elemento contenitore schede (il ltulgt con un ID di myTabs).Quando si corre il file in un browser, dovremmo vedere le schede come apparivano nel primo screenshot di questo articolo (senza le annotazioni di corso). classi del framework Tab CSS utilizzando Firebug per Firefox (o un altro DOM esploratore generico) possiamo vedere che una varietà di nomi di classe sono aggiunti ai vari elementi HTML di base che il widget di schede viene creato da, come mostrato nello screenshot seguente: Consente di rivedere questi brevemente. Per l'esterno del contenitore lt divgt sono aggiunti i seguenti nomi di classe: Applied angoli arrotondati ai bordi inferiori dei pannelli di contenuto Tutte queste classi sono aggiunti agli elementi sottostanti automaticamente dal biblioteca, noi non è necessario aggiungerli manualmente quando la codifica della pagina . Poiché queste tabelle illustrano, il quadro CSS fornisce il set completo di entrambi gli stili CSS strutturali che controllano come la funzione di schede e gli stili specifici a tema che controllano la modalità di visualizzazione delle schede, ma non il loro funzionamento. Possiamo facilmente vedere quali selettori bene hanno bisogno di ignorare se si vuole modificare l'aspetto del widget, che è quello che ben fare nella sezione seguente. Applicazione di un tema personalizzato per le schede Nel prossimo esempio, possiamo vedere come modificare le schede aspetto di base. Siamo in grado di ignorare le regole utilizzate esclusivamente per scopi di visualizzazione con le nostre regole di stile proprio per la personalizzazione rapida e semplice senza cambiare le regole relative alla funzionalità di scheda o la struttura. In un nuovo file nel vostro editor di testo, creare il seguente foglio di stile molto piccola. Questo è tutto quello che dobbiamo. Salvare il file come tabsTheme. css nella cartella css. Se si confrontano i nomi delle classi con le tabelle nelle pagine precedenti youll vedere che sono state sovrascrivendo il stili specifici a tema. Perché sono stati sovrascrivendo il file del tema, abbiamo bisogno per soddisfare o superare la specificità dei selettori in theme. css. Questo è il motivo per cui puntiamo più selettori a volte. In questo esempio ignorare alcune delle regole in ui. tabs. css. Dobbiamo usare il selettore ID del nostro elemento contenitore con il selettore da ui. theme. css (.ui-widget di-contenuto) al fine di battere il doppio selettore di classe. ui-tabs. ui-schede-panel. Non dimenticate di collegare il nuovo foglio di stile dal headgt lt del file HTML sottostante, e assicurarsi che il foglio di stile personalizzato appena creato appare dopo il file ui. tabs. css: Le regole che stiamo cercando di ignorare non verranno sovrascritti da il nostro file del tema se i fogli di stile non sono collegati a nell'ordine corretto. Salvare il file modificato come tabs2.html nella cartella jQueryUI e visualizzarlo in un browser. Esso dovrebbe essere simile alla seguente schermata: Il nostro nuovo depliant tema drammaticamente diversa da quella morbidezza di default. Tuttavia, siamo in grado di modificare il suo aspetto per soddisfare le nostre esigenze e preferenze con l'aggiunta di pochi altri stili. opzioni configurabili Ciascuna delle diverse componenti della biblioteca ha una serie di opzioni diverse che controllano che dispone del widget sono abilitate di default. Un oggetto letterale può essere passato nel metodo widget di schede per configurare queste opzioni. Le opzioni disponibili per configurare i comportamenti non predefinite quando si utilizza il widget di schede sono riportati nella seguente tabella: Una stringa che specifica gli elementi utilizzati per la creazione di nuove schede in modo dinamico. Si noti che sia un ltagt e un tag ltspangt vengono creati quando nuove schede vengono aggiunte dal widget. Le e parti della stringa vengono utilizzati internamente dal widget e vengono sostituiti con i valori reali dal widget. Selezione di una scheda Vediamo come possono essere utilizzate queste proprietà configurabili. Per esempio, consente di configurare il widget in modo che la seconda scheda viene visualizzato quando il caricamento della pagina. Rimuovere il linkgt lt per tabsTheme. css nel headgt lt e cambiare l'elemento finale lt scriptgt in modo che appaia come segue: Salva come tabs3.html. Le diverse schede ei loro pannelli contenuto associati sono rappresentati da un indice numerico partendo da zero, come una matrice JavaScript standard. Definizione di una scheda diversa per aprire di default è facile come fornendo un numero di indice come valore per la proprietà selezionata. Quando la pagina viene caricata, deve essere selezionata la seconda scheda. Weve commutato al tema di default scorrevolezza in modo da poter concentrarsi su come le proprietà di lavoro. Insieme a cambiare scheda che viene selezionato possiamo anche specificare che non le schede dovrebbero essere inizialmente selezionati fornendo null come valore per questa proprietà. Questo farà sì che il widget di apparire come segue il caricamento della pagina: la disabilitazione di una scheda Si consiglia una scheda particolare per essere disattivato fino a quando una determinata condizione è soddisfatta. Ciò si ottiene facilmente manipolando la struttura disabili delle schede. Modificare l'oggetto di configurazione in tabs3.html a questo: Salva come tabs4.html nella cartella jQueryUI. In questo esempio, si rimuove la proprietà selezionata e aggiungere l'indice della seconda scheda alla matrice disabili. Potremmo aggiungere gli indici delle altre schede per questo array così, separati da una virgola, per disabilitare più schede per impostazione predefinita. Quando la pagina viene caricata in un browser, la seconda scheda ha il nome della classe ui-widget di disabile applicato ad esso, e prenderà gli stili disabili da ui. theme. css. Non risponderà alle interazioni del mouse in qualsiasi modo, come mostrato nello screenshot seguente: effetti di transizione che possono facilmente aggiungere effetti di transizione interessanti utilizzando la proprietà fx. Questi vengono visualizzati quando le schede sono aperti e chiudere. Questa struttura è configurata utilizzando un altro letterale oggetto (o un array) all'interno del nostro oggetto di configurazione, che consente uno o più effetti. Consente di abilitare effetti di dissolvenza utilizzando il seguente oggetto di configurazione: Salvare il file come tabs5.html nella cartella jQueryUI. L'oggetto fx che abbiamo creato ha due proprietà. La prima proprietà è l'animazione. Per utilizzare lo sbiadimento, specifichiamo l'opacità come questo è ciò che viene regolata. Si precisa altezza come il nome della proprietà, invece di utilizzare le animazioni di apertura. Commutando l'opacità inverte semplicemente il suo impostazione corrente. Se è attualmente visibile, viene reso invisibile e viceversa. La seconda proprietà, la durata. specifica la velocità a cui avviene l'animazione. I valori per questa proprietà sono lenti. normale (valore di default), o veloce. Possiamo anche fornire un numero intero che rappresenta il numero di millisecondi dell'animazione dovrebbe funzionare per. Quando si esegue il file possiamo vedere che il contenuto scheda svanisce lentamente come una scheda chiude e svanisce quando una nuova scheda si apre. Entrambe le animazioni verificano durante una singola interazione tab. Per visualizzare solo l'animazione una volta, quando una scheda chiude per esempio, avremmo bisogno di nido all'oggetto fx all'interno di un array. Modificare l'oggetto di configurazione in tabs5.html in modo che appaia come segue: L'effetto del pannello del contenuto aperto chiusura è contenuto all'interno di un oggetto in primo elemento della matrice, e l'animazione della nuova scheda di apertura è il secondo. Specificando null come il secondo elemento dell'array abbiamo disabilitato le animazioni di apertura quando si seleziona una nuova scheda. Possiamo anche specificare animazioni e velocità diverse per l'apertura e la chiusura delle animazioni con l'aggiunta di un altro oggetto come secondo elemento dell'array, invece di null. Salva questo come tabs6.html e visualizzare i risultati in un browser. linguette pieghevoli per impostazione predefinita quando la scheda attiva viene cliccato, non accade nulla. Ma possiamo cambiare questo in modo che il pannello contenuto aperto si chiude quando si seleziona la sua rubrica scheda. Modificare l'oggetto di configurazione in tabs6.html in modo che appaia come segue: Salvare questa versione come tabs7.html. Questa opzione consente a tutti i pannelli di contenuto per essere chiuso, proprio come quando abbiamo fornito nullo per la proprietà selezionata in precedenza. Facendo clic su una scheda disattivato viene selezionare la scheda e mostrare il suo pannello di Associated Content. Cliccando nuovamente la stessa scheda verrà chiuderlo, riducendo il widget verso il basso in modo che vengano visualizzati solo l'intestazione e le schede). In questo articolo, abbiamo discusso i seguenti argomenti: l'implementazione predefinita del widget Come gli obiettivi del quadro CSS widget tab Come applicare stili personalizzati per un insieme di schede Configurazione schede utilizzando le loro opzioni di effetti di transizione integrate per le variazioni del pannello di contenuti Se hanno letto questo articolo si può essere interessati a vista: Youve leggendo un estratto di: messaggi Nuovi popolari comprendiamo il vostro tempo è importante. Unica tra i principali editori, cerchiamo di sviluppare e pubblicare la più ampia gamma di apprendimento e di prodotti su ogni tecnologia. Ogni prodotto Packt offre un percorso di apprendimento specifiche, ampiamente definito dal tipo di serie. Questo approccio strutturato consente di selezionare il percorso che meglio si adatta vostro livello di conoscenza, di stile di apprendimento e attività obiettivi. Come nuovo utente, questi step-by-step guide tutorial vi darà tutte le abilità pratiche necessarie per diventare competente ed efficiente. Guida per principianti amichevole, tutorial informali che forniscono un'introduzione pratica con esempi, le attività e le sfide. Essentials veloce, introduzioni concentrati che mostrano il modo più rapido per mettere lo strumento per lavorare nel mondo reale. Una raccolta di ricette pratiche autonome che tutti gli utenti della tecnologia troveranno utile per costruire sistemi più potenti e affidabili. Blueprints guida l'utente attraverso i più comuni tipi di progetto youll incontro, dando indicazioni end-to-end su come costruire la vostra soluzione specifica in modo rapido e affidabile. Prendete le vostre abilità al livello successivo con esercitazioni avanzate che vi darà la fiducia a padroneggiare gli strumenti caratteristiche più potenti. Accessibile ai lettori che adottano l'argomento, questi titoli si entra in funzione o la tecnologia in modo che si può diventare un efficace user. Tabs in jQuery UI 1.7 Il widget di schede di interfaccia utente viene utilizzato per attivare o disattivare la visibilità attraverso una serie di elementi diversi, ogni elemento di contenuto contenente che si può accedere cliccando sul suo titolo che appare come una singola scheda. Le linguette sono strutturati in modo che siano allineati uno accanto all'altro, mentre le sezioni di contenuto sono stratificati uno sopra l'altro, con solo la parte superiore visibile. Facendo clic su una scheda evidenzierà la scheda e portare il suo pannello contenuto associato in cima alla pila. Solo un pannello contenuto può essere aperto alla volta. La seguente immagine mostra i diversi componenti di una serie di schede di interfaccia utente: Un'implementazione scheda Base La struttura degli elementi HTML sottostanti, su cui si basano le schede, è rigido e widget richiedono un certo numero di elementi per loro di lavorare. Le schede devono essere creati da un elemento di lista (ordinata o non ordinata) e ogni elemento della lista deve contenere un elemento ltagt. Ogni collegamento dovrà avere un corrispondente elemento con id specificato che è associato con i collegamenti attributo href. Ebbene chiarire l'esatta struttura di questi elementi dopo il nostro primo esempio. In un nuovo file con un editor di testo, creare la seguente pagina: Salvare il codice come tabs1.html nella cartella di lavoro jQueryUI. Consente di rivedere ciò che è stato utilizzato. Le seguenti risorse di script e CSS sono necessari per il widget scheda predefinita esemplificazione: Un widget scheda è costituito da diversi elementi HTML standard, disposti in maniera specifica (queste possono essere sia hardcoded nella pagina, o aggiunti in modo dinamico, o può essere una miscela di entrambi a seconda delle esigenze della vostra implementazione). Un elemento contenitore esterno, che il metodo di schede viene chiamato su un elemento della lista (ltulgt o ltolgt) Un elemento ltagt per ogni scheda Un elemento per il contenuto di ogni scheda I primi due elementi all'interno del contenitore esterno fare le intestazioni delle schede cliccabili, che sono utilizzato per mostrare la sezione contenuto associato con la scheda. Ogni scheda deve includere un elemento della lista che contiene il collegamento. L'attributo href del collegamento deve essere impostato come un identificatore di frammento, con prefisso. Esso dovrebbe corrispondere all'attributo id dell'elemento che forma la sezione di contenuto, con cui è associato. Le sezioni di contenuto di ogni scheda vengono creati dagli elementi. L'attributo id è richiesto e saranno diretti dal suo elemento corrispondente. Weve utilizzati elementi in questo esempio i pannelli di contenuto per ogni scheda, ma altri elementi, quali elementi possono anche essere usati. Gli elementi discussi finora, insieme ai loro attributi richiesti, sono il minimo che sono richiesti dal sottostante markup. We collegamento in diverse risorse ltscriptgt dalla libreria nella parte inferiore della ltbodygt prima della sua tag di chiusura. Caricamento script scorso, dopo i fogli di stile e gli elementi della pagina è una tecnica collaudata per migliorare le prestazioni. Dopo il collegamento prima di jQuery, ci collegamento al file ui. core. js che è richiesto da tutti i componenti (eccetto gli effetti, che hanno un proprio file core). Abbiamo poi link al file componenti di origine che in questo caso è ui. tabs. js. Dopo le tre file di script necessari dalla libreria, possiamo rivolgerci al nostro elemento scriptgt lt personalizzato in cui si aggiunge il codice che crea le schede. Abbiamo semplicemente usato il () function () di scelta rapida per eseguire il nostro codice quando il documento è pronto. Abbiamo quindi chiamare il metodo widget di schede () sull'oggetto jQuery, che rappresenta il nostro elemento contenitore schede (il ltulgt con un ID di myTabs).Quando si corre il file in un browser, dovremmo vedere le schede come apparivano nel primo screenshot di questo articolo (senza le annotazioni di corso). classi del framework Tab CSS utilizzando Firebug per Firefox (o un altro DOM esploratore generico) possiamo vedere che una varietà di nomi di classe sono aggiunti ai vari elementi HTML di base che il widget di schede viene creato da, come mostrato nello screenshot seguente: Consente di rivedere questi brevemente. Per l'esterno del contenitore lt divgt sono aggiunti i seguenti nomi di classe: Applied angoli arrotondati ai bordi inferiori dei pannelli di contenuto Tutte queste classi sono aggiunti agli elementi sottostanti automaticamente dal biblioteca, noi non è necessario aggiungerli manualmente quando la codifica della pagina . Poiché queste tabelle illustrano, il quadro CSS fornisce il set completo di entrambi gli stili CSS strutturali che controllano come la funzione di schede e gli stili specifici a tema che controllano la modalità di visualizzazione delle schede, ma non il loro funzionamento. Possiamo facilmente vedere quali selettori bene hanno bisogno di ignorare se si vuole modificare l'aspetto del widget, che è quello che ben fare nella sezione seguente. Applicazione di un tema personalizzato per le schede Nel prossimo esempio, possiamo vedere come modificare le schede aspetto di base. Siamo in grado di ignorare le regole utilizzate esclusivamente per scopi di visualizzazione con le nostre regole di stile proprio per la personalizzazione rapida e semplice senza cambiare le regole relative alla funzionalità di scheda o la struttura. In un nuovo file nel vostro editor di testo, creare il seguente foglio di stile molto piccola. Questo è tutto quello che dobbiamo. Salvare il file come tabsTheme. css nella cartella css. Se si confrontano i nomi delle classi con le tabelle nelle pagine precedenti youll vedere che sono state sovrascrivendo il stili specifici a tema. Perché sono stati sovrascrivendo il file del tema, abbiamo bisogno per soddisfare o superare la specificità dei selettori in theme. css. Questo è il motivo per cui puntiamo più selettori a volte. In questo esempio ignorare alcune delle regole in ui. tabs. css. Dobbiamo usare il selettore ID del nostro elemento contenitore con il selettore da ui. theme. css (.ui-widget di-contenuto) al fine di battere il doppio selettore di classe. ui-tabs. ui-schede-panel. Non dimenticate di collegare il nuovo foglio di stile dal headgt lt del file HTML sottostante, e assicurarsi che il foglio di stile personalizzato appena creato appare dopo il file ui. tabs. css: Le regole che stiamo cercando di ignorare non verranno sovrascritti da il nostro file del tema se i fogli di stile non sono collegati a nell'ordine corretto. Salvare il file modificato come tabs2.html nella cartella jQueryUI e visualizzarlo in un browser. Esso dovrebbe essere simile alla seguente schermata: Il nostro nuovo depliant tema drammaticamente diversa da quella morbidezza di default. Tuttavia, siamo in grado di modificare il suo aspetto per soddisfare le nostre esigenze e preferenze con l'aggiunta di pochi altri stili. opzioni configurabili Ciascuna delle diverse componenti della biblioteca ha una serie di opzioni diverse che controllano che dispone del widget sono abilitate di default. Un oggetto letterale può essere passato nel metodo widget di schede per configurare queste opzioni. Le opzioni disponibili per configurare i comportamenti non predefinite quando si utilizza il widget di schede sono riportati nella seguente tabella: Una stringa che specifica gli elementi utilizzati per la creazione di nuove schede in modo dinamico. Si noti che sia un ltagt e un tag ltspangt vengono creati quando nuove schede vengono aggiunte dal widget. Le e parti della stringa vengono utilizzati internamente dal widget e vengono sostituiti con i valori reali dal widget. Selezione di una scheda Vediamo come possono essere utilizzate queste proprietà configurabili. Per esempio, consente di configurare il widget in modo che la seconda scheda viene visualizzato quando il caricamento della pagina. Rimuovere il linkgt lt per tabsTheme. css nel headgt lt e cambiare l'elemento finale lt scriptgt in modo che appaia come segue: Salva come tabs3.html. Le diverse schede ei loro pannelli contenuto associati sono rappresentati da un indice numerico partendo da zero, come una matrice JavaScript standard. Definizione di una scheda diversa per aprire di default è facile come fornendo un numero di indice come valore per la proprietà selezionata. Quando la pagina viene caricata, deve essere selezionata la seconda scheda. Weve commutato al tema di default scorrevolezza in modo da poter concentrarsi su come le proprietà di lavoro. Insieme a cambiare scheda che viene selezionato possiamo anche specificare che non le schede dovrebbero essere inizialmente selezionati fornendo null come valore per questa proprietà. Questo farà sì che il widget di apparire come segue il caricamento della pagina: la disabilitazione di una scheda Si consiglia una scheda particolare per essere disattivato fino a quando una determinata condizione è soddisfatta. Ciò si ottiene facilmente manipolando la struttura disabili delle schede. Modificare l'oggetto di configurazione in tabs3.html a questo: Salva come tabs4.html nella cartella jQueryUI. In questo esempio, si rimuove la proprietà selezionata e aggiungere l'indice della seconda scheda alla matrice disabili. Potremmo aggiungere gli indici delle altre schede per questo array così, separati da una virgola, per disabilitare più schede per impostazione predefinita. Quando la pagina viene caricata in un browser, la seconda scheda ha il nome della classe ui-widget di disabile applicato ad esso, e prenderà gli stili disabili da ui. theme. css. Non risponderà alle interazioni del mouse in qualsiasi modo, come mostrato nello screenshot seguente: effetti di transizione che possono facilmente aggiungere effetti di transizione interessanti utilizzando la proprietà fx. Questi vengono visualizzati quando le schede sono aperti e chiudere. Questa struttura è configurata utilizzando un altro letterale oggetto (o un array) all'interno del nostro oggetto di configurazione, che consente uno o più effetti. Consente di abilitare effetti di dissolvenza utilizzando il seguente oggetto di configurazione: Salvare il file come tabs5.html nella cartella jQueryUI. L'oggetto fx che abbiamo creato ha due proprietà. La prima proprietà è l'animazione. Per utilizzare lo sbiadimento, specifichiamo l'opacità come questo è ciò che viene regolata. Si precisa altezza come il nome della proprietà, invece di utilizzare le animazioni di apertura. Commutando l'opacità inverte semplicemente il suo impostazione corrente. Se è attualmente visibile, viene reso invisibile e viceversa. La seconda proprietà, la durata. specifica la velocità a cui avviene l'animazione. I valori per questa proprietà sono lenti. normale (valore di default), o veloce. Possiamo anche fornire un numero intero che rappresenta il numero di millisecondi dell'animazione dovrebbe funzionare per. Quando si esegue il file possiamo vedere che il contenuto scheda svanisce lentamente come una scheda chiude e svanisce quando una nuova scheda si apre. Entrambe le animazioni verificano durante una singola interazione tab. Per visualizzare solo l'animazione una volta, quando una scheda chiude per esempio, avremmo bisogno di nido all'oggetto fx all'interno di un array. Modificare l'oggetto di configurazione in tabs5.html in modo che appaia come segue: L'effetto del pannello del contenuto aperto chiusura è contenuto all'interno di un oggetto in primo elemento della matrice, e l'animazione della nuova scheda di apertura è il secondo. Specificando null come il secondo elemento dell'array abbiamo disabilitato le animazioni di apertura quando si seleziona una nuova scheda. Possiamo anche specificare animazioni e velocità diverse per l'apertura e la chiusura delle animazioni con l'aggiunta di un altro oggetto come secondo elemento dell'array, invece di null. Salva questo come tabs6.html e visualizzare i risultati in un browser. linguette pieghevoli per impostazione predefinita quando la scheda attiva viene cliccato, non accade nulla. Ma possiamo cambiare questo in modo che il pannello contenuto aperto si chiude quando si seleziona la sua rubrica scheda. Modificare l'oggetto di configurazione in tabs6.html in modo che appaia come segue: Salvare questa versione come tabs7.html. Questa opzione consente a tutti i pannelli di contenuto per essere chiuso, proprio come quando abbiamo fornito nullo per la proprietà selezionata in precedenza. Facendo clic su una scheda disattivato viene selezionare la scheda e mostrare il suo pannello di Associated Content. Cliccando nuovamente la stessa scheda verrà chiuderlo, riducendo il widget verso il basso in modo che vengano visualizzati solo l'intestazione e le schede). In questo articolo, abbiamo discusso i seguenti argomenti: l'implementazione predefinita del widget Come gli obiettivi del quadro CSS widget tab Come applicare stili personalizzati per un insieme di schede Configurazione schede utilizzando le loro opzioni di effetti di transizione integrate per le variazioni del pannello di contenuti Se hanno letto questo articolo si può essere interessati a vista: Youve leggendo un estratto di: messaggi Nuovi popolari comprendiamo il vostro tempo è importante. Unica tra i principali editori, cerchiamo di sviluppare e pubblicare la più ampia gamma di apprendimento e di prodotti su ogni tecnologia. Ogni prodotto Packt offre un percorso di apprendimento specifiche, ampiamente definito dal tipo di serie. Questo approccio strutturato consente di selezionare il percorso che meglio si adatta vostro livello di conoscenza, di stile di apprendimento e attività obiettivi. Come nuovo utente, questi step-by-step guide tutorial vi darà tutte le abilità pratiche necessarie per diventare competente ed efficiente. Guida per principianti amichevole, tutorial informali che forniscono un'introduzione pratica con esempi, le attività e le sfide. Essentials veloce, introduzioni concentrati che mostrano il modo più rapido per mettere lo strumento per lavorare nel mondo reale. Una raccolta di ricette pratiche autonome che tutti gli utenti della tecnologia troveranno utile per costruire sistemi più potenti e affidabili. Blueprints guida l'utente attraverso i più comuni tipi di progetto youll incontro, dando indicazioni end-to-end su come costruire la vostra soluzione specifica in modo rapido e affidabile. Prendete le vostre abilità al livello successivo con esercitazioni avanzate che vi darà la fiducia a padroneggiare gli strumenti caratteristiche più potenti. Accessibile ai lettori che adottano l'argomento, questi titoli si entra in funzione o la tecnologia in modo da poter diventare un utente effettivo.
No comments:
Post a Comment