 [CSS][JavaScript]Niestandardowy Select - option w JS tj. zmianaStrzałki |
| [CSS][JavaScript]Niestandardowy Select - option w JS tj. zmianaStrzałki |
Post
#1
|
|
|
Grupa: Zarejestrowani Postów: 63 Pomógł: 1 Dołączył: 16.08.2007 Ostrzeżenie: (0%) 
 |
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 (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg) Bede dziekowac za pomoc,
ps. nie piszcie o tym ze nie powinno zmieniac wygladu tych pol, ja to wiem (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg) 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"> <!-- body,td,th { font-family: verdana; font-size: small; color: #009999; } body { background-color: #FFFFFF; margin-left: 2em; margin-top: 2em; } --> 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> |
 |
 
|
 |
|
Post
#2
|
|
|
Grupa: Zarejestrowani Postów: 1 890 Pomógł: 339 Dołączył: 14.12.2006 Skąd: Warszawa Ostrzeżenie: (0%)
|
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 (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg) 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. |
|
|
|
|
Post
#3
|
|
|
Grupa: Zarejestrowani Postów: 1 890 Pomógł: 339 Dołączył: 14.12.2006 Skąd: Warszawa Ostrzeżenie: (0%)
|
Cytat(gecior @ 8.12.2008, 22:10:42 )  no i dzieki sowiq, gitara (IMG:http://forum.php.pl/style_emoticons/default/guitar.gif) , wrzucam rozwiązanie moze sie komus jeszcze przyda kiedyś (IMG:http://forum.php.pl/style_emoticons/default/party.gif) : 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ę? Ten post edytował sowiq 8.12.2008, 23:11:08 |
|
|
|
|
Post
#4
|
|
|
Grupa: Zarejestrowani Postów: 63 Pomógł: 1 Dołączył: 16.08.2007 Ostrzeżenie: (0%)
|
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 (IMG:http://forum.php.pl/style_emoticons/default/biggrin.gif) ps. nie napisales ze to twoj kod Ten post edytował gecior 9.12.2008, 20:09:39 |
|
|
|
|
Post
#5
|
|
|
Grupa: Zarejestrowani Postów: 1 890 Pomógł: 339 Dołączył: 14.12.2006 Skąd: Warszawa Ostrzeżenie: (0%)
|
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. |
|
|
|
Post
#6
|
|
|
Grupa: Zarejestrowani Postów: 63 Pomógł: 1 Dołączył: 16.08.2007 Ostrzeżenie: (0%)
|
Cytat(sowiq @ 9.12.2008, 22:00:33 ) 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. Spoko, jeszcze raz dzieki za naprowadzenie, Takim jak ty tylko dziękować za bezinteresowną pomoc takim świeżakom jak ja (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg) pozdr. |
|
|
|
 |
|
Aktualny czas: 26.09.2025 - 00:41 |
