logo

Webové komponenty X-Tag

Jednou z úžasných součástí práce v Mozille je schopnost vidět a používat projekty od kolegů inženýrů předtím, než jsou sdíleny se světem. Jedno takové úsilí pochází od Daniela Buchnera:X-Tag. X-Tag je knihovna webových komponent pro různé prohlížeče, která používá vlastní značky a trochu JavaScriptu k vytváření komponent, které jsme vytvářeli roky:

  • Akordeony
  • Wigety na kartě
  • Posuvné panely (představte si prezentace)
  • Otočné panely (přemýšlejte o mobilních aplikacích)
  • Modální dialogy

Existuje dokonce několik pokročilých komponent jako:

  • Mapy
  • Automatické návrhy vstupů
  • Paginace

Každý kus těchto komponentů je zcela stylovatelný, což umožňuje maximálně flexibilní komponenty. Pojďme se rychle podívat na to, jak se tyto komponenty vytvářejí!

Nastavení X-Tag

Bez ohledu na to, kterou komponentu X-Tag chcete použít, musíte zahrnout hlavní skript x-tag.js. Pro každou komponentu, kterou chcete použít, budete muset zahrnout její Javascript a soubor CSS:

<script type="text/javascript" src="x-tag/x-tag.js"></script>

<!-- Accordion -->
<link rel="stylesheet" type="text/css" href="x-tag/elements/accordion/accordion.css" />
<script type="text/javascript" src="x-tag/elements/accordion/accordion.js"></script>

Používání komponent X-Tag

S potřebnými soubory JavaScript na místě můžete nyní používat komponenty X-Tag!

<!-- create an accordion -->
<h3>Accordion</h3>
<x-accordion id="accordion">
	<x-toggler selected="true">Toggler 1</x-toggler>
	<div>
		This is the content.
	</div>
	<x-toggler>Toggler 2</x-toggler>
	<div>
		This is the content 2.
	</div>
	<x-toggler>Toggler 3</x-toggler>
	<div>
		This is the content 2.
	</div>
</x-accordion>

<!-- create a tab box -->
<h3>TabBox</h3>
<x-tabbox id="tabbox">
	<x-tabs>
		<x-tab selected="true">Tab 1</x-tab>
		<x-tab>Tab 2</x-tab>
		<x-tab>Tab 3</x-tab>
	</x-tabs>
	
	<x-tabpanels>
		<x-tabpanel selected="true">
			<p>
				This is tab content 1
			</p>
		</x-tabpanel>
		<x-tabpanel>
			<p>
				This is tab content 2
			</p>
		</x-tabpanel>
		<x-tabpanel>
			<p>
				This is tab content 3
			</p>
		</x-tabpanel>
	</x-tabpanels>
</x-tabbox>

<!-- create a map -->
<x-map data-key="Cloudmade/OpenStreetMaps-API-Key"></x-map>

Proč tedy X-Tag? Udělejte krok zpět a zamyslete se nad jedním z nejstarších triků JavaScriptu v knize:zástupnými symboly INPUT. Trvalo téměř deset let, než se tato základní funkce dostala do specifikace. Přemýšlejte o tom, jak málo se udělalo ve způsobu vylepšení dětí FORM. X-Tag je prvním krokem v prosazování podpory nativních komponent v prohlížečích.

Podpora prohlížeče

X-Tag podporuje všechny prohlížeče třídy A. Podpora IE9 a Opery je téměř dokončena, podpora IE8 bude brzy následovat.

Co si myslíte?

Miluji knihovnu X-Tag. Jednoduché, efektivní, přizpůsobitelné. Existuje mnoho knihoven, které splňují komponenty X-Tag, ale tento přístup je mnohem jednodušší a (doufejme) je krokem k nativní podpoře. Nevadilo by mi však vidět sourozeneckou tematickou knihovnu. Co si myslíš o X-Tag? Máte nějaké nápady na další komponenty, které by měly žít v X-Tag?