Usted está aquí: Inicio Componentes Avanzados Control de Pestañas UCA

Pestañas UCA (Tabs)

El control de pestañas UCA es un componente que le permitirá mostrar su contenido dividido en secciones. Su uso se basa en javascript y se puede utilizar en cualquier página web UCA/Plone.


  • A continuación se muestra como quedaría la inclusión del control de pestañas en la presente página:

Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per.

Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri graeco dicunt, ad cum veri accommodare. Sed at malis omnesque delicata, usu et iusto zzril meliore. Dicunt maiorum eloquentiam cum cu, sit summo dolor essent te. Ne quodsi nusquam legendos has, ea dicit voluptua eloquentiam pro, ad sit quas qualisque. Eos vocibus deserunt quaestio ei.

Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per.

No mei ferri graeco dicunt, ad cum veri accommodare. Sed at malis omnesque delicata, usu et iusto zzril meliore. Dicunt maiorum eloquentiam cum cu, sit summo dolor essent te. Ne quodsi nusquam legendos has, ea dicit voluptua eloquentiam pro, ad sit quas qualisque.

Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri graeco dicunt, ad cum veri accommodare. Sed at malis omnesque delicata, usu et iusto zzril meliore. Dicunt maiorum eloquentiam cum cu, sit summo dolor essent te. Ne quodsi nusquam legendos has, ea dicit voluptua eloquentiam pro, ad sit quas qualisque. Eos vocibus deserunt quaestio ei.


Utilización

Para mostrar el control de pestañas serán necesarias tres cosas:

  1. Incluir los estilos css y la librería javascript necesaria:
    <link rel="stylesheet" href="http://www.uca.es/static/css/jquery-ui.css"> <script src="http://www.uca.es/static/js/jquery-1.10.2.js"></script> <script src="http://www.uca.es/static/js/jquery-ui.js"></script>
  2. Introducir el contenido respetando la estructura correspondiente:
    <div id="tabs"> <!-- Primera Parte: Definir las pestañas (y los enlaces a los divs de contenido de cada una)--> <ul> <li> <a href="#ucatab-1"> <span>Algeciras</span> </a> </li> <li> <a href="#ucatab-2"> <span>Cádiz</span> </a> </li> <li> <a href="#ucatab-3"> <span>Jerez</span> </a> </li> </ul> <!-- Segunda Parte: Definir los contenidos de cada pestaña --> <div id="ucatab-1"> <p>Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per.</p> <p>Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri graeco dicunt, ad cum veri accommodare. Sed at malis omnesque delicata, usu et iusto zzril meliore. Dicunt maiorum eloquentiam cum cu, sit summo dolor essent te. Ne quodsi nusquam legendos has, ea dicit voluptua eloquentiam pro, ad sit quas qualisque. Eos vocibus deserunt quaestio ei.</p> </div> <div id="ucatab-2"> <p>Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per.</p> </div> <div id="ucatab-3"> <p>Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri graeco dicunt, ad cum veri accommodare. Sed at malis omnesque delicata, usu et iusto zzril meliore. Dicunt maiorum eloquentiam cum cu, sit summo dolor essent te. Ne quodsi nusquam legendos has, ea dicit voluptua eloquentiam pro, ad sit quas qualisque. Eos vocibus deserunt quaestio ei.</p> </div> </div>
    * Nota: Fíjese que el contenido está dividido en dos partes, la definición de las pestañas y la del contenido de las mismas, y en que los enlaces de las pestañas deben coincidir con los identificadores de los divs que contienen su texto.
  3. Llamada final a la función javascript $("#tabs").tabs(); que es la que crea la estructura visual de las pestañas (el identificador debe ser el indicado en el HTML anterior "tabs").
    <script> $("#tabs").tabs(); </script>

  • El código HTML completo para el ejemplo anterior sería:
<link rel="stylesheet" href="http://www.uca.es/static/css/jquery-ui.css"> <script src="http://www.uca.es/static/js/jquery-1.10.2.js"></script> <script src="http://www.uca.es/static/js/jquery-ui.js"></script> <div id="tabs"> <!-- Primera Parte: Definir las pestañas (y los enlaces a los divs de contenido de cada una)--> <ul> <li> <a href="#ucatab-1"> <span>Algeciras</span> </a> </li> <li> <a href="#ucatab-2"> <span>Cádiz</span> </a> </li> <li> <a href="#ucatab-3"> <span>Jerez</span> </a> </li> </ul> <!-- Segunda Parte: Definir los contenidos de cada pestaña --> <div id="ucatab-1"> <p>Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per.</p> <p>Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri graeco dicunt, ad cum veri accommodare. Sed at malis omnesque delicata, usu et iusto zzril meliore. Dicunt maiorum eloquentiam cum cu, sit summo dolor essent te. Ne quodsi nusquam legendos has, ea dicit voluptua eloquentiam pro, ad sit quas qualisque. Eos vocibus deserunt quaestio ei.</p> </div> <div id="ucatab-2"> <p>Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per.</p> </div> <div id="ucatab-3"> <p>Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri graeco dicunt, ad cum veri accommodare. Sed at malis omnesque delicata, usu et iusto zzril meliore. Dicunt maiorum eloquentiam cum cu, sit summo dolor essent te. Ne quodsi nusquam legendos has, ea dicit voluptua eloquentiam pro, ad sit quas qualisque. Eos vocibus deserunt quaestio ei.</p> </div> </div> <script> $("#tabs").tabs(); </script>

Acciones de documento
Favoritos / Compartir