Izvēļņu noformēšana izmantojot stilus.


Sākumlapa Iepriekšējā lappuse


  • Šajā lapā izmantotie stili->.
  • Guleniskas izvēlnes

    Izmantojot tabulas

    Lai sakārtotu izvēlni guleniski, var izmantot tabulas. Ja netiek atbalstīti stili, tad tā ir vienīgā iespēja kā izveidot gulenisku izvēlni. Šāda pieeja neatļauj izveidot izlecošas apakšizvēlnes.

    Pirmajā piemērā redzams, kā izskatās šada izvēlne izmntojot noklusētos iestādījumus:

    <table>
    <tr>
    	<td>&nbsp;</td>
    	<td><a href=stili.07.shtml#1 title="Pirmā izvēlne">Pirmais</a></td>
    	<td><a href=stili.07.shtml#2 title="Otrā izvēlne">Otrais</a></td>
    	<td><a href=stili.07.shtml#3 title="Trešā izvēlne">Trešais</a></td>
    	<td><a href=stili.07.shtml#4 title="Ceturtā izvēlne">Ceturtais</a></td>
    	<td><a href=stili.07.shtml#5 title="Piektā izvēlne">Piektais</a></td>
    	<td><a href=stili.07.shtml#5 title="Sestā izvēlne">Sestais</a></td>
    	<td><a href=stili.07.shtml#6 title="Septītā izvēlne">Septītais</a></td>
    	<td>&nbsp;</td>
    </tr>
    </table>
    
      Pirmais Otrais Trešais Ceturtais Piektais Sestais Septītais  

    Izmantojot stilus šo izvēlni iespējams padarīt daudz pievilcīgāku. Lai iekrāsotos visa tabulas šūna, tiek izmantots parametrs „display: block;

    <table width=100% border=1 cellpadding="1" cellspacing="1">
    <tr class=josla>
    	<td class=malas>&nbsp;</td>
    	<td class=pogas_1><a href=stili.07.shtml#1 title="Pirmā izvēlne">Pirmais</a></td>
    	<td class=pogas_1><a href=stili.07.shtml#2 title="Otrā izvēlne">Otrais</a></td>
    	<td class=pogas_1><a href=stili.07.shtml#3 title="Trešā izvēlne">Trešais</a></td>
    	<td class=pogas_1><a href=stili.07.shtml#4 title="Ceturtā izvēlne">Ceturtais</a></td>
    	<td class=pogas_1><a href=stili.07.shtml#5 title="Piektā izvēlne">Piektais</a></td>
    	<td class=pogas_1><a href=stili.07.shtml#6 title="Sestā izvēlne">Sestais</a></td>
    	<td class=pogas_1><a href=stili.07.shtml#7 title="Septītā izvēlne">Septītais</a></td>
    	<td class=malas>&nbsp;</td>
    </tr>
    </table>
    
      Pirmais Otrais Trešais Ceturtais Piektais Sestais Septītais  

    Izmainot tabulas parametrus, viegli mainīt attālumus starp „pogām”:

    <table width=100% border=0 cellpadding="4" cellspacing="4">
    
      Pirmais Otrais Trešais Ceturtais Piektais Sestais Septītais  
    <table width=100% border=0 cellpadding="0" cellspacing="0">
    
      Pirmais Otrais Trešais Ceturtais Piektais Sestais Septītais  

    Izmantojot tikai stilus

    Izmantojot stila lapas par gulenisku izvelni var pārtaisīt arī sarakstu. Šīm vajadzībām tiek izmantots parametrs „display: inline;

    <ul class=izvelne>
    	<li><a href=stili.07.shtml#1 title="Pirmā izvēlne">Pirmais</a></li>
    	<li><a href=stili.07.shtml#2 title="Otrā izvēlne">Otrais</a></li>
    	<li><a href=stili.07.shtml#3 title="Trešā izvēlne">Trešais</a></li>
    	<li><a href=stili.07.shtml#4 title="Ceturtā izvēlne">Ceturtais</a></li>
    	<li><a href=stili.07.shtml#5 title="Piektā izvēlne">Piektais</a></li>
    	<li><a href=stili.07.shtml#6 title="Sestā izvēlne">Sestais</a></li>
    	<li><a href=stili.07.shtml#7 title="Septītā izvēlne">Septītais</a></li>
    </ul>
    

    Ja netiktu izmantoti attiecīgi nodefinētie stili, butu redzms vienkāršs saraksts:

    No daudzpakāpju saraksta var izveidot arī izlecošās izvēlnes. Šīm vajadzībām tiek izmantots parametri „visibility: hidden;” un „visibility: visible;”.

    <ul class="salikta-izvelne">
    <li class="apaksizvelne"><a href=stili.07.shtml#1>Pirmais</a>
    <ul>
    	<li><a href=stili.07.shtml#1.1>Pirmais:Pirmais</a></li>
    </ul>
    </li>
    <li><a href=stili.07.shtml#2>Otrais</a></li>
    <li class="apaksizvelne"><a href=stili.07.shtml#3>Trešais</a>
    <ul>
    	<li><a href=stili.07.shtml#3.1>Trešais:Pirmais</a></li>
    	<li><a href=stili.07.shtml#3.2>Trešais:Otrais</a></li>
    	<li><a href=stili.07.shtml#3.3>Trešais:Trešais</a></li>
    	<li><a href=stili.07.shtml#3.4>Trešais:Ceturtais</a></li>
    	<li><a href=stili.07.shtml#3.5>Trešais:Piektais</a></li>
    	<li><a href=stili.07.shtml#3.6>Trešais:Sestais</a></li>
    	<li><a href=stili.07.shtml#3.7>Trešais:Septītais</a></li>
    	<li><a href=stili.07.shtml#3.8>Trešais:Astotais</a></li>
    	<li><a href=stili.07.shtml#3.9>Trešais:Devītais</a></li>
    </ul>
    </li>
    <li class="apaksizvelne"><a href=stili.07.shtml#4>Ceturtais</a>
    <ul>
    	<li><a href=stili.07.shtml#4:1>Ceturtais:Pirmais</a></li>
    	<li><a href=stili.07.shtml#4:2>Ceturtais:Otrais</a></li>
    	<li><a href=stili.07.shtml#4:3>Ceturtais:Trešais</a></li>
    </ul>
    </li>
    <li class="apaksizvelne"><a href=stili.07.shtml#5>Piektais</a>
    <ul>
    	<li><a href=stili.07.shtml#5:1>Piektais:Pirmais</a></li>
    	<li><a href=stili.07.shtml#5:2><img src=/atteli/mazini/Dzivnieki/kaija.gif width=86 height=37 border=0></a></li>
    	<li><a href=stili.07.shtml#5:3>Piektais:Trešais</a></li>
    	<li><a href=stili.07.shtml#5:4>Piektais:Ceturtais</a></li>
    </ul>
    </li>
    </ul>
    

    Atceries, ka izlecošajai izvēlnei tiek parādīta tikai tā daļa, kas ietilpst redzamajā logā.

    Stateniska izvēlne

    Izmantojot stilus par izvēlni var pataisīt jebkuru tekstu, arī rindkopas:

    <p class=pogas_3><a href=stili.07.shtml#1>Pirmā</a></p>
    <p class=pogas_3><a href=stili.07.shtml#2>Otrā</a></p>
    	<p class=pogas_4><a href=stili.07.shtml#2.1>Otrā:Pirmā</a></p>
    	<p class=pogas_4><a href=stili.07.shtml#2.2>Otrā:Otrā</a></p>
    	<p class=pogas_4><a href=stili.07.shtml#2.3>Otrā:Trešā</a></p>
    	<p class=pogas_4><a href=stili.07.shtml#2.4>Otrā:Ceturtā</a></p>
    	<p class=pogas_4><a href=stili.07.shtml#2.5>Otrā:Piektā</a></p>
    	<p class=pogas_4><a href=stili.07.shtml#2.6>Otrā:Sestā</a></p>
    	<p class=pogas_4><a href=stili.07.shtml#2.7>Otrā:Septītā</a></p>
    <p class=pogas_3><a href=stili.07.shtml#3>Trešā</a></p>
    

    Pirmā

    Otrā

    Otrā:Pirmā

    Otrā:Otrā

    Otrā:Trešā

    Otrā:Ceturtā

    Otrā:Piektā

    Otrā:Sestā

    Otrā:Septītā

    Trešā

    Lai veidotu statenisku izvēlni ar izlecošām apakšizvēlnēm, jālieto daudzpakāpju saraksti:

    Pievērsiet uzmanību tam, ka saraksta rindiņai, kurai pakārtota izlecošā izvēlne (jauns apakšsaraksts), kur atrodas noslēdzošā komandas </li>.

    <div class="menu">
    <ul>
    <li><a href=stili.07.shtml#1>Pirmā</a></li>
    <li><a href=stili.07.shtml#2>Otrā »</a>
    <ul>
    	<li><a href=stili.07.shtml#2.1>Otrā:Pirmā</a></li>
    	<li><a href=stili.07.shtml#2.2>Otrā:Otrā</a></li>
    	<li><a href=stili.07.shtml#2.3>Otrā:Trešā »</a>
    	<ul>
    		<li><a href=stili.07.shtml#2.3.1>Otrā:Trešā:Pirmā</a></li>
    		<li><a href=stili.07.shtml#2.3.2>Otrā:Trešā:Otrā</a></li>
    		<li><a href=stili.07.shtml#2.3.3>Otrā:Trešā:Trešā</a></li>
    	</ul>
    	</li>
    	<li><a href=stili.07.shtml#2.4>Otrā:Ceturtā</a></li>
    	<li><a href=stili.07.shtml#2.5>Otrā:Piektā</a></li>
    	<li><a href=stili.07.shtml#2.6>Otrā:Sestā</a></li>
    	<li><a href=stili.07.shtml#2.7>Otrā:Septītā</a></li>
    </ul>
    </li>
    <li><a href=stili.07.shtml#3>Trešā</a></li>
    </ul>
    </div>
    

    Stateniskām izvēlnēm papildus jādefinē klašu parametri, lai neparādītos nevajadzīgi tukšumi starp rindiņām.

    Jāņem vērā ka „izlecošās” izvēlnes šādā izpildījumā «Microsoft Internet Explorer» pārlūkos nedarbojas līdz pat 10. versijai ieskaitot. Tikai sākot no 11. versijas «IE» sāk ievērot CSS standartus. Savukārt 11. versija ir pieejama tikai sākot no «Microsoft Windows 7».

    Izvēlne, kura atveras tikai uzklikšķinot

    Tākā ieprēšojos piemēros redzamajām izvēlnēm tika izmantots notikums „hover”, tad apakšivelnes parādījās tiko kā pele novietojās virs atbilstošās izvēlnes. Izņēmums ir dažādas mobilās ierīces, planšetdatori un citas skārienjūtīgo ekrānu ierīces, kuros „hover” pēc noklusējuma tiek aizstāts ar klikšķi. Līdzīgi strādājošu izvēlņu izveide parastos datoros nav tik vienkārša, kā „izlecošās” izvēlņu izveide.

    Viena iespēja ir izmantot izvēles rūtiņa ne gluži tā, kā tas sakotnēji HTML valodā bija paredzēts (dažādus paraugus var meklēt pēc „checkbox hack”). Te aplūkojms vienkāršs piemērs.


    Saturs Iepriekšējā lappuse Lappas saturs


    priede.bf.lu.lv Bioloģijas fakultāte Datorklase Sākumlapa
    Pamatlapa BF Datorklase Sākums
    Lappusi
    «stili.07.shtml»
    veidoja
    karlo@lanet.lv
    2015.12.29-00:55
    Lapa ir publicēta ar    CC    BY–SA    3.0 licenci. Ja lapā ir ietvertas daļas uz kurām attiecas cita licence, tas norādīts atsevišķi lapas tekstā.