mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 08:10 Benutzername: Passwort: Auto-Login

Thema: Drop-Down bzw Select Box stylen - per Javascript vom 30.08.2011


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> Drop-Down bzw Select Box stylen - per Javascript
Seite: 1, 2, 3  Weiter
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

Antworten mit Zitat Zum Seitenanfang

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 -.-
  View user's profile Private Nachricht senden
Alex

Dabei seit: 28.11.2005
Ort: Dortmund
Alter: 37
Geschlecht: Männlich
Verfasst Di 30.08.2011 11:25
Titel

Antworten mit Zitat Zum Seitenanfang

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 Lächel
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
raz0rback
Threadersteller

Dabei seit: 18.03.2011
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 30.08.2011 11:34
Titel

Antworten mit Zitat Zum Seitenanfang

Danke für die fixe Antwort, ABER

Mir geht es um die Auswahlliste vom "Title" Grins
Sorry, dass das so missverständlich ist

Das Drop-Down mit "Mr", "Ms", "Dr."
Wie das gelöst wurde versteh ich echt nicht.
  View user's profile Private Nachricht senden
pantonine

Dabei seit: 03.03.2011
Ort: gehen Sie bitte weiter…
Alter: -
Geschlecht: -
Verfasst Di 30.08.2011 11:42
Titel

Antworten mit Zitat Zum Seitenanfang

Das ist kein echtes Select. Wie es gebaut wurde, kannst Du bspw. mit Firebug lernen.
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Di 30.08.2011 11:56
Titel

Antworten mit Zitat Zum Seitenanfang

http://plugins.jquery.com/project/jQuerySelectBox
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Alex

Dabei seit: 28.11.2005
Ort: Dortmund
Alter: 37
Geschlecht: Männlich
Verfasst Di 30.08.2011 12:07
Titel

Antworten mit Zitat Zum Seitenanfang

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. Lächel
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Di 30.08.2011 12:12
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Alex

Dabei seit: 28.11.2005
Ort: Dortmund
Alter: 37
Geschlecht: Männlich
Verfasst Di 30.08.2011 12:19
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ä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.
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2, 3  Weiter
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.