Lectia 5 – Teme jQuery Mobile Framework

jQuery Mobile Framework vine cu 5 teme pregatite. Pentru a modifica tema se va adauga atributul data-theme=”a” pentru div-ul dorit. Litera „a” reprezinta una dintre teme si mai sunt disponibile inca 4: „b”,”c”,”d”,”e”.

<!DOCTYPE html>
<html>
    <head>
    <title>Lectia 5 - Teme jQuery Mobile Framework</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" data-theme="b">
	<div data-role="header">
	<h1>Tema "a"</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="http://www.sandorkovacs.ro/" title="Site oficial - Sandor Kovacs" rel="external">Viziteaza site-ul lui Sandor</a>
	</div>
	</div>
   </div>





</body>
</html>

Observatii

  • profita de proprietatile CSS3, cum ar fi: colturi rotunjite, gradient, efecte de umbra
  • se foloseste gradient ca fundal pentru teme, rezulta optimizare viteza site
  • usor de activat alta tema
  • se pot mixa temele, de exemplu headerul sa aiba tema „a”, content-ul tema „b” si footer-ul tema „c”
  • este posibila personalizarea unei teme si personalizarea ei

Demo

V-am pregatit fisierele demo pentru cele 5 teme:

O părere la “Lectia 5 – Teme jQuery Mobile Framework”

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