Lectia 9 – Introducere in bara de instrumente

Cred ca fiecare dintre voi stie ce este bara de instrumente (toolbar) . In jQuery Mobile Framework sunt definite doua tipuri de bare de instrumente:

  1. Bara de instrumente pentru antet ( header toolbar ); de obicei contine titlul pagini + doua butoane – un buton in partea stanga si alt buton in partea dreapta
  2. Bara de instrumente pentru subsol ( footer toolbar ); de obicei contine atat butoane cat si text + linkuri.

Pozitionare

Barele de instrumente se pot pozitiona in 3 moduri:

  • inline – pozitionare implicita in jQuery Mobile Framework. Pozitionare „inline” inseamna ca se va aloca o zona pentru bara de instrumente, dar nu va fi mereu vizibila.
  • fixed – Prin pozitionare „fixed” bara de instrumente va rif mereu vizibila, din pacate va „fura” o mica zona din ecran .
  • fullscreen – Pozitionare „fullscreen” este tot o pozitionare „fixed” doar ca nu se va „fura zona din ecran” , toolbar-ul este transparent si sub toolbar se vede continutul paginii.

Cod sursa

Incepand cu aceasta lectie nu voi adauga tot codul, doar modificarile.

Pozitionare „fixed”

	<div data-role="header"  
             data-position="fixed" 
             data-theme="b">
		<h1>Lectia 9 - Introducere in bara de instrumente</h1>
...
	</div>

Pozitionare „fullscreen”

	<div data-role="header"  
             data-position="fixed" 
             data-fullscreen="true"
             data-theme="b">
		<h1>Lectia 9 - Introducere in bara de instrumente</h1>
...
	</div>

Demo

V-am pregatit 2 fisiere demo, primul exemplu cu pozitionare fixa („fixed”), iar celelalt cu pozitionare pe tot ecran („fullscreen”).

Anunțuri

O părere la “Lectia 9 – Introducere in bara de instrumente”

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