Amb els fonaments del posicionament coberts en l'últim article, ara veurem com crear alguns exemples del món real, per il·lustrar quin tipus de coses podeu fer amb el posicionament.
| Requisits previs: | Conceptes bàsics d'HTML (estudi Introducció a HTML), i una idea de com funciona CSS (estudi Introducció a CSS). |
|---|---|
| Objectiu: | Tenir una idea dels aspectes pràctics del posicionament |
El primer exemple que veurem és una caixa d'informació amb pestanyes clàssica - una característica molt freqüent que es fa servir quan voleu empaquetar molta informació en una petita àrea. Això inclou aplicacions de gran abast d'informació, com ara jocs d'estratègia/guerra, versions mòbils de llocs web on la pantalla és estreta i l'espai és limitat, i caixes d'informació compactes on és possible que vulgueu tenir molta informació disponible sense haver d'omplir tota la IU. El nostre senzill exemple es veurà així una vegada que hàgim acabat:
Nota: Podeu veure l'exemple acabat executant-ho en directa a info-box.html (codi font). Consulteu-ho per tenir una idea del que estareu construint en aquesta secció de l'article.
Podeu estar pensant "per què no crear les pestanyes separades com a pàgines web independents, i només les pestanyes, fent clic a través de les pàgines independents per crear l'efecte?" Aquest codi seria més senzill, sí, però cada visualització de "pàgina" per separat seria en realitat una pàgina web recentment carregada, la qual cosa faria més difícil guardar la informació entre les vistes i integrar aquesta característica en un disseny de d'interfície d'usuari més gran. A més, les anomenades "aplicacions de pàgina única" s'estan tornant molt populars - especialment per a les d'interfície d'usuari web mòbils - ja que tenir tot el que serveix com un únic arxiu redueix el nombre de sol·licituds HTTP necessàries per visualitzar tot el contingut, millorant així el rendiment.
Nota: Alguns desenvolupadors web porten les coses encara més lluny, només tenen una pàgina d'informació carregada alhora i canvien dinàmicament la informació que es mostra utilitzant, una funció de JavaScript com XMLHttpRequest. En aquest punt de l'aprenentatge, però, volem que les coses siguin tan simples com sigui possible. Hi ha una mica de JavaScript més endavant, però només una mica.
Per començar, ens agradaria que féssiu una còpia del fitxer HTML d'inici - info-box-start.html. Deseu-lo en algun lloc sensible a l'ordinador i obrir-ho en el vostre editor de text. Vegem l'HTML contingut en el cos:
<section class="info-box">
<ul>
<li><a href="#" class="active">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
</ul>
<div class="panels">
<article class="active-panel">
<h2>The first tab</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Vestibulum et orci scelerisque, vulputate tellus quis, lobortis dui. Vivamus varius libero at ipsum mattis efficitur ut nec nisl. Nullam eget tincidunt metus. Donec ultrices, urna maximus consequat aliquet, dui neque eleifend lorem, a auctor libero turpis at sem. Aliquam ut porttitor urna. Nulla facilisi.</p>
</article>
<article>
<h2>The second tab</h2>
<p>This tab hasn't got any Lorem Ipsum in it. But the content isn't very exciting all the same.</p>
</article>
<article>
<h2>The third tab</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. And now an ordered list: how exciting!</p>
<ol>
<li>dui neque eleifend lorem, a auctor libero turpis at sem.</li>
<li>Aliquam ut porttitor urna.</li>
<li>Nulla facilisi</li>
</ol>
</article>
</div>
</section>
Així que aquí tenim un element {{htmlelement("section")}} amb una class info-box, que conté un {{htmlelement("ul")}} i un {{htmlelement("div")}}. La llista desordenada conté tres elements de llista amb enllaços a l'interior, que es convertiran en les pestanyes reals per fer clic, per visualitzar els nostres panells de contingut. El div conté tres elements {{htmlelement("article")}}, que formaran els panells de contingut que corresponen a cada pestanya. Cada panell conté alguns continguts d'exemple.
La idea, aquí, és fer que l'estil de pestanyes pogui semblar-se a un menú estàndard de navegació horitzontal i donant-li estil els panells per a que s'asseguin un damunt de l'altre mitjançant el posicionament absolut. També us donarem una mica de JavaScript per incloure a la vostra pàgina, per mostrar el panell corresponent quan es pressiona una pestanya i l'estil de la pestanya en si. No necessitareu entendre el JavaScript en aquesta etapa, però haureu de pensar en aprendre una mica de JavaScript bàsic, el més aviat possible - com més complexes siguin les característiques de la vostra interfície d'usuari, més probable és que necessiteu implementar JavaScript a la vostra funcionalitat desitjada.
Per començar, afegiu el següent entre l'obertura i tancament de les etiquetes {{HTMLElement("style")}}:
html {
font-family: sans-serif;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
}
Aquesta és només una configuració general per establir una font sans-serif a la nostra pàgina, utilitzar el model border-box de {{cssxref("box-sizing")}} i desfer-se del marge predeterminat de {{htmlelement("body")}}.
A continuació, afegiu el següent just a sota del vostre CSS anterior:
.info-box {
width: 450px;
height: 400px;
margin: 0 auto;
}
Això estableix un ample i alçada específic sobre el contingut i el centra a la pantalla mitjançant el antic truc margin: 0 auto;. Anteriorment en el curs, vam aconsellar no establir una alçada fixa en contenidors de contingut, si fos possible; Està bé en aquesta circumstància, perquè tenim contingut fix en les nostres pestanyes. També sembla una mica discordant tenir diferents pestanyes a diferents alçades.
Ara volem que les pestanyes d'estil semblin com a pestanyes - bàsicament, aquest és un menú de navegació horitzontal, però en comptes de carregar diferents pàgines web quan es fa clic, com hem vist prèviament al curs, fa que es mostrin panells diferents en la mateixa pàgina. Primer, afegiu la següent regla a la part inferior del vostre CSS per eliminar el valor predeterminat {{cssxref("padding-left")}} i {{cssxref("margin-top")}} de la llista no ordenada:
.info-box ul {
padding-left: 0;
margin-top: 0;
}
Nota: Estem utilitzant selectors descendents amb .info-box al principi de la cadena a través d'aquest exemple - això és per poguer inserir aquesta funció en una pàgina amb un altre contingut ja en ella, sense por a interferir amb els estils aplicats a altres parts de la pàgina.
A continuació, dissenyarem les pestanyes horitzontals - els elements de la llista es flotant tots cap a l'esquerra per fer que s'asseguin en una sola línia, el seu {{cssxref("list-style-type")}} s'estableix a none per desfer-se de les vinyetes i el seu {{cssxref("width")}} s'estableix a 150px perquè s'ajusti còmodament a través de la caixa d'informació (info-box). Els elements {{htmlelement("a")}} estan configurats en {{cssxref("display")}} inline-block, perquè s'asseguin en una línia però que encara siguin estilitzables, i estiguin dissenyats adequadament per als botons de pestanya, usant una varietat d'altres propietats.
Afegiu el següent CSS:
.info-box li {
float: left;
list-style-type: none;
width: 150px;
}
.info-box li a {
display: inline-block;
text-decoration: none;
width: 100%;
line-height: 3;
background-color: red;
color: black;
text-align: center;
}
Finalment, per a aquesta secció, establirem alguns estils als estats de l'enllaç. En primer lloc, configurarem els estats :focus i :hover de les pestanyes, perquè es vegin diferents quan estan enfocats/planejats, oferint als usuaris alguna infomació visual. En segon lloc, establirem una regla que posi el mateix estil en una de les pestanyes quan hi hagi una class active present en ella. Definirem això mitjançant JavaScript quan es faci clic a una pestanya. Col·loqueu els següents CSS per sota dels altres estils:
.info-box li a:focus, .info-box li a:hover {
background-color: #a60000;
color: white;
}
.info-box li a.active {
background-color: #a60000;
color: white;
}
El següent treball és dissenyar els nostres panells. Anem a engegar-ho!
Primer de tot, afegiu la següent regla per dissenyar el contenidor .panels {{htmlelement("div")}}. Aquí, simplement, hem establert un {{cssxref("height")}} fix per assegurar-nos que els panells s'ajustin bé a l'interior de la caixa d'informació, {{cssxref("position")}} relative pel que fa a {{htmlelement("div" )}} com a context de posicionament, de manera que podeu col·locar elements fills posicionats relatius a ell i no a l'element {{htmlelement("html")}} i finalment el flotador {{cssxref("clear")}} establert en el CSS anterior perquè no interfereixi amb la resta del disseny.
.info-box .panels {
height: 352px;
position: relative;
clear: both;
}
Finalment, per a aquesta secció, dissenyarem els elements individuals {{htmlelement("article")}} que componen els nostres panells. La primera regla que afegirem serà {{cssxref("position")}} absolute dels panells, i farà que tots quedin asseguts, alineats a {{cssxref("top")}} i {{cssxref("left")}} del seu contenidor {{htmlelement ("div")}} - aquesta part és absolutament clau per a tota aquesta característica de disseny, ja que fa que els panells s'asseguin uns sobre els altres. La regla també proporciona als panells la mateixa alçada de conjunt que el contenidor, i dóna al contingut un farciment, un text {{cssxref("color")}} i un {{cssxref("background-color")}}.
La segona regla que afegirem aquí fa que un panell amb una class active-panel, establert en ell, tindrà un {{cssxref("z-index")}} d'1, que se li aplicarà, la qual cosa farà que s'asseguin per sobre dels altres panells (els elements posicionats tenen un z-index de 0 per defecte, la qual cosa els posaria a continuació). Una vegada més, afegirem aquesta classe utilitzant JavaScript en el moment adequat.
.info-box article {
position: absolute;
top: 0;
left: 0;
height: 352px;
padding: 10px;
color: white;
background-color: #a60000;
}
.info-box .active-panel {
z-index: 1;
}
L'últim pas per fer funcionar aquesta característica és afegir JavaScript. Col·loqueu el següent bloc de codi, exactament com s'escriu, entre les etiquetes d'obertura i tancament {{htmlelement("script")}} (trobareu aquestes a sota del contingut HTML):
var tabs = document.querySelectorAll('.info-box li a');
var panels = document.querySelectorAll('.info-box article');
for(i = 0; i < tabs.length; i++) {
var tab = tabs[i];
setTabHandler(tab, i);
}
function setTabHandler(tab, tabPos) {
tab.onclick = function() {
for(i = 0; i < tabs.length; i++) {
tabs[i].className = '';
}
tab.className = 'active';
for(i = 0; i < panels.length; i++) {
panels[i].className = '';
}
panels[tabPos].className = 'active-panel';
}
}
Aquest codi fa el següent:
tabs i panels, així, fàcilment, podem fer coses amb elles més endavant.for per recórrer totes les pestanyes i executar una funció anomenada setTabHandler() en cadascuna, en el qual s'estableix la funcionalitat que ha de produir-se quan es fa clic en cadascuna d'elles. Quan s'executa, es passa a la funció una referència a la pestanya, en particular, per a la qual s'executa, i un nombre d'índex i que identifica la posició de la pestanya en la matriu tabs.setTabHandler(), la pestanya té un controlador d'esdeveniments onclick establert en ell, de manera que quan es fa clic a la pestanya, es produeix el següent:
for s'utilitza per recórrer totes les pestanyes i eliminar les classes que hi són presents.class active s'estableix a la pestanya en la qual s'ha fet clic - recordeu que, anteriorment, aquesta classe té una regla associada al CSS que estableix el mateix estil {{cssxref("color")}} i {{cssxref("background-color")}} a la pestanya com els panells.for s'utilitza per recórrer tots els panells i eliminar les classes que hi són presents.active-panel s'estableix al panell que correspon a la pestanya que es va fer clic - recordeu que anteriorment, aquesta classe té una regla associada al CSS que estableix el seu {{cssxref("z-index")}} a 1, fent que aparegui a la part superior dels altres panells.Això és tot pel primer exemple. Manteniu obert el vostre codi, ja que l'afegirem a la segona.
En el nostre segon exemple, farem el nostre primer exemple - la nostra caixa d'informació - i l'afegirem al context d'una pàgina web completa. Però no només això - li donarem una posició fixa perquè es mantingui en la mateixa posició en la finestra del navegador. Quan el contingut principal es desplaci, la caixa d'informació romandrà en la mateixa posició en la pantalla. El nostre exemple acabat tindrà aquest aspecte:
Nota: Podeu veure l'exemple acabat, executant-ho en directe a fixed-info-box.html (codi font). Comproveu-ho per tenir una idea del que serà la construcció d'aquesta secció de l'article.
Com a punt de partida, podeu fer servir l'exemple complet de la primera secció de l'article o fer una còpia local de info-box.html des del nostre repositori de Github.
En primer lloc, necessitem un codi HTML addicional per representar el contingut principal del lloc web. Afegiu el següent {{htmlelement("section")}} just a sota de l'etiqueta d'apertura {{htmlelement("body")}}, just abans de la secció existent:
<section class="fake-content"> <h1>Fake content</h1> <p>This is fake content. Your main web page contents would probably go here.</p> <p>This is fake content. Your main web page contents would probably go here.</p> <p>This is fake content. Your main web page contents would probably go here.</p> <p>This is fake content. Your main web page contents would probably go here.</p> <p>This is fake content. Your main web page contents would probably go here.</p> <p>This is fake content. Your main web page contents would probably go here.</p> <p>This is fake content. Your main web page contents would probably go here.</p> <p>This is fake content. Your main web page contents would probably go here.</p> </section>
Nota: Us podeu sentir lliures de canviar el contingut fals per a algun contingut real si ho desitjeu.
A continuació, hem de fer petits canvis al CSS existent, per tenir la caixa d'informació col·locada i posicionada Canvieu la regla .info-box per desfer-vos del margin: 0 auto; (Ja no volem que la caixa d'informació estigui centrada), afegiu {{cssxref("position")}}: fixed;, i enganxeu-ho en el {{cssxref("top")}} de la finestra de visualització del navegador.
Ara ha de ser així:
.info-box {
width: 450px;
height: 400px;
position: fixed;
top: 0;
}
L'únic que queda per a aquest exemple és proporcionar al contingut principal amb un estil. Afegiu la següent regla sota la resta del vostre CSS:
.fake-content {
background-color: #a60000;
color: white;
padding: 10px;
height: 2000px;
margin-left: 470px;
}
Per començar, donem al contingut el mateix {{cssxref("background-color")}}, {{cssxref("color")}}, i {{cssxref("padding")}} com els panells de caixa d'informació. A continuació, li donem un gran {{cssxref("margin-left")}} per moure-ho cap a la dreta, fent espai perquè la caixa d'informació s'assegui, de manera que no se superposi amb qualsevol altre cosa.
Això marca el final del segon exemple; esperem que trobeu el tercer tan interessant.
L'exemple final que presentarem aquí és un panell que es llisca des de dins i fora de la pantalla en prémer una icona - com s'ha esmentat anteriorment, això és popular per a situacions com ara dissenys de mòbils, on els espais de pantalla disponibles són petits, per la qual cosa no es desitja usar la major part d'ella, mostrant un menú o panell d'informació en lloc de contingut útil.
El nostre exemple acabat tindrà aquest aspecte:
Nota: Podeu veure l'exemple acabat, executant-ho en directe a hidden-info-panel.html (codi font). Comproveu-ho per tenir una idea del que serà la construcció d'aquesta secció de l'article.
Com a punt de partida, feu una còpia local de hidden-info-panel-start.html des del nostre repositori de Github. Això no segueix l'exemple anterior, de manera que cal un nou fitxer d'inici. Fem un cop d'ull al codi HTML del fitxer:
<label for="toggle">❔</label> <input type="checkbox" id="toggle"> <aside> ... </aside>
Per començar, tenim un element {{htmlelement("label")}} i un element {{htmlelement("input")}} - els elements <label> normalment s'utilitzen per associar una etiqueta de text amb un element de formulari amb finalitats d'accessibilitat (permetent que un usuari de pantalla vegi quina descripció fa amb quin element del formulari). Aquí s'associa amb la casella de verificació <input> amb els atributs for i id.
Nota: Hem posat un gran signe d'interrogació en el nostre HTML perquè actuï com la nostra icona d'informació - aquest representa el botó que es premut per mostrar/amagar el panell.
Aquí utilitzarem aquests elements per un propòsit lleugerament diferent - un altre efecte secundari útil dels elements <label> és que podeu fer clic a l'etiqueta de la casella de verificació per a marcar la casella de verificació, així com només la casella de verificació. Això ha portat a la coneguda checkbox hack, que proporciona una forma lliure de JavaScript per controlar un element mitjançant la commutació d'un botó. L'element que anem a controlar és l'element {{htmlelement("aside")}} que segueix els altres dos (hem deixat el seu contingut fora del llistat del codi anterior per brevetat).
A les seccions següents explicarem com funciona tot això.
Primer tractarem els elements de formulari - afegiu el següent CSS entre les etiquetes {{htmlelement("style")}}:
label[for="toggle"] {
font-size: 3rem;
position: absolute;
top: 4px;
right: 5px;
z-index: 1;
cursor: pointer;
}
input[type="checkbox"] {
position: absolute;
top: -100px;
}
La primera regla donar estil el <label>; aquí tenim:
absolute, i utilitzeu {{cssxref("top")}} i {{cssxref("right")}} per col·locar-ho bé a la cantonada superior dreta.La segona regla estableix {{cssxref("position")}} absolute en l'element <input> de casella de verificació real i l'oculta a la part superior de la pantalla. De fet, no volem veure això a la nostra interfície d'usuari.
Ara és hora de donar-li estil el propi panell lliscant. Afegiu la següent regla al final del vostre CSS:
aside {
background-color: #a60000;
color: white;
width: 340px;
height: 98%;
padding: 10px 1%;
position: fixed;
top: 0;
right: -370px;
transition: 0.6s all;
}
Hi ha molt a fer aquí, analitzem-ho a poc a poc:
box-sizing: border-box; en aquest exemple).fixed; en el panell perquè sempre aparegui al mateix lloc, fins i tot si la pàgina té contingut per desplaçar-se. Ho peguem a la {{cssxref("top")}} de la finestra de visualització, i ho configurem perquè de manera predeterminada estigui fora de pantalla a la {{cssxref("right")}}.Hi ha una mica de CSS per afegir - poseu el següent al final del vostre CSS:
input[type=checkbox]:checked + aside {
right: 0px;
}
El selector és bastant complex aquí - estem seleccionant l'element <aside> adjacent a l'element <input>, però només quan està marcat (tingueu en compte l'ús de la pseudo-classe {{cssxref (": checked")}} per aconseguir això). Quan aquest és el cas, estem establint la propietat {{cssxref("right")}} de <aside> a 0px, el que fa que el panell aparegui novament en la pantalla (suaument a causa de la transició). En fer clic en l'etiqueta, torna a desmarcar la casella de verificació, que torna a ocultar el panell.
Així que aquí ho teniu - una manera bastant intel·ligent, lliure de Javascript, per crear un efecte de botó alternatiu. Això funcionarà en IE9 i superiors (la transició suau funcionarà en IE10 i superiors). Aquest efecte té algunes preocupacions - això és abusar una mica d'elements de forma (no estan destinats per a aquest propòsit), i l'efecte no és el millor en termes d'accessibilitat - l'etiqueta no es pot enfocar de manera predeterminada, i l'ús no semàntic dels elements de formulari pot causar problemes amb els lectors de pantalla. JavaScript i un enllaç o un botó poden ser més apropiat, però encara és divertit experimentar.
Així que arrodonim el nostre cop d'ull en el posicionament - ara com ara, heu de tenir una idea de com funciona la mecànica bàsica, així com la comprensió de com començar a aplicar-los en la construcció d'algunes característiques interessants de la interfície d'usuari. No us preocupeu sinó vau rebre tot això immediatament - el posicionament és un tema bastant avançat, i sempre podeu treballar a través dels articles de nou, per ajudar-vos en la vostra comprensió. El següent tema al que ens referirem és a Flexbox.
{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}