Unidad 24. AJAX y Spry Framework (XIV)

24.14. Spry y estilos CSS

Además de todo lo que hemos visto, Spry tiene un par de atributos que nos servirán de muchísima ayuda a la hora de darle formato y resaltar zonas de la pantalla.

 

spry:hover permite aplicar a un elemento una clase CSS existente cuando el cursor esté encima.

Simplemente deberás indicar el nombre de la clase que anteriormente habrás definido y Spry hará el resto por ti:

<style>

  .resaltado { background-color: yellow; }

</style>

...

<div spry:region="miDataSet">

 <ul spry:repeatchildren="miDataSet">

   <li spry:hover="resaltado">{@id}, {propiedad}</li>

 </ul>

</div>

Del mismo modo, spry:select actúa aplicando un estilo determinado cuando hacemos clic en la etiqueta afectada por este atributo, la sintaxis es exactamente la misma.

Combinando ambos método podremos lograr una interfaz mucho más interactiva.

<style>

  .resaltado { background-color: yellow; }

  .seleccionado { color: red; }

</style>

...

<div spry:region="miDataSet">

 <ul spry:repeatchildren="miDataSet">

   <li spry:hover="resaltado" spry:select="seleccionado">{@id}, {propiedad}</li>

 </ul>

</div>

 

Finalmente, Spry permite el uso de una propiedad más, spry:selectgroup.

El objetivo de este atributo es que cualquier elemento que use el mismo valor asignado a él deje de tomar la clase aplicada cuando se haga clic sobre otro elemento con el mismo nombre de grupo.

El resto de elementos con valores diferentes en spry:selectgroup seguirán con la regla CSS aplicada hasta que se haga clic en un elemento con el mismo nombre de grupo.

<lispry:hover="resaltado" spry:select="seleccionado" spry:selectgroup="miGrupo">{@id}, {propiedad}</li>

 Cursos Informática Gratuitos