Arhive etichetă: programare mobile

Lectia 12 – Bara de instrumente pentru navigare

jQuery Mobile ofera o bara de instrumente pentru navigare, se pot adauga pana la 5 butoane ( pe un rand ) cu sau fara iconita. Bara de instrumente de navigare se poate adauga atat in antet cat si in subsol.
Bara de instrumente pentru navigare este doar o lista <ul> avand atributul data-role=”navbar”.

Sa cream impreuna o bara de instrumente de navigare cu 2 butoane: „Prima pagina” si „Contact”

	<div data-role="header"  data-position="fixed" data-theme="c" >
			<h1>Lectia 12 – Bara de instrumente pentru navigare</h1>
			<div data-role="navbar">
				<ul>
					<li><a href="#home" class="ui-btn-active"   data-transition="slide">Prima pagina</a></li>
					<li><a href="#contact"   data-transition="slide">Contact</a></li>
				</ul>
			</div><!-- /navbar -->
	</div>

Demo

Demo-ul complet poti vizualiza aici.

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 :

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 :

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”).