Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 19

Thema: Stylische Javascript Selectbox

  1. #1
    Meister(in) Avatar von Teron Gerofied
    Registriert seit
    26.01.2008
    Ort
    serverraum
    Alter
    26
    Beiträge
    347
    Danke
    0
    Bekam 1 mal "Danke" in 1 Posting

    Cool Stylische Javascript Selectbox

    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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Angehängte Grafiken Angehängte Grafiken
    PHP-Code:
    if(isset($this) || !isset($this)){ // that's the question... 

  2. #2
    Kaiser(in)
    Registriert seit
    29.03.2009
    Ort
    1011 1111 1011 WorldWideWeb
    Beiträge
    2.439
    Danke
    2
    Bekam 6 mal "Danke" in 6 Postings

    Standard AW: Stylische Javascript Selectbox

    Zitat Zitat von Teron Gerofied Beitrag anzeigen
    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.
    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.
    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

  3. #3
    Meister(in)
    Themenstarter
    Avatar von Teron Gerofied
    Registriert seit
    26.01.2008
    Ort
    serverraum
    Alter
    26
    Beiträge
    347
    Danke
    0
    Bekam 1 mal "Danke" in 1 Posting

    Standard AW: Stylische Javascript Selectbox

    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
    PHP-Code:
    if(isset($this) || !isset($this)){ // that's the question... 

  4. #4
    Kaiser(in)
    Registriert seit
    29.03.2009
    Ort
    1011 1111 1011 WorldWideWeb
    Beiträge
    2.439
    Danke
    2
    Bekam 6 mal "Danke" in 6 Postings

    Standard AW: Stylische Javascript Selectbox

    Also, du könntest das ja so machen:
    Im HTML Quelltext Steht:
    HTML-Code:
    <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.
    Geändert von Tobse (14.12.2010 um 20:12 Uhr)
    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.
    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

  5. #5
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Stylische Javascript Selectbox

    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');
                }
            });        
        });
    HTML-Code:
    <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
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  6. #6
    Meister(in)
    Themenstarter
    Avatar von Teron Gerofied
    Registriert seit
    26.01.2008
    Ort
    serverraum
    Alter
    26
    Beiträge
    347
    Danke
    0
    Bekam 1 mal "Danke" in 1 Posting

    Standard AW: Stylische Javascript Selectbox

    Zitat Zitat von synaptic Beitrag anzeigen
    ...

    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
    PHP-Code:
    if(isset($this) || !isset($this)){ // that's the question... 

  7. #7
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Stylische Javascript Selectbox

    öö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-Code:
    <!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> 
    Geändert von synaptic (14.12.2010 um 20:07 Uhr)
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  8. #8
    Meister(in)
    Themenstarter
    Avatar von Teron Gerofied
    Registriert seit
    26.01.2008
    Ort
    serverraum
    Alter
    26
    Beiträge
    347
    Danke
    0
    Bekam 1 mal "Danke" in 1 Posting

    Standard AW: Stylische Javascript Selectbox

    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)
    PHP-Code:
    if(isset($this) || !isset($this)){ // that's the question... 

  9. #9
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Stylische Javascript Selectbox

    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)
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  10. #10
    Meister(in)
    Themenstarter
    Avatar von Teron Gerofied
    Registriert seit
    26.01.2008
    Ort
    serverraum
    Alter
    26
    Beiträge
    347
    Danke
    0
    Bekam 1 mal "Danke" in 1 Posting

    Standard AW: Stylische Javascript Selectbox

    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();
    });
    PHP-Code:
    if(isset($this) || !isset($this)){ // that's the question... 

Ähnliche Themen

  1. multiple selectbox + checkbox mit fehlersuche
    Von apip im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 10
    Letzter Beitrag: 29.03.2010, 20:01
  2. Selectbox selecten
    Von 1234d1 im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 9
    Letzter Beitrag: 22.06.2009, 16:28
  3. Selectbox Value Abfragen
    Von Mike987 im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 2
    Letzter Beitrag: 05.05.2009, 12:23
  4. Dynamische Selectbox auslesen und mit PHP Skript auswerten
    Von sasch1 im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 11
    Letzter Beitrag: 08.08.2008, 21:35
  5. Werte aus Form in Selectbox auswählen
    Von Conny im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 2
    Letzter Beitrag: 22.12.2005, 12:49

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •