Pestanyes caixa
Dificultat Mitjana-Alta
Les pestanyes o Tabs en anglès són contenidors que ens mostren el contingut actiu quan estan seleccionades.
primera pestanya...
segona pestanya...
de la quarta pestanya...
Crear un conjunt de pestanyes
- Seleccionar la plantilla
- Visualitzar el codi HTML
- Interpretar el codi HTML
- Personalitzar el nostre conjunt de pestanyes
Seleccionar la plantilla
Obrirem l'editor del Genweb i buscarem el botó que ens permet obrir uns continguts predefinits, en concret l'anomenat Pestanyes caixa, el qual ens deixa inserir trossos de codi html que hem d'adaptar a la realitat que volem, sovint editant codi html.
Farem clic a la barra d'eines situada a la part superior i del menú desplegable seleccionarem l'opció que diu Pestanyes caixa. Tot seguit farem clic al botó de la part inferior insereix.
D'aquesta forma el codi predefinit a la plantilla s'inserirà a la posició en què hàgim deixat el cursor a l'editor de la nostra pàgina (per defecte o inserirà a l'inici del document).
Visualitzar el codi HTML
El codi html és bàsic per a editar continguts en qualsevol plataforma CMS, com per exemple, aquesta. És per això que us deixem un enllaç a aquest tutorial, on podeu trobar una guia de referència.
Interpretar el codi HTML
El codi html que forma la pàgina se'ns mostrarà d'una forma similar a la de la imatge, però és aconsellable tenir un editor html extern, ja sigui d'un programari amb llicència descarregable de la mateixa web de distribució de software d'UPCnet o algun que sigui gratuït, com per exemple, Notepad++, ja que, per segons quin nivell d'edició de codi, ens resultarà més fàcil editar el codi en aquests programes i inserir-lo de nou, un cop editat.
El primer que aconsellem és tabular el codi, es a dir, identificar on comencen les etiquetes <tags> capes <div> etc., que engloben altres capes i etiquetes.
En aquest cas tenim una capa <div class="beautytab"> i una llista amb totes les pestanyes, anomenada
<ul id="myTab">
dintre iteren els ítems que conformen la llista de pestanyes, essent el que porta la classe active el que està activat per defecte.
<li class="formTab firstFormTab active"><a href="#primera" data-toggle="tab">Primera</a></li> <li class="formTab"><a href="#segona" data-toggle="tab">Segona</a></li> <li class="formTab"><a href="#tercera" data-toggle="tab">Tercera</a></li> <li class="formTab lastFormTab"><a href="#quarta" data-toggle="tab">Quarta</a></li> </ul>
tot seguit tenim una capa que conté totes les descripcions o continguts que hi ha a cada ítem respectiu
<div class="tab-content beautytab-content">
la classe tab-pane active és la que està activada per defecte.
<div class="tab-pane active" id="primera">Contingut de la primera pestanya...</div> <div class="tab-pane" id="segona">Contingut de la segona pestanya...</div> <div class="tab-pane" id="tercera">Contingut de la tercera pestanya...</div> <div class="tab-pane" id="quarta">Contingut de la quarta pestanya...</div> </div>
Personalitzar les nostres pestanyes. Dubtes freqüents
És important, com a qualsevol altre contingut que vulguem editar, tenir clar què volem des del principi. Per exemple, quantes pestanyes volem d'inici i quins seran els continguts que volem que es mostrin, així com totes les consideracions que siguin necessàries en funció del que vulguem aconseguir. Personalitzar plantilles avançades com aquesta requereix un cert nivell de coneixement de codi html.
Podeu trobar més informació al respecte, fent clic aquí.