Lectia 4 – Butonul „back”


In lectia 4 scriu despre butonul „back” . Motivul pentru care insist asupra butonului „back” este faptul ca la aplicatii mobile butonul „back” se afla in coltul stanga sus si utilizatorii pur si simplu sunt obisnuiti cu pozitia butonului. Bineinteles este posibil adaugarea unui buton personalizat, dar se poate si mai simplu cu jquery mobile framework. jQuery Mobile Framework ofera aceasta optiune, doar trebuie adaugat atributul data-add-back-btn=”true” la div-ul cu data-role=”page”.

<!DOCTYPE html>
<html>
    <head>
    <title>Lectia 4 - Butonul "back"</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
    </head>
<body> 

  <!-- PRIMA PAGINA -->
  <div data-role="page" id="home">
	<div data-role="header">
	<h1>Lectia 4 - Butonul "back"</h1>
	</div>

	<div data-role="content">
	<p><center>"jQuery Mobile Framework ofera aceasta optiune, doar trebuie adaugat  atributul <strong>data-add-back-btn="true"</strong> la div-ul cu <strong>data-role="page"</strong>. "</center></p>

	</div>

	<div data-role="footer">
	<a href="#pagina2" 
           data-transition="pop"
	   title="Du-te la pagina2">Pagina 2</a> 
	</div>
	</div>
   </div>



  <!-- PAGINA LECTIA 2-->
  <div data-role="page" id="pagina2" data-add-back-btn="true">
	<div data-role="header">
	<h1>Pagina2</h1>
	</div>

	<div data-role="content">
	<p><center>"Bineinteles este posibil adaugarea  unui buton personalizat, dar se poate si mai simplu cu jquery mobile framework."</center></p>

	</div>

	<div data-role="footer">
	<a href="#home" 
           data-transition="pop"
           data-rel="back"
	   title="Inapoi la prima pagina">Inapoi</a> 
	</div>
   </div>

</body>
</html>

Observatii

  • in jQuery Mobile Framework, versiunea 1.1.0, afisarea implicita butonului „back” a fost dezactivata
  • butonul „back” clasic se activeaza adaugand atributul data-add-back-btn=”true”, vezi linia #33
  • se poate adauga functionalitatea „back” pentru un link adaugand atributul data-rel=”back”, vezi linia #46

Demo

V-am pregatit fisierul demo: Vizualizeaza DEMO

O părere la “Lectia 4 – Butonul „back””

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