Autor | Zpráva | ||
---|---|---|---|
Ine Profil * |
#1 · Zasláno: 15. 3. 2011, 18:51:56
Zdravím. Stáhl jsem si js+css script na "přestylování" <selectu>. Mám s ním ale problém. Je defaultně nastylovaný na šírku "width:190px". Ja bych to potřeboval upravit, tak abych mohl mít třeba 3 rozměry selektu.
Do javascriptu jsem udělal minimální zásah. Spíš jsem se hrabal v CSS. Bohužel to úplně 100% nemůžu rozchodit. Konkrétně pozadí v selectu. Už se v tom hrabu několik dnů a pořád nic. Prosím tedy o radu jakým způsobem to upravit tak abych tam mohl mít třeba tři selekty o různých rozměrech. Tady jsou scripty. DÍKY ZA KAŽDOU RADU! HTML <script type="text/javascript" src="elementy1.js"></script> <link rel="stylesheet" href="styl.css" media="screen" /> <p><select name="7" class="styled1"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="4">Option 4</option> <option value="5">Option 5</option> </select> </p> <p><select name="8" class="styled2"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="4">Option 4</option> <option value="5">Option 5</option> </select> </p> CSS: .checkbox, .radio { width: 19px; height: 25px; padding: 0 5px 0 0; background: url(image/checkbox.png) no-repeat; display: block; clear: left; float: left; } .radio { background: url(image/radio.png) no-repeat; } .select { position: absolute; width: 158px; height: 21px; padding: 0 24px 0 8px; color: #fff; font: 12px/21px arial,sans-serif; background: url(image/select1.png) no-repeat; overflow: hidden; } input.styled { display: none; } select.styled1 { position: relative; opacity: 0; filter: alpha(opacity=0); z-index: 5; width: 190px; } select.styled2 { position: relative; opacity: 0; filter: alpha(opacity=0); z-index: 5; width: 100px; } .disabled { opacity: 0.5; filter: alpha(opacity=50); } Javascript: var checkboxHeight = "25"; var radioHeight = "25"; var Custom = { init: function() { var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active; for(a = 0; a < inputs.length; a++) { if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className == "styled") { span[a] = document.createElement("span"); span[a].className = inputs[a].type; if(inputs[a].checked == true) { if(inputs[a].type == "checkbox") { position = "0 -" + (checkboxHeight*2) + "px"; span[a].style.backgroundPosition = position; } else { position = "0 -" + (radioHeight*2) + "px"; span[a].style.backgroundPosition = position; } } inputs[a].parentNode.insertBefore(span[a], inputs[a]); inputs[a].onchange = Custom.clear; if(!inputs[a].getAttribute("disabled")) { span[a].onmousedown = Custom.pushed; span[a].onmouseup = Custom.check; } else { span[a].className = span[a].className += " disabled"; } } } inputs = document.getElementsByTagName("select"); for(a = 0; a < inputs.length; a++) { if(inputs[a].className == "styled1" || "styled2") { option = inputs[a].getElementsByTagName("option"); active = option[0].childNodes[0].nodeValue; textnode = document.createTextNode(active); for(b = 0; b < option.length; b++) { if(option[b].selected == true) { textnode = document.createTextNode(option[b].childNodes[0].nodeValue); } } span[a] = document.createElement("span"); span[a].className = "select"; span[a].id = "select" + inputs[a].name; span[a].appendChild(textnode); inputs[a].parentNode.insertBefore(span[a], inputs[a]); if(!inputs[a].getAttribute("disabled")) { inputs[a].onchange = Custom.choose; } else { inputs[a].previousSibling.className = inputs[a].previousSibling.className += " disabled"; } } } document.onmouseup = Custom.clear; }, pushed: function() { element = this.nextSibling; if(element.checked == true && element.type == "checkbox") { this.style.backgroundPosition = "0 -" + checkboxHeight*3 + "px"; } else if(element.checked == true && element.type == "radio") { this.style.backgroundPosition = "0 -" + radioHeight*3 + "px"; } else if(element.checked != true && element.type == "checkbox") { this.style.backgroundPosition = "0 -" + checkboxHeight + "px"; } else { this.style.backgroundPosition = "0 -" + radioHeight + "px"; } }, check: function() { element = this.nextSibling; if(element.checked == true && element.type == "checkbox") { this.style.backgroundPosition = "0 0"; element.checked = false; } else { if(element.type == "checkbox") { this.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px"; } else { this.style.backgroundPosition = "0 -" + radioHeight*2 + "px"; group = this.nextSibling.name; inputs = document.getElementsByTagName("input"); for(a = 0; a < inputs.length; a++) { if(inputs[a].name == group && inputs[a] != this.nextSibling) { inputs[a].previousSibling.style.backgroundPosition = "0 0"; } } } element.checked = true; } }, clear: function() { inputs = document.getElementsByTagName("input"); for(var b = 0; b < inputs.length; b++) { if(inputs[b].type == "checkbox" && inputs[b].checked == true && inputs[b].className == "styled") { inputs[b].previousSibling.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px"; } else if(inputs[b].type == "checkbox" && inputs[b].className == "styled") { inputs[b].previousSibling.style.backgroundPosition = "0 0"; } else if(inputs[b].type == "radio" && inputs[b].checked == true && inputs[b].className == "styled") { inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px"; } else if(inputs[b].type == "radio" && inputs[b].className == "styled") { inputs[b].previousSibling.style.backgroundPosition = "0 0"; } } }, choose: function() { option = this.getElementsByTagName("option"); for(d = 0; d < option.length; d++) { if(option[d].selected == true) { document.getElementById("select" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue; } } } } window.onload = Custom.init; |
||
panther Profil |
#2 · Zasláno: 15. 3. 2011, 19:36:07
Ine:
pokud dodáš odkaz na web místo téměř 200 řádků kódu, jistě se tu najde někdo, kdo se problémem bude chtít zabývat. Já se tímto kódem probírat nebudu ani omylem. |
||
Ine Profil * |
|||
Ine Profil * |
#4 · Zasláno: 17. 3. 2011, 20:00:10
Nikdo neví? jsem zoufalý:(( zkusil jsem snad všechno:(
|
||
jenikkozak Profil |
#5 · Zasláno: 17. 3. 2011, 20:47:39
Ine:
„Ja bych to potřeboval upravit, tak abych mohl mít třeba 3 rozměry selektu“ Na to by bylo především nutno přemalovat obrázek image/select1.png, respektive udělat tři různé šířky tohoto obrázku. |
||
Ine Profil * |
#6 · Zasláno: 18. 3. 2011, 15:48:14
Přesně to jsem udělal... ale jak je do toho zakomponuju? Buď tam můžu mít jeden nebo druhý...:( Prosím o radu
|
||
joe Profil |
#7 · Zasláno: 18. 3. 2011, 17:04:49
A rozumíš tomu JavaScriptu co dělá?
Tvůj problém je docela triviální, ale to co jsi našel pro náhradu formulářových prvků se mi vůbec nelíbí :-) Tobě třeba ano, takže co a jak udělat. Řádek 43: span[a].className = "select"; span[a].className = "select " + inputs[a].className; // za zvyraznenem "select" je mezera a v CSS už pak rozeznáš o jaký jde "select", takže budeš pak psát: span.select.styled1 { background: url( ... ); width: ; } /* tady treba ten vetsi obrazek - vetsi sirka */ span.select.styled2 { background: url( ... ); width: ; } /* a tady ten mensi */ |
||
Ine Profil * |
#8 · Zasláno: 19. 3. 2011, 11:43:26
Díky. Jsi zlatej. Tak dlouho jsem to řešil....
- Programuju především v php+mysql. Javascript téměř vůbec neovládám.... proto i triviální věci jsou překážkou...:) Snažím se to, ale postupně naučit. - Proč se ti nelíbí? Jak jsem psal moc js nerozumím proto nedokážu zhodnotit co je dobré a co špatné. "Přestylování" těchto tří prvků v js+css jsem našel několik desítek/stovek. Z toho co jsem zkusil, tak tohle je jediné, které mi funguje IE, Firefox, safari, opera, chrome.... Pak už jen Jquery... to mi ale přišlo extrémě dlouhé a složité. Moje požadavky byly - jednoduchost a funkčnost v těch 5 prohlížečích co jsem psal. Nemáš tedy nějaký jiný tip, který je lepší/použitelnější? Ještě jednou díky a radu.. |
||
panther Profil |
#9 · Zasláno: 19. 3. 2011, 11:49:24
Ine:
„Moje požadavky byly - jednoduchost a funkčnost v těch 5 prohlížečích co jsem psal.“ skutečně to funguje všude? Ty „selecty“ jsou ve všech IEčkách rozbité - v IE7/8 se jich zobrazí jen část, v IE6 se zobrazí klasický select se snahou ostylovat jeho blízké okolí... Však se můžeš podívat, jak to vypadá :-) |
||
Ine Profil * |
#10 · Zasláno: 19. 3. 2011, 11:53:51
Zkoušel jsem IE 8 a IE 6 - zobrazilo se mi to normalně - bez rozpadu... hodíš sem screen prosím?
|
||
panther Profil |
#11 · Zasláno: 19. 3. 2011, 11:58:25
|
||
Ine Profil * |
#12 · Zasláno: 19. 3. 2011, 12:07:34
Aha, já to zkoušel na win 7... můžu začít od začátku....:( Doporučíš mi něco ověřeného? Co opravdu funguje? Díky..
|
||
joe Profil |
#13 · Zasláno: 19. 3. 2011, 14:11:01 · Upravil/a: joe
Třeba moje knihovna, o které jsem psal už i tady na fóru to dokáže celkem spolehlivě (funguje od IE5.5+). Najdeš ji na javascript.webdream.cz pod PrettyForm. Ale šířku tam při nahrazení klasického selectu nedávám, počítá se skoro automaticky (ale neměl by být problém ji změnit na požadovanou). Pro některé prohlížeče to je třeba upravit (viz kód a komentáře).
Ale v této době tam je jen checkbox a selectbox, nic víc. Nemám teď čas na rozžíření a doladění. Ale můj select box funguje nejspolehlivěji, než jakýkoli co jsem našel. |
||
Ine Profil * |
#14 · Zasláno: 19. 3. 2011, 17:02:04
Díval jsem se na to a vypadá to hodně dobře:) Určitě ji použiji na svém webu. Škoda jen, že nemáš čas na to rozšíření. Hodilo by se mi ještě radio a file :)
|
||
joe Profil |
#15 · Zasláno: 19. 3. 2011, 19:15:26
Ine:
Tak pro radio můžeš použít to co máš nahoře :) a pro file, ten jsem nikdy nezkoušel přestylovat, uvidíme, třeba až se k tomu dostanu to nějak půjde udělat.. |
||
Časová prodleva: 13 let
|
0