jQuery Mobile: de la pagină la pagini


Am văzut în articolul de ieri cum arată o pagină simplă (poate fi considerată template) cu jQuery Mobile. Să mergem puţin mai departe: să avem două pagini (de aici generalizarea merge la oricâte). Desigur, primul impuls este să facem două fişiere diferite pentru cele două pagini. Aşa vom face. Rezultatul este mai jos, dar puteţi naviga şi extern: start.html şi despre.html. Observăm deja că subsolul e mai complex: conţine două panouri clickabile, cu iconiţă. Cum se obţine aşa ceva?

Studiaţi sursa paginilor indicate, dar pe scurt codul de la footer arată aşa:

<div data-role="footer"> 
	<div data-role="navbar">
		<ul>
			<li><a href="start.html" data-icon="home">Start</a></li>
			<li><a href="despre.html" data-icon="info">Despre</a></li>
		</ul>
	</div>
</div><!-- /subsol -->

Dacă aţi avut curiozitatea să daţi click pe Despre atunci aţi văzut o listă ce arată aparte. Din nou codul strict îl indic mai jos, simplificând desigur de dragul înţelegerii.

<div data-role="content">	
	<ul data-role="listview" data-theme="c">
		<li><a href="#">Un element.</a></li>
		<li><a href="#">Alt element.</a></li>
		<li><a href="#">Inca un element.</a></li>
	</ul>
</div><!-- /continut -->

Ei, dar acum vine ceva interesant: putem avea mai multe pagini într-un singur fişier. “Efectul” e acelaşi, după cum puteţi vedea deschizând totul.html. Secretul constă în a include mai multe pagini una după alta în acelaşi cadru (), dând nume fiecărei pagini, care permite apoi apelarea (pagina start o specificăm punând id=”start”, şi atunci apelarea se face cu href=”#start”). Mai jos vedeţi simplificată structura fişierului ce conţine două pagini).

...
<body> 
<div data-role="page" id="start">
	<div data-role="header">
		<h1>Start</h1>
	</div><!-- /antet -->
	<div data-role="content">	
		<p>Lorem ipsum...</p>
	</div><!-- /continut -->
	<div data-role="footer"> 
		<div data-role="navbar">
			<ul>
				<li><a href="#start" data-icon="home">Start</a></li>
				<li><a href="#despre" data-icon="info">Despre</a></li>
			</ul>
		</div>
	</div><!-- /subsol -->
</div><!-- /page -->

<div data-role="page" id="despre">
	<div data-role="header">
		<h1>Despre</h1>
	</div><!-- /antet -->
	<div data-role="content">	
		<ul data-role="listview" data-theme="c">
			<li><a href="#">Lorem ipsum...</a></li>
		</ul>
	</div><!-- /continut -->
	<div data-role="footer"> 
		<div data-role="navbar">
			<ul>
				<li><a href="#start" data-icon="home">Start</a></a></li>
				<li><a href="#despre" data-icon="info">Despre</a></a></li>
			</ul>
		</div>
	</div><!-- /subsol -->
</div><!-- /page -->
</body>
</html>

O întrebare de final ar fi: mai bine fişiere separate pentru fiecare pagină sau un fişier pentru mai multe pagini?Răspunsul depinde de „volumul” paginilor. Dacă sunt „grele”, atunci gândiţi-vă că pe telefonul mobil vizitatorul trebuie să aştepte încărcarea tuturor paginilor din acelaşi fişier. Poate încărcarea eşuează şi se obţine doar frustrare. Mai bine mai multe fişiere mici, încărcându-se ce e nevoie. Dacă pe de altă parte paginile sunt „uşoare”, cu conţinut puţin, atunci merită de dragul structurării şi a reducerii numărului de fişiere să ai mai multe pagini într-un fişier. Luaţi deci decizia după dimensiunea fişierelor: decât un fişier de 50KB, mai bine 10 fişiere de 5KB.


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (1 evaluări, media: 5,00 din 5)
Loading...Loading...

0 comentarii


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *