Stylische Javascript Selectbox

Teron Gerofied

Hallo Leute,

ich kann diese Standart forumlar Selectboxen nicht mehr sehen, und habe bei Facebook etwas gefunden was mein Herz höher schlagen lies:

Nämlich das:
(siehe Anhang)

Nun bin in was JavaScript und stylische DHTML Spielerein angeht nicht so ein Ass und wollte deshalb fragen ob jemand eine Seite kennt wo es sowas als Modul frei zum runterladen gibt. Den Source von Facebook wegen der Kleinigkeit anzuschauen fände ich jetzt nämlich nicht so super.

Lg
Mathias

Tobse

Zitat von Teron Gerofied

Den Source von Facebook wegen der Kleinigkeit anzuschauen fände ich jetzt nämlich nicht so super.

Eine Kleinigkeit ist das nicht wirklich. Dass das als Modul frei zu haben ist, bezweifle ich eher. Das ist höchstwarscheinlich eine Facebook-Eigene Entwicklung.
Da bleiben dir nur 3, eigentlich 2, Möglichkeiten:
-Es selbst schreiben
-Es machen lassen, gegen Geld

-warten, bis es einer aus dem gleichen Grund, aus dem du es auch willst, selbst schreibt und frei zur verfügung stellt.

Teron Gerofied

Naja ich denk mir was ich alles schon in richtung Ajax für Module gefunden hab ist ja schon heftig und das alles gratis, da dachte ich mir dass das ja eine kleinigkeit seien würde aber gut, das wird sich schon machen lassen...

ich hab schon das jQuery laufen vllt kann ich mir das ja zu nutze machen ...

einfacher erster lösungsansatz:

der button um das popup-menü aufzurufen ist ein link der mit css ein bisschen gestylt wird

beim cklick darauf wird eine formatierte <ul>-Liste geöffnet (mit jQuery könnte man dann noch einen schönen effekt zum sliden einbauen.

klickt man auf einen eintrag in der popupbox wird dieser in ein hidden-inputfeld geschrieben und der text von dem link wird geändert. soweit kann ich das ja schon

die masterfrage wäre: wie schaff ich es, dass die obere rechte ecke der box genau an der unteren rechten ecke des Links sitzt ? und das dynamisch, je nachdem wo dieser button sitzt

hätte da einer ne idee ??

lg

Tobse

Also, du könntest das ja so machen:
Im HTML Quelltext Steht:

HTML

<select name="abc">
 <option value="a">A</option>
 <option value="b">B</option>
 <option value="c">C</option>
</select>

Jetzt lässt du ein selbst geschriebenes jQuery Plugin auf alle select´s los, dass das eigentliche <select> auf display: none; setzt und per parent().appendChild() ein div dranklatscht, der den link und die <ul>, die aus allen <option>´s des <select>´s generiert wurde, enthält. Dann muss da noch ein wenig Event-Handling rein und dann sollte es schon so einigermaßen funktionieren.

Das <ul> kannst du mit CSS und position: relative; positionieren.

synaptic

Code

function designSelects(){


    $('.designed').each(function(){
        var parent = $(this).parent()
        parent.append('<a class=\"selectLink\" href=\"javascript:void(0);\">Bitte wählen</a>');
        parent.append('<ul class=\"designedSelect\"></ul>');
        $(this).children('option').each(function(index){
            if($(this).text() != ""){
                parent.children('ul').append('<li><a href=\"javascript:void(0);\">'+$(this).text()+'</a></li>');
            }


        });
        $(this).hide();
        parent.children('.selectLink').click(function(){
            parent.children('ul').slideDown(200).addClass("activedropdown");

        });
    });

}


$(document).ready(function(){
    $(document).bind('click', function(e) {
        var $clicked = $(e.target);
        if (! $clicked.parents().hasClass("activedropdown"))
            $(".activedropdown").hide();
    });


designSelects();
    $('.designedSelect li').click(function(){
        var text = $(this).children('a').text();
        $(this).parent().parent().children('.selectLink').text(text);
        $('.designed').children('option').each(function(){
            if($(this).text() == text){
                $(this).val(text);
                $(this).parent().children("option[value=''+text+'']").attr('selected', 'selected');
            }
        });        
    });

Alles anzeigen

HTML

<div class="searchTeaser">
            <span>Skillsparte</span>
            <select class="searchSelect designed" id="skillSparte" name="skillSparte">
                <option></option>
                <option>IT</option>
                <option>Finanzen</option>
                <option>Gesundheit</option>
            </select>
        </div>

probier ma ob du damit klar kommst bin grad in der bahn unf gleich kommt nen funkloch

Teron Gerofied

Zitat von synaptic

...

probier ma ob du damit klar kommst bin grad in der bahn unf gleich kommt nen funkloch

Wow, also mal unabhängig davon ob das jetzt funktioniert oder nicht, aber wenn du dir jetzt die Mühe gemacht hast das alles zu schreiben fühl ich mich geehrt

werds gleich mal testen

synaptic

ööhm nee nich ganz, ich hab das mal vor einigen wochen für eins meiner projekte gemacht.. is aber nich online....

edit: so hier mal nen kompletter dummy...

muss nu nochma wech

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>


<head>
    <title></title>
    <script type="text/javascript" src="jquery-1.4.2.js"></script>
    <script type="text/javascript">
        function designSelects(){


    $('.designed').each(function(){
        var parent = $(this).parent()
        parent.append('<a class=\"selectLink\" href=\"javascript:void(0);\">Bitte wählen</a>');
        parent.append('<ul class=\"designedSelect\"></ul>');
        $(this).children('option').each(function(index){
            if($(this).text() != ""){
                parent.children('ul').append('<li><a href=\"javascript:void(0);\">'+$(this).text()+'</a></li>');
            }


        });
        $(this).hide();
        parent.children('.selectLink').click(function(){
            parent.children('ul').slideDown(200).addClass("activedropdown");

        });
    });

}


$(document).ready(function(){
    $(document).bind('click', function(e) {
        var $clicked = $(e.target);
        if (! $clicked.parents().hasClass("activedropdown"))
            $(".activedropdown").hide();
    });


designSelects();
    $('.designedSelect li').click(function(){
        var text = $(this).children('a').text();
        $(this).parent().parent().children('.selectLink').text(text);
        $('.designed').children('option').each(function(){
            if($(this).text() == text){
                $(this).val(text);
                $(this).parent().children("option[value=''+text+'']").attr('selected', 'selected');
            }
        });        
    });
 });    
    </script>
    <style type="text/css">
        *{
            border:0 none;
            margin:0;
            padding:0;
        }
        .designedSelect{
            display:none;
            list-style:none;
            margin:0;
            padding:3px;
            width:14%;
        }
        .designedSelect li:hover{
            background:#fefefe;
        }
        .activedropdown{
            display:block;
            position:absolute;
            background:#c1c1c1;
            border: 1px solid black;
            z-index:999;
        }
        .searchTeaser{
            width:300px; 
            border:1px solid red;
        }
    </style>
</head>


<body>
<div class="searchTeaser">
 <select class="searchSelect designed" id="select1" name="select11">
    <option>bitte wählen</option>
    <option>IT</option>
    <option>Finanzen</option>
    <option>Gesundheit</option>
</select>
</div>
<div class="searchTeaser">
 <select class="searchSelect designed" id="select2" name="select12">
    <option>bitte wählen</option>
    <option>IawdawT</option>
    <option>Findawdaanzen</option>
    <option>Gesudawdandheit</option>
</select>
</div>
<div class="searchTeaser">
 <select class="searchSelect designed" id="select3" name="select13">
    <option>bitte wählen</option>
    <option>IawdawdT</option>
    <option>Fiawdawdnanzen</option>
    <option>Geawdawdsundheit</option>
</select>
</div>


</body>
</html>

Alles anzeigen

Teron Gerofied

Du wirst lachen aber ich hab genauso eine Lösung kurz nachdem du sie gepostet hast tatsächlich im Internet gefunden (also das überlagern einer select box)

synaptic

joa sowas gibts ja auch öfters.. nennt sich false select.
aber is denn deine version auch funktionsfähig ohne javascript?
denn man muss ja nen fallback haben für die, die es deaktiviert haben.
wenn du bei dem obigen script js abschaltest bleiben weiterhin die normalen selects verfügbar.

viele false-selects arbeiten mit leeren selectfeldern und keinen options (bzw einer leeren)

Teron Gerofied

Im übrigen wärs noch interessant wie mans bei deinem Beispiel in jQuery schafft, dass "designedSelect" geschlossen wird, sobald man irgendwo anders hinklickt.

folgendes war ein ansatz, geht aber nicht so gut:

Code

$(document).click(function(){
	$('.designedSelect').hide();
});

synaptic

Code

$(document).bind('click', function(e) {
        var $clicked = $(e.target);
        if (! $clicked.parents().hasClass("activedropdown"))
            $(".activedropdown").hide();
    });

einfach dem document nen eigenes click-event geben..
das überprüft welche elemente die entsprechende klasse haben und versteckt se.
das obige script funktioniert und ist getestet.

Teron Gerofied

Ja soweit wars ja schon, das Problem dabei ist aber, dass man (in FF3 und Chrome getestet) doppelklicken muss, damits ausklappt...

synaptic

ich hab hier den ff3.6.13 und ich hab da nix mit doppelklick...
ebenso beim safari 5.0.1 und opera 10.61

chrome werd ich mir nich installieren, ums zu testen..

Teron Gerofied

So gehts:

HTML

$(document).bind('click', function(e) {
	var $clicked = $(e.target);
	if ( (!$clicked.parents().hasClass("activedropdown")) && (!$clicked.hasClass("selectLink")))
	{
		$(".activedropdown").hide();
	}
});

synaptic

und was soll dadurch passieren??

Teron Gerofied

Naja das Problem ist, dass bei deiner Abfrage nur die UL Liste berücksichtigt wird, nicht der Link selbst, bei dessen Klick darauf ja die Liste auch nicht zugeklappt werden soll - logischerweise ^^.

synaptic

hast du schon einmal beobachtet, was ein dropdown macht?

es geht auf, man klickt was an.. und dann??

es geht zu...!!! genau!!!
ih wiederhole nochmal: das script ist funktionsfähig und crossbrowser-getestet (ie,ff,opera, safari), d.h. es macht genau das, was es machen soll, ein selectfeld mit dazugehörigen options ersetzen, damit man es nach freien stücken designen kann!

Teron Gerofied

stimmt, aber wie gesagt bei mir gab es das problem, dass der code, der das dropdown schließt wenn man woanders hinklickt, auch gewirkt hat als man den link geklickt hat und jetzt funktionierts so wie gewünscht ... keine ahnung warums bei dir anders läuft als bei mir =/

synaptic

Zitat von Teron Gerofied

keine ahnung warums bei dir anders läuft als bei mir =/

bei mir funktioniert es so, wie ein dropdown eben funktionieren soll *kopfschüttel*
das ganze hin und her hier is für die füße weil du ne andere funktion haben wolltest/willst, als die, die einem ein dropdown bietet

Stylische Javascript Selectbox

Tags

Benutzer online in diesem Thema