Lectia 7 – Filtre

Filtrarea unei liste este foarte utila cand dorim sa gasim un anumit lucru. De exemplu, in lectia 6 am avut o lista cu marcile masinilor si acum dorim sa activam un filtru.
Activarea filtrului se face adaugand atributul data-filter=”true” pentru lista din exemplu.

<!DOCTYPE html>
<html>
    <head>
    <title>Lectia 7 - Filtre</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 7 - Filtre</h1>
	</div>

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

	</div>

	<div data-role="footer">
<p>&copy; 2012</p>
	</div>
   </div>

</body>
</html>

Observatie

  • filtrul se adauga folosind atributul data-filter=”true”

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