Accentsconagua

Bootstrap 3 bondig JavaScript-kenmerken veranderd

Web ontwerp
Share

Als het gaat om JavaScript in BS3, is er niet veel veranderd; de overgrote meerderheid van de veranderingen die we tot nu toe hebben gezien draaide rond de CSS- en componentensecties. Daar is een reden voor.

De meeste JavaScript-functies van BS2 (en overigens BS3) worden geleverd in de vorm van gegevensattributen. In de meeste gevallen hebben we al gezien hoe deze in de verschillende secties over componenten kunnen worden gebruikt, wat eigenlijk heel weinig laat wat specifiek is voor JavaScript.

In deze zelfstudie zal ik daarom kort het grootste deel van wat beschikbaar is bespreken en waar elders in de serie geen andere beschrijving staat, een kort voorbeeld laten zien van het gebruik van de beschikbare API..

De JS-faciliteiten die beschikbaar zijn in BS2 en BS3 zijn zeer uitbreidbaar, en zelfs een volledige reeks tutorials zou waarschijnlijk niet alles kunnen bestrijken wat mogelijk is. Ik raad u daarom sterk aan om naar de Bootstrap-website te gaan en de sectie over JavaScript te lezen.

modals

Het eerste dat iemand opmerkt als het onderwerp JavaScript in Bootstrap aan de orde komt, zijn de modale dialoogvensters - en het is een kleine verrassing.

De modale boxen van BS3 zijn een van de gemakkelijkste implementaties (en een van de rijkste) die te zien zijn in een van de moderne browser HTML5-frameworks.

Het gebruik ervan is eenvoudig, maar vereist helaas nogal wat markeringen.

De volgende code geeft u een zeer eenvoudig voorbeeld:
Modaal voorbeeld geproduceerd door monster

Als u een modaal wilt weergeven, moet u eerst een triggerdoel hebben. In het bovenstaande voorbeeld is dit de knop gemarkeerd Show Modal Dialog. Voor een triggeractie die moet werken, moet een schakel- en doelgegevenskenmerk eraan zijn toegewezen en moet de schakeloptie de waarde hebben "modaal"om te laten zien dat het een modale dialoog target. Het doel moet de ID-selector van de buitenste hebben

toegewezen.

In dit voorbeeld de buitenste

heeft een ID = "myModal" erop, wat betekent dat het data attribuut voor doelwit zou moeten hebben #myModal als zijn waarde.

Uw trigger hoeft geen knop te zijn; het kan alles zijn dat een muisklik kan accepteren (of is ingesteld om te accepteren), zolang de kenmerken van de schakel- en doelgegevens zijn opgegeven.

Als we eenmaal in het modale zelf zijn, zul je zien dat de structuur bestaat uit een aantal behoorlijk diep genest

s. Vanwege dit nesten, is het raadzaam dat u uw dialoog / modale definities zo dicht mogelijk bij de hoofdtekst van het lichaam maakt en plaatst; als je dat niet doet, bestaat de kans dat andere componenten en HTML-structuren lay-outproblemen kunnen veroorzaken die je niet had verwacht.

Dat merk je ook weer, er is een gemeenschappelijk thema om dingen te markeren om ze vriendelijk te maken voor schermlezers, en nogmaals, ik kan dit niet genoeg benadrukken: je moet alles in het werk stellen om ervoor te zorgen dat je opmaak net zo vriendelijk is voor toegankelijkheidstools mogelijk.

Een modaal begint met een uiterlijk

en de klas modaal erop toegepast. Optioneel kun je ook toevoegen vervagen, wat de modal een mooie soepele overgang zal geven bij het tonen en verbergen. Dit uiterlijk
zou degene moeten zijn waarop je je hebt ingesteld Z-Order en al het andere in de weg van wereldwijde modale aanpassingen die je wilt maken.

De volgende

in zou een klasse moeten hebben modal dialoogvenster toegevoegd. Dat
moet dan onmiddellijk gevolgd worden door een derde
met de klasse van modale content toegewezen. Het zit in deze derde
waar je je modale inhoudsdefinitie daadwerkelijk plaatst.

Zodra je de modale inhoudshell hebt gedefinieerd, kun je deze vervolgens in drie plaatsen plaatsen

elementen met de volgende klassen: modale-header, modale lichaam, en modale-footer. Deze drie binnenste secties mogen NIET worden genest, maar eerder aan de markup worden toegevoegd als broers en zussen van elkaar en worden gebruikt om de inhoud voor de drie hoofdgedeelten van de dialoog te definiëren.

Je kunt aan de hand van de code in het voorbeeld hierboven zien dat we een afsluitkruis toevoegen, zoals we deden voor waarschuwingsvakken. Het enige verschil tussen dit slotkruis en dat wat we eerder zagen, is dat het ontslaan data attribuut heeft een waarde van modaal en niet alarm. Elk klikbaar element dat is geplaatst binnen de innerlijke modale markup met dit gegevensattribuut, met deze waarde, zal het dialoogvenster sluiten wanneer erop wordt geklikt.

Afgezien van het close-icoon, is de rest van de innerlijke inhoud van de modal gewoon normale BS3-markup en CSS. Alles wat u elders kunt gebruiken, kunt u in een modaal gebruiken en als het te hoog is voor het scherm, krijgt u een binnencontainer die automatisch overschakelt naar een schuifbaar element.

Er zijn ook twee optionele breedtematen; deze worden toegevoegd aan het innerlijke modal dialoogvenster

en zijn modale-lg en modale-sm. De grote grootteklasse breidt de breedte van het modaal tot de helft van de schermbreedte uit (ideaal voor tabellen en lijsten), terwijl het kleine formaat de standaardbreedte verkleint tot ongeveer de helft van de oorspronkelijke grootte (ideaal voor zaken als ja / nee-prompts).

U kunt de modal ook initialiseren met behulp van de JavaScript API op een standaard jQuery-manier; als u het gedrag van de standaardoptie wilt wijzigen, is het gebruik van de JQ-constructor de enige manier om dit te doen.

$ ('# myModal'). modal (backdrop: true / false, keyboard: true / false, show: true / false, remote: 'pad naar url dat inhoud retourneert');

De opties die kunnen worden gewijzigd zijn als volgt:

  • achtergrond: Booleaans waar of onwaar om de schaduwachtergrond op de pagina op te nemen of niet, wanneer de modaal wordt getoond; als de waarde statisch is opgegeven, dan wordt de achtergrond weergegeven, maar wordt het modaal NIET gesloten wanneer erop wordt geklikt, net als wanneer waar is gebruikt.
  • toetsenbord: Boolean waar of onwaar; staat toe of staat de escape-toets toe om het modale te sluiten.
  • laten zien: Booleaans waar of onwaar, wordt automatisch het dialoogvenster weergegeven of wordt niet weergegeven zodra het is geïnitialiseerd.
  • remote: String met een URL om de innerlijke inhoud voor het dialoogvenster te krijgen; als dit wordt opgegeven, vraagt ​​het dialoogvenster de URL om een ​​stuk HTML te leveren dat in de hoofdtekst van het modaal kan worden gebruikt.

Er zijn ook een aantal evenementen die worden aangedragen voor bepaalde acties, maar die vallen buiten het bestek van deze tutorial.

tabs

Als je je herinnert, heb ik in het gedeelte over basisnavigatie vermeld dat het tabbladonderdeel kan worden bekabeld met extra markeringen om het omwisselen van inhoudsvensters voor jou daadwerkelijk aan te kunnen..

Als u een reeks tabbladen wilt markeren die automatisch worden gewijzigd met JavaScript, moet u eerst een