Lectia 11 – Bara de instrumente Footer

Bara de instrumente Footer se comporta ca si cea pentru header. Bara de instrumente Footer se afla in josul paginii, in multe cazuri nu este vizibila fara a face scroll in jos.

Structura

Bara de instrumente Footer este un div cu atributul data-role=”footer” .

	<div data-role="footer">
		<h1>Lectia 11 - Bara de instrumente Footer</h1>
	</div>

Adaugare butoane

Este foarte simplu sa adaugi butoane pentru bara de instrumente footer. Linkurile trebuie sa contina atributul data-role=”button”. In footer poti adauga mai multe butoane, ele fiind aliniate implicit stanga.

Exemplu cu trei butoane: „Adauga”, „Sus” si „Jos”

<div data-role="footer" class="ui-bar">
	<a href="l11ex1.html" data-role="button" data-icon="plus">Adauga</a>
	<a href="l11ex1.html" data-role="button" data-icon="arrow-u">Sus</a>
	<a href="l11ex1.html" data-role="button" data-icon="arrow-d">Jos</a>
</div>

jQuery Mobile Framework ofera posibilitatea de a grupa butoane. Vezi exemplu #2:

<div data-role="footer" class="ui-bar">
  <div data-role="controlgroup" data-type="horizontal">
	<a href="l11ex1.html" data-role="button" data-icon="plus">Adauga</a>
	<a href="l11ex1.html" data-role="button" data-icon="arrow-u">Sus</a>
	<a href="l11ex1.html" data-role="button" data-icon="arrow-d">Jos</a>
  </div>
</div>

Observatii

Pozitionarea „fixed”, „fullscreen” si „inline” sunt valabile si pentru bara de instrumente footer.

Demo

V-am pregatit demo-urile :

O părere la “Lectia 11 – Bara de instrumente Footer”

Lasă un răspuns

Completează mai jos detaliile despre tine sau dă clic pe un icon pentru autentificare:

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