Forum PHP.pl > [CSS][JavaScript]Niestandardowy Select

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS][JavaScript]Niestandardowy Select - option w JS tj. zmianaStrzałki

gecior

8.12.2008, 01:09:23

Cześć, mam kod ktory powoduje rozwiniecie listy linkow, stylami sie nie interesujcie, chodzi mi o java script w ktorym jestem jak narazie bardzo cienki, przy cieciu stronki, spotkalem sie z tym ze nalezy zmienic wyglad pól select, znalazlem w necie ten kod, niby jest ok, ale to sa odsylacze, a mi chodzi o to aby zrobic z tego pola zwykłe standardowe pole <select><option></option></select> z zachowaniem tych stylow, prosilbym o przerobienie tego na taki wlasnie sposob, lub jakies wskazowki, bo mysle ze jest to proste do zrobienia

Bede dziekowac za pomoc,

ps. nie piszcie o tym ze nie powinno zmieniac wygladu tych pol, ja to wiem

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>select BOX</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">


br{
line-height:0;}

#innermenu a{
text-decoration:none;
}

#innermenu a:hover{
background-color:#00FFFF;

}

div{
padding:0;
margin:0;
}

#search{
width:150px;
height:auto;
border:1px solid white;
}

a.drop{
display:block;
font-size:0.9em;
font-weight:normal;
color:#666;
text-decoration:none;
width:146px;
height:12px;
padding:1px;
background-image:url("arrow_over.gif");
background-repeat:no-repeat;
background-position:right;
text-align:left;
cursor:hand;
border:1px solid #006699;
}

a.drop:hover{
font-size:0.9em;
font-weight:normal;
color:#666;
text-decoration:none;
display:block;
width:146px;
height:12px;
padding:1px;
background-image:url("arrow_over.gif");
background-repeat:no-repeat;
background-position:right;
text-align:left;
cursor:hand;
border:1px solid #006699;
}

#dropdown{
font-size:0.9em;
z-index:10;
width:148px;
height:auto;
background-color:#FFFFFF;
border:1px solid #006699;
border-top:0;
visibility:hidden;

}
#dropdown ul{
padding:0;
margin:0;
list-style-type:none;}

#dropdown li{
padding:0;
margin:0;}

#dropdown a{
display:block;
background-color:#fff;
padding:2px 4px;
margin:0;
text-decoration:none;
color:#666;
}

#dropdown a:hover{
display:block;
background-color:#0099FF;
padding:2px 4px;
margin:0;
text-decoration:none;
color:#fff;
}

</style>

<script type="text/javascript">
function showhide(whichLayer)
{
if (document.getElementById)
{
// this is the way the standards work
var style2 = document.getElementById(whichLayer).style;
style2.visibility = style2.visibility? "":"visible";
}
}

</script>

</head>

<body>

<div id="search">
<a href="java script:showhide('dropdown');" on class="drop">Show all links</a>

<div id="dropdown" onmouseout="showhide('dropdown');">
<a href="#"> Link 1</a><br />
<a href="#">Link 2</a><br />
<a href="#">Link 3</a><br />
<a href="#">Link 4</a><br />
<a href="#">Link 5</a><br />
<a href="#">Link 6</a><br />
<a href="#">Link 7</a><br />
<a href="#">Link 8</a><br />
</div>
</div>

</body>
</html>

sowiq

8.12.2008, 01:45:09

Ostylować pola <select /> się za bardzo nie da, a już na pewno nie da się zmienić wyglądu strzałki. Pozostaje Ci więc JavaScript + CSS.
Spójrz na pola <select /> na stronie Google Translate: http://translate.google.pl/translate_t - nie zagłębiałem się jak to zrobili, ale jakoś zrobili

http://esound.pl/ - szukajka na górze też jest w ten sposób zrobiona.

To, co wytworzyłeś do tej pory to dobry początek. Jeśli odpowiednio to ostylujesz, to będzie ok.

sowiq

8.12.2008, 23:07:04

Cytat(gecior @ 8.12.2008, 22:10:42 )

no i dzieki sowiq, gitara

, wrzucam rozwiązanie moze sie komus jeszcze przyda kiedyś

No spoko, że wrzuciłeś mój kod JS, CSS i HTML nawet go nie zmieniając - połowa z niego to śmieci. Pytanie tylko - po cholerę?

gecior

9.12.2008, 20:08:21

Cytat(sowiq @ 8.12.2008, 23:07:04 )

No spoko, że wrzuciłeś mój kod JS, CSS i HTML nawet go nie zmieniając - połowa z niego to śmieci. Pytanie tylko - po cholerę?

Spoko juz wyrzucilem skoro ci sie nie spodobalo, myslalem ze tez inni beda mogli z tego skorzystac, sory

ps. nie napisales ze to twoj kod

sowiq

9.12.2008, 22:00:33

Cytat(gecior @ 9.12.2008, 20:08:21 )

Spoko juz wyrzucilem skoro ci sie nie spodobalo

Chodziło mi raczej o to, że wrzuciłeś zaśmiecony kod, który pisałem kilka lat temu i teraz nie mam się czym chwalić. Teraz zrobiłbym to zupełnie inaczej, bardziej elegancko. A kod tak na prawdę wyciągnąć i skopiować może każdy.

Jako lepsze przykłady można podać chociażby (teraz to znalazłem):
http://support.milonic.com/demos/select_box/index.htm
http://www.brainfault.com/demo/selectbox/ (wykorzystano jQuery - bardzo eleganckie rozwiązanie IMO) + opis

Pozdrawiam.

gecior

10.12.2008, 21:02:17

Cytat(sowiq @ 9.12.2008, 22:00:33 )

Spoko, jeszcze raz dzieki za naprowadzenie,
Takim jak ty tylko dziękować za bezinteresowną pomoc takim świeżakom jak ja

pozdr.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.