Share
Quando si tratta di JavaScript in BS3, non è cambiato molto; la stragrande maggioranza dei cambiamenti che abbiamo visto finora ruotano attorno alle sezioni CSS e componenti. C'è una ragione per questo.
La maggior parte delle funzionalità JavaScript di BS2 (e per quella di BS3) si presenta sotto forma di attributi dei dati. Nella maggior parte dei casi, abbiamo già visto come utilizzarli nelle varie sezioni sui componenti, il che lascia davvero molto poco che sia specifico solo per JavaScript.
In questo tutorial, quindi, eseguirò brevemente la maggior parte di ciò che è disponibile, e dove non ci sono altre descrizioni altrove nella serie, mostra un breve esempio su come utilizzare l'API disponibile.
Le strutture JS disponibili in BS2 e BS3 sono molto estensibili e anche una serie completa di tutorial probabilmente non potrebbe coprire tutto ciò che è possibile. Pertanto vi incoraggio vivamente ad andare sul sito Web Bootstrap e leggere la sezione su JavaScript.
La prima cosa che qualcuno menziona quando il tema di JavaScript si presenta in Bootstrap è la finestra di dialogo modale - ed è una piccola sorpresa.
Le caselle modali di BS3 sono una delle implementazioni più semplici (e una delle più ricche) viste in uno dei moderni framework HTML5 del browser.
Usarli è facile, ma sfortunatamente richiede un bel po 'di markup.
Il seguente codice ti fornisce un esempio molto semplice:
Esempio modale prodotto dal campionePer mostrare un modale, devi prima avere un obiettivo di innesco. Nell'esempio sopra, questo è il pulsante contrassegnato In questo esempio, il più esterno Il tuo innesco non deve essere un pulsante; può essere tutto ciò che può accettare (o è impostato per accettare) un clic del mouse, purché siano forniti gli attributi di commutazione e di dati di destinazione. Una volta entrati nella modale, vedrai che la struttura è composta da un numero di nidificati abbastanza profondamente Noterai anche che, di nuovo, c'è un tema comune di contrassegnare le cose per renderle amichevoli agli screen reader e, ancora una volta, non posso sottolineare abbastanza: dovresti fare ogni sforzo per assicurarti che il tuo markup sia così amichevole strumenti di accessibilità possibili. Un modale inizia con un esterno Il prossimo Una volta definita la shell del contenuto modale, è possibile inserirla ulteriormente in tre Puoi vedere dal codice nell'esempio sopra che includiamo una croce di chiusura, come abbiamo fatto per le caselle di avviso. L'unica differenza tra questa croce di chiusura e quella che abbiamo visto in precedenza è che il A parte l'icona vicina, il resto del contenuto interno della modale è solo normale markup BS3 e CSS. Qualunque cosa tu possa usare altrove puoi usare all'interno di una modale, e se è troppo alta per lo schermo, otterrai un contenitore interno che passa automaticamente a un elemento scorrevole. Ci sono anche due dimensioni di larghezza opzionali; questi sono aggiunti all'interno Puoi anche inizializzare il modal usando l'API JavaScript in un modo jQuery standard; se si desidera modificare il comportamento dell'opzione predefinita, l'utilizzo del costruttore JQ è l'unico modo per farlo. Le opzioni che possono essere modificate sono le seguenti: Ci sono anche un numero di eventi che vengono generati per determinate azioni, ma sono oltre lo scopo di questo tutorial. Se ricordi, nella sezione sulla navigazione di base, ho detto che il componente scheda può essere cablato con markup extra per gestire effettivamente lo scambio di riquadri di contenuti per te. Per contrassegnare una serie di schede che cambiano automaticamente utilizzando JavaScript, devi prima creare un Una volta creato il set di navigazione, devi creare un esterno Il seguente codice mostra un esempio di questo: Con la raffinazione, viviamo ... Oggi la scienza ci dice che il ... Tu ed io siamo forme di vita della zuppa quantica ... Il controllo struttura a schede non ha un costruttore che accetta le opzioni come fa il modale, ma ha una chiamata API in modo che tu possa stabilire quale scheda mostrare a livello di codice. Per fare ciò, è necessario utilizzare jQuery per selezionare il selettore appropriato, quindi chiamare Tutti amano i tooltip, semplici piccoli tag pop-up che possono essere utilizzati come aiuto e molti altri compiti semplici e descrittivi. Usare un tooltip in BS3 è incredibilmente facile. Assegna semplicemente un attributo dati di Il codice seguente creerà un semplice pulsante con un suggerimento allegato alla sua parte superiore: C'è una piccola avvertenza che si applica alle descrizioni dei comandi, ma non si applica a nessun altro elemento: è necessario inizializzare i tooltip da soli. Puoi passare varie opzioni contemporaneamente (proprio come con le modali), ma DEVI inizializzarle, altrimenti i tuoi tooltip non appariranno. Per inizializzare il pulsante mostrato nell'esempio precedente, posiziona la seguente riga di JavaScript da qualche parte nella tua pagina in modo che venga eseguita una volta che il DOM è pronto e il pulsante è stato creato: Dipende interamente da te come selezioni ciascuno dei tuoi pulsanti. Ad esempio, è possibile selezionarli tutti tramite il loro tipo di elemento, ma è necessario chiamare Se tutto funziona come previsto, dovresti vedere qualcosa di simile a questo: Chiudi dietro l'umile tooltip arriva il popover, e come il tooltip, deve essere inizializzato manualmente con una chiamata a Un tooltip in genere ha solo una semplice riga di testo, mentre un popover è più grande e può contenere più elementi HTML, che vanno dai paragrafi ai pulsanti e alle immagini. La seconda differenza è che l'elemento deve essere cliccato prima che venga visualizzato un popover, mentre un tooltip è automatico al passaggio del mouse. Si crea un popover nello stesso modo di un suggerimento, ad eccezione del fatto che il contenuto popup è definito all'interno di un attributo dati chiamato Come nel caso del tooltip, da qualche parte nell'avvio del documento, devi anche assicurarti di inizializzare il componente usando qualcosa come: Anche come con la descrizione comando, puoi passare un oggetto contenente le opzioni qui. Ce ne sono molti disponibili, quindi, di nuovo, ti incoraggio a leggere i documenti BS3 per apprenderli tutti. Se tutto ha funzionato, dovresti essere in grado di rendere la tua pagina e vedere questo: Una delle cose rimosse in BS3, purtroppo, era il componente della fisarmonica readymade. Al suo posto, tuttavia, c'è qualcosa di meglio: il pannello pieghevole. Usando questi pannelli, è ancora più facile creare una fisarmonica standard, ma ora sono anche componenti autonomamente utilizzabili separatamente, consentendo di eseguire operazioni come la creazione di aree di informazioni pieghevoli, barre degli strumenti e molto altro. Una cosa da notare, tuttavia: se stai facendo una build personalizzata, devi anche assicurarti di includere il plug-in JavaScript di transizione helper. I documenti BS3 hanno più informazioni di cui avrai bisogno se stai facendo una compilazione personalizzata. Per creare una fisarmonica da pannelli pieghevoli, devi semplicemente creare un esterno Una volta disposti i pannelli, è sufficiente aggiungere un L'attributo di commutazione deve avere un valore di Il seguente codice mostra come ottenere ciò: Come accennato, i pannelli non devono essere raggruppati; possono essere utilizzati in modo singolare con un solo elemento come innesco per il ripiegamento. Ad esempio, se vuoi comprimere un pannello usando un semplice pulsante, assicurati solo che il tuo pulsante abbia un attributo dati di Per arrotondare questo tutorial, l'ultimo plug-in JavaScript che sto per introdurre è il carosello di nuova concezione. BS2 aveva un carosello, ma come la fisarmonica, ora è stato rimosso e notevolmente semplificato per renderlo più facile da usare. In genere, il plug-in Carousel viene utilizzato nella parte superiore di una pagina per fornire un banner rotante di immagini e, in BS2, questa è l'unica cosa per cui è possibile utilizzare la giostra. In BS3, tuttavia, qualsiasi contenuto che può essere inserito all'interno dei riquadri del carousel verrà ruotato, incluse immagini, testo, svg e molto altro. Il codice seguente mostra un esempio di base su come costruire un carosello: Lo spazio-tempo è una costante. La volontà richiede esplorazione Stardust richiede esplorazione. Tu ed io siamo narratori del cosmo Lo spazio-tempo è una costante. La volontà richiede esplorazione Esistono alcuni oggetti JavaScript più semplici, ma la maggior parte di essi non sono direttamente utilizzabili dal normale codice utente e generalmente vengono utilizzati solo in circostanze particolari. I documenti BS3 coprono tutto ciò che mi è mancato, e se hai intenzione di approfondire le strutture JavaScript disponibili, una lunga lettura e una comprensione di come tutto è agganciato è sicuramente un requisito. Un'ultima nota: i plugin BS3 JavaScript non sono altro che normali plugin jQuery (BS usa jQuery sotto il cofano). Ciò significa che dovrebbe essere molto facile prendere il tuo plug-in jQuery preferito da luoghi come unheap.com e adattarlo a lavorare con BS3 abbastanza facilmente. Non dimenticare che esiste già un numero enorme di componenti aggiuntivi già disponibili, in particolare da utilizzare con il framework, la maggior parte dei quali è solo una ricerca su Google.. Questo tutorial rappresenta un capitolo di Bootstrap 3 in modo succinto, un eBook gratuito del team di Syncfusion.Mostra finestra di dialogo modale. Affinché un'azione di trigger funzioni, è necessario che gli sia assegnato un attributo di commutazione e di destinazione e che il commutatore deve avere il valore "modale"per mostrare che si rivolge a una finestra di dialogo modale. L'obiettivo deve avere il selettore ID più esterno ID = "myModal" su di esso, che significa l'attributo di dati per bersaglio avrebbe dovuto #myModal come il suo valore.modale applicato ad esso. Opzionalmente, puoi anche aggiungere dissolvenza, che darà al modale una transizione gradevole e piacevole quando si mostra e si nasconde. Questo esterno Z-Order e qualsiasi altra cosa in merito alle personalizzazioni modali globali che desideri realizzare.modal-dialog aggiunto ad esso. Quello modal-content assegnato ad esso. È dentro questo terzo modal-header, modal-corpo, e modal-footer. Queste tre sezioni interne NON devono essere nidificate, ma piuttosto aggiunte al markup come fratelli l'una dell'altra, e vengono utilizzate per definire il contenuto per le tre sezioni principali della finestra di dialogo.respingere l'attributo data ha un valore di modale e non mettere in guardia. Qualsiasi elemento cliccabile inserito all'interno del markup modale interno che ha questo attributo dati, con questo valore, chiuderà la finestra di dialogo quando viene cliccato.modal-dialog modal-lg e modal-sm. La classe di grandi dimensioni espande la larghezza del modale a metà della larghezza dello schermo (ideale per tabelle e elenchi), mentre le dimensioni ridotte riducono la larghezza predefinita a circa la metà della sua dimensione originale (ideale per cose come yes / no prompt).$ ('# myModal'). modal (backdrop: true / false, keyboard: true / false, show: true / false, remote: 'percorso all'URL che restituisce il contenuto');
sullo sfondo: Boolean true o false per includere o meno lo sfondo ombreggiato nella pagina quando viene visualizzata la modale; se il valore statico è specificato, quindi lo sfondo viene mostrato ma NON chiude la modale quando viene cliccato, come succede se vero viene usato.tastiera: Booleano vero o falso; consente o non consente alla chiave di escape di chiudere il modal.mostrare: Boolean true o false, mostra o mostra automaticamente la finestra di dialogo non appena viene inizializzata.a distanza: Stringa contenente un URL per ottenere il contenuto interno per il corpo del dialog; se questo è fornito, allora il dialog chiederà all'url di fornire un pezzo di HTML da usare nel corpo del modale.Tabs
elementi incorporati all'interno di ciascuno dei suoi elementi, con il href di ogni ancora che punta al id di ciascun associato linguetta.tab-contenuti ad esso. Dentro di questo scheda-riquadro e un id attributo corrispondente alla scheda associata nel set di navigazione. Opzionalmente, puoi anche aggiungere svanire sbiadire le schede quando cambiano, e attivo per contrassegnare quale delle schede è stata attualmente mostrata.
Ci auto-attualizziamo, crediamo, siamo rinati
Esistiamo come sovrastrutture quadridimensionali
L'obiettivo dei campi morfogenetici è piantare ...
Set di tabulazioni prodotto dal codice di esempioscheda ( 'show') su di esso. Quando questo è fatto, le tue schede renderanno automaticamente la scheda referenziata quella selezionata. Come per le modali (e altre), ci sono eventi disponibili per dirti quando le cose cambiano; i dettagli e i parametri di ogni chiamata possono essere trovati nei documenti BS3.Tooltip e Popovers
ginocchiera con il valore tooltip a qualsiasi elemento HTML standard che desideri venga visualizzato per il tooltip. Per definire il testo per il suggerimento, aggiungere un attributo titolo contenente il testo desiderato e, facoltativamente, aggiungere un attributo dati chiamato posizionamento contenente il valore sinistra, superiore, parte inferiore, o destra come richiesto, in base alla direzione in cui si desidera visualizzare il suggerimento.
$ ( '# MyButton') tooltip ().;
tooltip () su ogni elemento che ha un tooltip allegato.
Pulsante con descrizione suggeritapopover (). La differenza principale tra un popover e un suggerimento è che i popover possono contenere più contenuti di un suggerimento.soddisfare, e il titolo l'attributo è usato per dare al popover una mini area del titolo (simile al modo in cui l'area dell'intestazione viene usata su un componente del pannello). Il codice seguente mostra come definire un popover semplice:$ ( '# MyButton') popover ().;
Pulsante BS3 con un popover collegatoPannelli pieghevoli
Pannello-group e dargli un id. Quindi, all'interno di quello, hai bisogno di una serie di div essendo un unico pannello autonomo.Pannello-titolo dentro a Pannello-header. Questa intestazione dovrebbe contenere un tag con due attributi dati assegnati: uno chiamato dati ginocchiera, e uno chiamato Dati-genitore.crollo, e l'attributo genitore dovrebbe contenere il id dell'esterno href con il id del corpo del pannello target che dovrebbe essere l'oggetto del comportamento collasso. Ciascuno dei pannelli target dovrebbe avere le classi Pannello-collasso e crollo assegnato a loro. La coscienza è la ricchezza della verità e di noi
Il pianeta sta irradiando sovrastrutture quadridimensionali
La realtà ha sempre irradiato messaggeri le cui anime sono state aperte dalla polvere di stelle
Sostituzione della fisarmonica prodotta dal campioneginocchiera con il valore crollo, e un attributo di dati chiamato bersaglio con il selettore per il pannello di destinazione come valore.Giostra
Tu ed io siamo esseri del pianeta
Niente è impossibile
Tu ed io siamo esseri del pianeta
Carosello prodotto da un esempio di codice
Accentsconagua