Lectia 6 – Liste pentru site mobil

Adaugand atributul data-role=”listview” pentru o lista nesortata ( la eticheta <ul> ) , jQuery Mobile Framework transforma aceasta lista intr-una optimizata pentru mobil. Elementele din lista vor fi linkuri si se pot aplica efectele de tranzitie pentru a emula cat mai bine o aplicatie nativa mobil.

<!DOCTYPE html>
<html>
    <head>
    <title>Lectia 6 - Liste pentru site mobil</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 6 - Liste pentru site mobil</h1>
	</div>

	<div data-role="content">
	<p> 
        <ul data-role="listview" >
	   <li><a href="l6ex2.html">Acura</a></li>
           <li><a href="l6ex2.html">Audi</a></li>
	   <li><a href="l6ex2.html">BMW</a></li>
        </ul>
</p>

	</div>

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

</body>
</html>

Observatii

  • pentru site-uri mobile vom folosi tot eticheta <ul>
  • pentru a activa optimizarile jQuery Mobile pentru liste se va adauga atributul data-role=”listview”

Demo

V-am pregatit fisierul demo: Vizualizeaza DEMO

Anunțuri

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