Felhasználóbarát lapozó

máj

Felhasználóbarát lapozó

Hutchington írta, 2009. május 22-án 9:16 perckor, (X)HTML, CSS, Tutorial kategóriában.

Naponta találkozunk lapozókkal, ám ezek nem mindig helyeznek hangsúlyt a felhasználóbarátságra. Ebben a bejegyzésben bemutatok egy olyan megoldást, amivel a felhasználó, és mi is jól járunk.

Nos, akkor nézzük, a célunk az hogy a felhasználó felismerje hol jár, mutassuk neki, hogy még milyen lehetőségei vannak, legyen egyszerű a html szerkezete, és kevés css kód is elegendő legyen hozzá.

Lapozónál a legszebb, ha felsorolást (ul li) alkalmazunk, nézzük is a html kódot:

<ul id="pagination">
	<li class="previous-off">« Előző</li>
	<li class="active">1</li>
	<li><a href="page2">2</a></li>
	<li><a href="page3">3</a></li>
	<li><a href="page4">4</a></li>
	<li><a href="page5">5</a></li>
	<li><a href="page6">6</a></li>
	<li class="next"><a href="page2">Következő »</a></li>
</ul>

Nézzük mit kell majd css-ben formáznunk: A felsorolásunkban az ul kap egy “pagination” ID-t, ezzel tudjuk majd css-ből formázni a benne levő elemeket. Ha több lapozót is szeretnénk egy oldalon belül, akkor kerüljük az ID használatát, változtassuk osztályra (class=”padination”), amiből lehet több azonos is egy oldalon belül. Ezen belül, az “Előző” és “Következő” gomboknak lesznek aktív és inaktív állapotai, az oldalszámoknál az aktuális oldal kijelölt állapota, valamit a többi lehetséges oldalt tartalmazó li elemek formázása.

#pagination {
    display: block;
    width: 600px;
    list-style: none;
}
 
#pagination li{
    float: left;
    border:0;
    margin:0;
    padding:0;
    list-style:none;
}
 
#pagination .previous-off,
#pagination .next-off {
    color:#666666;
    display:block;
    float:left;
    font-weight:bold;
    padding: 3px 4px;
    border:solid 1px #CCC;
    margin-right: 2px;
    background: #CCC;
}
 
#pagination .next a,
#pagination .previous a {
    font-weight:bold;
    border:solid 1px #CCC;
    margin-right: 2px;
}
 
#pagination .active{
    display:block;
    float:left;
    padding: 3px 6px;
    color: #000;
    font-weight:bold;
    border:solid 1px #666;
    margin-right: 2px;
}
 
#pagination a {
    color: #666;
    display:block;
    float:left;
    padding:3px 6px;
    margin-right: 2px;
    text-decoration:none;
    border:solid 1px #CCC;
}
 
#pagination a:hover {border:solid 1px #999;}