Collapsable list/tree: sense i amb jQuery

De wikijoan
Salta a la navegació Salta a la cerca

Introducció

Les llistes/arbres col.lapsables/desplegables estan disponibles a la web des de fa anys, gràcies a Javascript i CSS. Amb jQuery es poden implementar fàcilment d'altres efectes com ara una certa amortiguació a l'hora de desplegar/col.lapsar la llista.

Referències

sense jquery:

amb jquery:

Desenvolupament

Feina per l'alumne

El professor ha explicat a classe la manera de procedir i ha ensenyat el resultat a aconseguir. Es tracta, a partir dels enllaços, de fer dues llistes desplegables (sense i amb jQuery) que carreguin les comunitats autònomes (en el primer nivell de la llista), i les províncies (en el segon nivell de la llista), a partir de la base de dades que ja hem treballat en altres pràctiques. Per aconseguir-ho no cal adaptar el codi font, però sí que t'hauràs de descarregar tots els recursos necessaris (fitxers .js, .css i imatges). A més, se't demana que aquests recursos tinguin una estructura de directoris fixa: 

index.htm
   css/
   css/imatges/
   lib/

Hauràs de vigilar amb les imatges que estan referenciades des dels fitxers d'estil css. La referència és relativa al fitxer CSS, no relativa al projecte.

Solució parcial

index.php: 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">

<head>
	<meta charset="utf-8" />
	<title>Províncies</title>

<style>
.collapsibleList li{
  list-style-image : url('img/button.png');
  cursor           : auto;
}

li.collapsibleListOpen{
  list-style-image : url('img/button-open.png');
  cursor           : pointer;
}

li.collapsibleListClosed{
  list-style-image : url('img/button-closed.png');
  cursor           : pointer;
}
</style>

</head>

	<body onload="CollapsibleLists.apply();">

		<script src="CollapsibleLists.js" type="text/javascript">
		</script>
		<script type="text/javascript">

		</script>

<ul class="collapsibleList">
<?php
	include("open_db.php");
	//$sql = "select comunitat from comunitats";
	$sql = "select comunitat, provincia from comunitats c, provincies p where c.id_com=p.id_com order by comunitat, provincia";

	$result=mysqli_query($conn,$sql);

	if (!$result) {
	    $message  = 'Invalid query: ' . mysqli_error() . "\n";
	    die($message);
	}
	if (mysqli_num_rows($result) > 0) {
	    // output data of each row
		$comunitat = "";
		$count = 0;
		$te_provincies = 0;

	    while($row = mysqli_fetch_assoc($result)) {
				if ($comunitat != $row["comunitat"]) {
				if ($te_provincies == 1) echo "</ul>";
					$te_provincies = 0;
	       		 if ($count==0) echo "</li>";
	       		 echo "<li>" . $row["comunitat"];
					if ($row["comunitat"] != $row["provincia"]) $te_provincies = 1;
					if ($te_provincies == 1) echo "<ul>";
					$comunitat = $row["comunitat"];
					if ($te_provincies == 1) echo "<li>".$row["provincia"]."</li>";
					$count++;
				} else {
						if ($te_provincies == 1) echo "<li>".$row["provincia"]."</li>";
				}
    	}

	}

?>
<?php
	include("close_db.php");
?>
	</body>

</html>

Entrega

Els alumnes entregaran al Schoology tots els fitxers generats (fitxers html). Entrega també una captura de la pantalla on es pugui veure el funcionament correcte de l'exercici. S'empaquetaran tots aquests fitxers i es pujaran al Schoology dins del termini d'entrega de la pràctica.

Recorda la normativa per entregar les pràctiques al Schoology: ASIX-M10-UF2#Normativa_d.27entrega_de_les_pr.C3.A0ctiques_al_Schoology

creat per Joan Quintana Compte, abril 2019

Obtingut de «http://wiki.joanillo.org/index.php?title=Collapsable_list/tree:_sense_i_amb_jQuery&oldid=257758»