Autor |
Nachricht |
raz0rback
Threadersteller
Dabei seit: 18.03.2011
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 30.08.2011 11:09
Titel Drop-Down bzw Select Box stylen - per Javascript |
|
|
Hiho,
ich muss 1:1 ein Drop-Down übernehmen von dieser Seite: Epson UK
Wenn man hier auf "I am new to this website" geht, erscheint ein Drop-Down namens "Title"
Wie ist das gelöst, wie kann ich das kopieren?
Habe den gesamten Quellcode kopiert, alle Pfade absolut angepasst und die Drop-Down Box sieht so aus, lässt sich aber nicht klicken
Ich find leider nicht raus, wie das gelöst ist, welches Script auf der Seite dafür zuständig ist und warum alles passt, aber ausgerechnet das Auswählen klappt nicht.
Wäre echt klasse, denn ich bekomm den Code nicht von denen oder kann da nachfragen -.-
|
|
|
|
|
Alex
Dabei seit: 28.11.2005
Ort: Dortmund
Alter: 37
Geschlecht:
|
Verfasst Di 30.08.2011 11:25
Titel
|
|
|
Wenn du dir den Quelltext mal anschaust, dann siehst du, dass das kein Dropdown ist, sondern 2 Divs mit den entsprechenden Formularen darin.
Bei auswahl von "I am already a registered customer" wird der erste container angezeigt, bei auswahl von "I am new to this website" der zweite.
Jeweils der andere wird ausgeblendet.
Auf der Seite wird jQuery verwendet, allerdings hab ich grade keine Lust mich durch die Dateien von denen zu wühlen, daher nur eine kurze Anleitung für dich:
Du erstellst die beiden Zeilen mit den Radiobuttons.
Darunter die beiden Div-Container mit den Formularen darin.
Dann kommt das jQuery zum einsatz und fragt ab, welcher der beiden Radiobuttons ausgewählt ist. Und je nach auswahl blendest du den entsprechenden Container ein und den anderen aus.
Fertig
|
|
|
|
|
Anzeige
|
|
|
raz0rback
Threadersteller
Dabei seit: 18.03.2011
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 30.08.2011 11:34
Titel
|
|
|
Danke für die fixe Antwort, ABER
Mir geht es um die Auswahlliste vom "Title"
Sorry, dass das so missverständlich ist
Das Drop-Down mit "Mr", "Ms", "Dr."
Wie das gelöst wurde versteh ich echt nicht.
|
|
|
|
|
pantonine
Dabei seit: 03.03.2011
Ort: gehen Sie bitte weiter…
Alter: -
Geschlecht: -
|
Verfasst Di 30.08.2011 11:42
Titel
|
|
|
Das ist kein echtes Select. Wie es gebaut wurde, kannst Du bspw. mit Firebug lernen.
|
|
|
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
|
|
|
|
Alex
Dabei seit: 28.11.2005
Ort: Dortmund
Alter: 37
Geschlecht:
|
Verfasst Di 30.08.2011 12:07
Titel
|
|
|
Oh, sorry. Nicht genau gelesen.
Das ist kein Formular-Select, sondern einfach nur eine Liste.
Am besten installierst du dir wirklich einfach Firebug und schaust dir das ganze mal dort an.
|
|
|
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 30.08.2011 12:12
Titel
|
|
|
Alex hat geschrieben: | Das ist kein Formular-Select, sondern einfach nur eine Liste. |
Falsch, es handelt sich um ein Formular Element welches durch ein Javascript manipuliert wird.
Ursprünglicher Quelltext:
Code: | <select class="jsDropdown autoGenderSelector" name="prefix_Reg" id="f_title_new"><option value=""></option><option value="mr">Mr</option><option value="mrs">Mrs</option><option value="ms">Ms</option><option value="dr">Dr</option></select> |
Dieser wird durch andere, besser zu formatierende, HTML Elemente (meist Listen) ersetzt. Wobei die Funktionalität des Formulars allerdings bestehen bleibt.
Zuletzt bearbeitet von m am Di 30.08.2011 12:20, insgesamt 1-mal bearbeitet
|
|
|
|
|
Alex
Dabei seit: 28.11.2005
Ort: Dortmund
Alter: 37
Geschlecht:
|
Verfasst Di 30.08.2011 12:19
Titel
|
|
|
m hat geschrieben: | Alex hat geschrieben: | Das ist kein Formular-Select, sondern einfach nur eine Liste. |
Falsch, es handelt sich um ein Formular Element welches durch ein Javascript manipuliert wird.
Ursprünglicher Quelltext:
Code: | <select class="jsDropdown autoGenderSelector" name="prefix_Reg" id="f_title_new"><option value=""></option><option value="mr">Mr</option><option value="mrs">Mrs</option><option value="ms">Ms</option><option value="dr">Dr</option></select> |
Dieser wird durch andere, besser zu formatierende, HTML Element (meist Listen) ersetzt. Wobei die Funktionalität des Formulars allerdings bestehen bleibt. |
Du hast recht, habe mich unglücklich ausgedrückt. Im Endeffekt ist es natürlich ein Formular-Element. Im Moment der Auswahl befindet man sich in einer Liste aufgrund der JS Manipulation
|
|
|
|
|
|
|
|
Ähnliche Themen |
javascript stylen - wie, wo?
[solved] Wie skinne ich ein <form> <select> drop down?
[javascript] mit <select> feld wert an javascript funk
<select>-Tag per Javascript funktioniert nur in FF
CSS Drop-Down Menü mit Javascript
Drag&Drop mit JavaScript.
|
|