Lectia 2 – Creare legaturi intre pagini

In prima lectie am invatat cum sa cream o pagina optimizat pentru mobil in HTML5, iar azi vom crea doua pagini. Este evident ca daca exist doua pagini trebuie sa aiba o legatura intre ele.

Pas1. Cream doua pagini optimizat pentru mobil

Utilizand jQuery Mobile, toate request-urile in principiu sunt request-uri AJAX, iar pentru a implementa inca o pagina avem nevoie de inca un div cu data-role=’page’. Legaturile intre pagini voi adauga la pasul 2.

<!DOCTYPE html>
<html>
    <head>
    <title>Lectia 1 - Introducere in jQuery Mobile</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 1 - Introducere in jQuery Mobile</h1>
	</div>

	<div data-role="content">
	<p><center>...Cursul este recomandat pentru studenti / elevi,dar vreau sa ma adresez catre programatori cu sau fara experienta . Pentru programatorii cu experienta primele 10 tutoriale vor fi prea simple, va necesita 1-2 minute, iar pentru ceilalti maxim 10 minute...</center></p>

	</div>

	<div data-role="footer">

	</div>
   </div>



  <!-- PAGINA LECTIA 2-->
  <div data-role="page" id="lectia2">
	<div data-role="header">
	<h1>Lectia 2 – Creare legaturi intre pagini</h1>
	</div>

	<div data-role="content">
	<p><center>...Utilizand jQuery Mobile, toate request-urile in principiu sunt request-uri AJAX, iar pentru a implementa inca o pagina avem nevoie de inca un div cu data-role='page'..</center></p>

	</div>

	<div data-role="footer">
	
	</div>
   </div>


</body>
</html>

Pas2. Adaugam legaturile

Implicit toate request-urile sunt de tip Ajax. Introducem urmatorul cod in prima pagina in divul „footer”:

<a href="#lectia2" 
   title="Lectia 2 – Creare legaturi intre pagini">Lectia 2</a> 

iar in a doua pagina, divul „footer”, vom adauga o legatura catre prima pagina adaugand urmatorul cod:

<a href="#home" 
   title="Lectia 1 - Introducere in jQuery Mobile">Lectia 1</a> 

Observatii

  • in legaturi, atributul href incepe cu semnul # si urmeaza id-ul divului pentru care dorim legatura
  • pentru legatura externa se vor adauga atributele data-ajax=”false” si rel=”external”

V-am pregatit un fisier demo, pentru cei care vor sa vada rezultatul inainte sa parcurga lectia.
Vizualizeaza DEMO

Feedback si Share

Astept feedback si intrebari sub forma de comentariu.
Sprijina aceste lectii prin FB LIKE si SHARE, GOOGLE +1, TWEET, etc.

Anunțuri

O părere la “Lectia 2 – Creare legaturi intre pagini”

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