Accentsconagua

Bootstrap 3 Succinctly Endret JavaScript-funksjoner

Webdesign
Share

Når det gjelder JavaScript i BS3, har ikke mye endret seg; Det store flertallet av endringene vi har sett hittil har vendt seg rundt CSS og komponentene. Det er en grunn til dette.

De fleste av BS2s (og for det saks skyld, BS3s) JavaScript-funksjonalitet kommer i form av dataattributter. I de fleste tilfeller har vi allerede sett hvordan du bruker disse i de ulike delene på komponentene, som virkelig etterlater svært lite som bare er spesifikt for JavaScript.

I denne opplæringen vil jeg derfor kort gå gjennom det meste av det som er tilgjengelig, og hvor det ikke finnes noen annen beskrivelse andre steder i serien, viser et kort eksempel på hvordan du bruker API tilgjengelig.

JS-fasilitetene som er tilgjengelige i BS2 og BS3, er svært utvidbare, og selv en full serie av opplæringsprogrammer kunne nok ikke dekke alt som er mulig. Derfor oppfordrer jeg deg sterkt til å gå til Bootstraps nettsted og lese gjennom delen på JavaScript.

Modals

Det første som noen nevner når JavaScript-temaet kommer opp i Bootstrap, er de modale dialogboksene, og det er lite overraskelse.

BS3s modale bokser er en av de enkleste implementasjonene (og en av de rikeste) sett i noen av de moderne HTML5-rammene for nettleseren.

Å bruke dem er enkelt, men dessverre krever det ganske mye oppslag.

Følgende kode gir deg et veldig grunnleggende eksempel:
Modalt eksempel produsert av prøve

For å vise en modal må du først ha et utløsermål. I eksemplet ovenfor er dette knappen merket Vis Modal Dialog. For en utløserhandling til arbeid må den ha en veksle- og måldataattributt som er tildelt den, og vekselen må ha verdien "modal"for å vise at den retter seg mot en modal dialog. Målet må ha ID-väljeren til ytterste

tildelt den.

I denne prøven, den ytre

har en ID = "myModal" på den, som betyr datatributtet for mål burde #myModal som sin verdi.

Utløseren din trenger ikke å være en knapp; det kan være alt som kan akseptere (eller er satt opp for å akseptere) et museklikk, så lenge skift og måldataattributter er gitt.

Når vi kommer inn i modalet selv, ser du at strukturen består av et antall ganske dypt nestede

s. På grunn av dette nestingen anbefales det at du lager og plasserer dialog / modaldefinisjonene så nær kroppens rot som mulig. Hvis du ikke gjør det, er det en sjanse for at andre komponenter og HTML-strukturer kan forårsake oppsettproblemer som du ikke hadde forventet.

Du vil også legge merke til det igjen, det er et felles tema for å markere ting for å gjøre dem vennlige til skjermlesere, og igjen, jeg kan ikke stresse dette nok: du bør gjøre alt for å sikre at oppslaget ditt er like vennlig å tilgjengelighetsverktøy som mulig.

En modal starter med en ytre

og klassen modal anvendt på den. Eventuelt kan du også legge til falme, som vil gi modal en fin jevn overgang når du viser og gjemmer seg. Dette ytre
bør være den du legger på Z-Order og alt annet i veien for globale modale tilpasninger du ønsker å lage.

Den neste

i skulle ha en klasse av modal-dialog lagt til det. At
bør da følges umiddelbart med en tredjedel
med klassen av modal-innhold tildelt den. Det er inne i denne tredje
hvor du faktisk plasserer din modale innholdsdefinisjon.

Når du har definert det modale innholdsskallet, kan du deretter legge inn tre ytterligere

elementer med følgende klasser: modal-header, modal-legeme, og modal-footer. Disse tre innerseksjonene skal IKKE nestes, men legges heller til merket som søsken til hverandre, og brukes til å definere innholdet for de tre hoveddelene av dialogboksen.

Du kan se fra koden i eksemplet over at vi inkluderer et lukkekors, som vi gjorde for varselbokser. Den eneste forskjellen mellom dette lukkekorset og det vi så tidligere er at avskjedige Datatributtet har en verdi på modal og ikke varsling. Eventuelt klikkbart element plassert i det indre modale oppslaget som har denne dataattributtet, med denne verdien, lukker dialogboksen når den klikkes.

Bortsett fra nær ikonet, er resten av modalets indre innhold bare vanlig BS3 markup og CSS. Alt du kan bruke andre steder kan du bruke inne i en modal, og hvis den er for høy til skjermen, får du en indre beholder som automatisk bytter til et rullbart element.

Det er også to valgfrie bredde størrelser; disse legges til det indre modal-dialog

og er modal-lg og modal-sm. Den store størrelsesklassen utvider bredden på modalet til halvparten av skjermbredden (ideell for tabeller og lister), mens den lille størrelsen krymper standardbredden til omtrent halvparten av sin opprinnelige størrelse (ideell for ting som ja / nei beskjeder).

Du kan også initialisere modal ved hjelp av JavaScript API på en standard jQuery mote; hvis du vil endre standardalternativets oppførsel, er det bare å bruke JQ-konstruktøren å gjøre det.

$ ('# myModal'). modal (bakteppe: true / false, tastatur: true / false, show: true / false, remote: 'bane til URL som returnerer innhold');

Alternativene som kan endres, er som følger:

  • bakteppe: Boolsk sant eller falskt å inkludere eller ikke inkludere den skyggefulle bakgrunnen på siden når modal er vist; hvis verdien statisk er angitt, da vises bakgrunnen, men lukker ikke modal når den klikkes på, som den gjør hvis ekte benyttes.
  • tastatur: Boolsk sant eller falskt; tillater eller tillater ikke escape-nøkkelen å lukke modal.
  • vise fram: Boolsk sant eller falskt, viser automatisk eller viser ikke dialogen så snart den er initialisert.
  • fjern: String som inneholder en URL for å få det indre innholdet for dialogboksen; hvis dette blir levert, vil dialogen spørre url for å levere en bit av HTML som skal brukes i kroppen av modal.

Det er også en rekke hendelser som er hevet for visse handlinger, men de er utenfor omfanget av denne opplæringen.

Tabs

Hvis du husker, tilbake i delen om grunnleggende navigasjon, nevnte jeg at fanekomponenten kan kobles opp med ekstra oppslag for å håndtere bytte av innholdsruter for deg.

For å markere et sett med faner som endres automatisk ved hjelp av JavaScript, må du først opprette en