Lectia 10 – Bara de instrumente Header

Bara de instrumente Header se afla in antetul paginii, contine titlul paginii si maxim 2 butoane . Practic se pot insera mai multe butoane dar ramanem la 2.

Structura

Header-ul este un div cu atributul data-role=”header” . De obicei incepem sa adaugam un titlu.

	<div data-role="header">
		<h1>Lectia 10 - Bara de instrumente Header</h1>
	</div>

Adaugare butoane

Cum am zis, este posibila adaugarea butoanelor pe bara de instrumente header. In mod normal adaugam pana la doua butoane si jQuery Mobile Framework va pozitiona implicit primul buton in partea stanga, iar celalalt buton in partea dreapta.

Exemplu cu doua butoane: „Anuleaza” si „Salveaza”

	<div data-role="header">
		<a href="l10ex1.html" data-icon="delete">Anuleaza</a>
			<h1>Lectia 10 - Bara de instrumente Header</h1>
		<a href="l10ex1.html" data-icon="check">Salveaza</a>	
        </div>

Exemplu2: Stilizare buton salveaza

	<div data-role="header">
		<a href="l10ex1.html" data-icon="delete">Anuleaza</a>
			<h1>Lectia 10 - Bara de instrumente Header</h1>
		<a href="l10ex1.html" data-icon="check" data-theme="c">Salveaza</a>	
        </div>

Butoanele se pot pozitiona prin intermediul claselor css ( jquery.mobile.min.css ): ui-btn-right si ui-btn-left.

Exemplu3: Pozitionare butonului Salveaza la dreapta

	<div data-role="header">
			<h1>Lectia 10 - Bara de instrumente Header</h1>
		<a href="l10ex1.html" data-icon="check" data-theme="c" class="ui-btn-right">Salveaza</a>	
        </div>

Exemplu4: Pozitionare butonului Salveaza la stanga

	<div data-role="header">
			<h1>Lectia 10 - Bara de instrumente Header</h1>
		<a href="l10ex1.html" data-icon="check"  class="ui-btn-left">Salveaza</a>	
        </div>

Demo

V-am pregatit demo-urile :

Anunțuri

O părere la “Lectia 10 – Bara de instrumente Header”

Lasă un răspuns

Completează mai jos detaliile tale sau dă clic pe un icon pentru a te autentifica:

Logo WordPress.com

Comentezi folosind contul tău WordPress.com. Dezautentificare / Schimbă )

Poză Twitter

Comentezi folosind contul tău Twitter. Dezautentificare / Schimbă )

Fotografie Facebook

Comentezi folosind contul tău Facebook. Dezautentificare / Schimbă )

Fotografie Google+

Comentezi folosind contul tău Google+. Dezautentificare / Schimbă )

Conectare la %s