Ergebnis 1 bis 14 von 14
  1. #1
    Avatar von womstar
    womstar ist offline Lounge-Member
    registriert
    22-07-2002
    Ort
    latente matrix
    Beiträge
    5.913

    Eigene Selectbox v1.0

    Hallöle.

    Für alle die mal eine andere Selectbox haben wollen, als immer diese Standard Box, für die hätte ich hier was ansehnlicheres.

    Diese Box ist voll einsatzfähig für HTML-Formulare und über den jeweiligen selbst definierten Namen über JavaScript sowie PHP etc. ansprechbar.

    Die Box kann an beliebiger Stelle instanziert werden.
    und über die eigene mitgebrachte Methode addValues([lable],[value]) können beliebig viele Einträge der Box hinzugefügt werden.

    Die beiden Images für das Werte-Scrollen können leicht ausgetauscht werden und es können noch zusätzliche Eigenschaften verändert und angegeben werden.

    Die Kompatibilität ist momentan:
    ns6, opera 5-6-7 , mozilla und natürlich der IE 5-6


    Nun zum Code:

    PHP-Code:
    <html>
    <
    head>
    <
    script>
    selectBox = function(selectName,boxWidth,boxHeight) {

        
    /*
        **     selectbox v1.0
        **     © 2004 robert engelhardt
        **     internetagentur more style berlin
        **     [URL]www.more-style.de[/URL]
        */


        // Eigenschaften
        //

        
    var staticFontSize        = new Number(12);        // Textfeld Schriftgröße
        
    var staticFontFace        = new String("arial");        // Textfeld Schriftart
        
    var staticBorderColor     = new String("#979797");    // Textfeld Rahmenfarbe

        
    var imageWidth            = new Number(19);
        var 
    img_up_mout           = new String("up.gif");        // image up-scroll mouseout
        
    var img_up_mover          = new String("up2.gif");    // image up-scroll mouseover
        
    var img_down_mout         = new String("down.gif");    // image down-scroll mouseout
        
    var img_down_mover        = new String("down2.gif");    // image down-scroll mouseover
        


        // Ab hier nicht verändern!
        //

        
    var output          = new String();
        var 
    spanRandId      = new String(Math.floor(Math.random()*10000000));
        var 
    selectRandId    = new String(Math.floor(Math.random()*10000000));
        var 
    imagesRandId    = new String(Math.floor(Math.random()*10000000));

        
        
    output += "<table cellspacing='0px' cellpadding='0px'>";
        
    output += "<tr>";
        
    output += "<td rowspan='2'>";
        
    output += "<span id='"+spanRandId+"'>";
        
    output += "<input type='text' style='";
        
    output += "width:"+(boxWidth-imageWidth)+"px;";
        
    output += "font:"+staticFontSize+"px "+staticFontFace+";";
        
    output += "border:1px solid "+staticBorderColor+";";
        
    output += "height:"+boxHeight+"px;cursor:default' ";
        
    output += "id='_"+selectRandId+"_1' readonly>";
        
    output += "<input type='hidden' id='_"+selectRandId+"_2' name='"+selectName+"'>";
        
    output += "</span>";
        
    output += "</td>";
        
    output += "<td valign='bottom'>";
        
    output += "<img src='"+img_up_mout+"' name='"+imagesRandId+"_1' ";
        
    output += "onmouseover=\"this.src='"+img_up_mover+"'\" ";
        
    output += "onmouseout=\"this.src='"+img_up_mout+"'\" ";
        
    output += "onclick=\"document.getElementById('"+spanRandId+"').setLower()\">";
        
    output += "</td>";
        
    output += "</tr>";
        
    output += "<tr>";
        
    output += "<td valign='top'>";
        
    output += "<img src='"+img_down_mout+"' name='"+imagesRandId+"_2' ";
        
    output += "onmouseover=\"this.src='"+img_down_mover+"'\" ";
        
    output += "onmouseout=\"this.src='"+img_down_mout+"'\" ";
        
    output += "onclick=\"document.getElementById('"+spanRandId+"').setUpper()\">";
        
    output += "</td>";
        
    output += "</tr>";
        
    output += "</table>";

        
    document.write(output);

        var 
    obj               document.getElementById(spanRandId);
        
    obj.selectedIndex     0;
        
    obj.spanRandId        spanRandId;
        
    obj.selectLable       = new Array();
        
    obj.selectValue       = new Array();
        
    obj.valueBoxId        document.getElementById("_"+selectRandId+"_1");
        
    obj.optionBoxId       document.getElementById("_"+selectRandId+"_2");

        
    obj.setValues = function() {
            
    this.valueBoxId.value  this.selectLable[this.selectedIndex];
            
    this.optionBoxId.value this.selectValue[this.selectedIndex];
        }

        
    obj.setUpper = function() {
            if(
    this.selectedIndex<this.selectLable.length-1) {
                
    this.selectedIndex++;
                
    this.setValues();
            }
        };

        
    obj.setLower = function() {
            if(
    this.selectedIndex>0) {
                
    this.selectedIndex--;
                
    this.setValues();
            }
        };

        
    this.prototype obj;
        
    this.addValues = function(lable,value) {

            var 
    this.prototype;

            
    p.selectLable[p.selectLable.length] = lable;
            
    p.selectValue[p.selectValue.length] = value;

            
    p.valueBoxId.value  p.selectLable[0];
            
    p.optionBoxId.value p.selectValue[0];

            
    undefined;
        };

        
    obj                  undefined;
        
    output               undefined;
        
    spanRandId           undefined
        
    selectRandId         undefined;
        
    imagesRandId         undefined;
        
        
    staticFontSize       undefined;
        
    staticFontFace       undefined;
        
    staticBorderColor    undefined;

        
    imageWidth           undefined;
        
    img_up_mout          undefined;
        
    img_up_mover         undefined;
        
    img_down_mout        undefined;
        
    img_down_mover       undefined;
    };
    </script>
    <style>
    td,input{font:10px verdana}
    </style>
    </head>
    <body>
    <form action="index.html" method="get">
    <table>
    <tr>
        <td width="150px"><b>Ihr Namen</b></td>
        <td><input name="feld" style="border:1px solid #979797;width:120px"></td>
    </tr>
    <tr>
        <td width="150px"><b>Ihr Internetanschluss</b></td>
        <td>
            <script>
            box = new selectBox("meineselectbox",120,19);
            box.addValues('DSL','t_dsl');
            box.addValues('ISDN','isdn');
            box.addValues('Moden','moden');
            box.addValues('Ich habe Keinen','none');
            </script>
        </td>
    </tr>
    <tr>
        <td width="150px">&nbsp;</td>
        <td><input type="submit" value="abschicken" style="border:1px solid #979797;background:#ffffff;width:120px"></td>
    </tr>
    </form>
    </body>
    </html> 
    Und hier zum mal rein schauen, einfach mal was Eintragen und Auswählen und abschicken. Das Formular ist auf GET gestellt damit ihr die Variablen in der Adressleiste seht.

    SelectBox v1.0


    Und hier das ganze noch mal zum Downloaden.
    Viel Spaß damit,
    und freut euch auf ein weiter Version mit ausklappbaren Optionen.

    Grüße Robert

  2. #2
    brainshock ist offline Lounge-Member
    registriert
    03-10-2002
    Ort
    .
    Beiträge
    5.319
    Kann man bei "Internetanschluss" etwas machen?? Text ändern oder so? Am Mac geht da nix.

  3. #3
    Avatar von womstar
    womstar ist offline Lounge-Member
    registriert
    22-07-2002
    Ort
    latente matrix
    Beiträge
    5.913
    ich hab ja auch kein mac, somit kann ich nicht testen was da läuft und was nicht.

    wird denn nichts angezeigt? also wird die box net angezeigt?

  4. #4
    Avatar von womstar
    womstar ist offline Lounge-Member
    registriert
    22-07-2002
    Ort
    latente matrix
    Beiträge
    5.913
    achso ... der download
    Angehängte Dateien Angehängte Dateien

  5. #5
    brainshock ist offline Lounge-Member
    registriert
    03-10-2002
    Ort
    .
    Beiträge
    5.319
    Screenshot...
    Angehängte Grafiken Angehängte Grafiken

  6. #6
    Avatar von womstar
    womstar ist offline Lounge-Member
    registriert
    22-07-2002
    Ort
    latente matrix
    Beiträge
    5.913
    jop, wie gesagt, mac habsch net.

  7. #7
    Avatar von rasputin
    rasputin ist offline Lounge-Member
    registriert
    31-10-2001
    Beiträge
    3.102
    schönschön, gibts das auch mit size="1"? oder ist das noch in planung?

    ps. was ist ein lable? meist du nicht label?

  8. #8
    Avatar von womstar
    womstar ist offline Lounge-Member
    registriert
    22-07-2002
    Ort
    latente matrix
    Beiträge
    5.913
    wozu size 1?
    es ns4.7 unterstützt die box doch garnet.

    und schön das du unterstützender teilhaber der rechtschreibreform bist.
    wird natürlich in der nächsten version berücksichtig

  9. #9
    Avatar von rasputin
    rasputin ist offline Lounge-Member
    registriert
    31-10-2001
    Beiträge
    3.102
    mit size=1 meinte ich ein dropdown...

  10. #10
    Avatar von womstar
    womstar ist offline Lounge-Member
    registriert
    22-07-2002
    Ort
    latente matrix
    Beiträge
    5.913
    tja ... wer lesen kann

  11. #11
    pesado ist offline Grünschnabel
    registriert
    27-08-2008
    Beiträge
    1

    AW: Eigene Selectbox v1.0

    Vielen Dank, werde es gleich mal testen...

  12. #12
    jmar ist offline Jungspund
    registriert
    23-09-2010
    Beiträge
    17

    AW: Eigene Selectbox v1.0

    hallo zusammen,

    was könnte man machen, damit sowas möglich ist?

    ->

    <script>
    box = new selectBox("meineselectbox",120,19);
    box.addValues('<img src="http://forum.jswelt.de/tutorials-javascript/..." />&nbsp;DSL','t_dsl');
    </script>


    ...das html-img sollte geparst, und nicht am browser als text ausgegeben werden!


    grüsse, jan

  13. #13
    M@te ist offline Grünschnabel
    registriert
    05-04-2013
    Beiträge
    1

    AW: Eigene Selectbox v1.0

    Sollte doch normal so funktionieren.
    Oder hast du vielleicht irgendwo nen HTML encode?

  14. #14
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.700

    AW: Eigene Selectbox v1.0

    @M@te: dir ist hoffentlich klar, dass dieser Thread tot ist...

    @jmar: da zur Darstellung <input>s verwendet werden, wird HTML direkt als Text dargestellt und nicht geparst.

    @all: das Skript ist alt und deswegen auch nicht zur Verwendung empfehlenswert!

Lesezeichen

Berechtigungen

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