Meinungen zu meinem Schiebregler: - Paules-PC-Forum.de

ruNN0r · 23.03.2011, 22:31

Hallo Leute,
da es in HTML, usw. keinen Schieberegler gibt habe ich mir überlegt einen zu bauen.
Da dies eher weniger ein Problem ist, was ich hier lösen möchte, als ein Tutorials oder eine Meinungsumfrage, möchte ich hier erstmal eine Sache klären.
Wozu braucht man sowas eigentlich?
Naja brauchen ist eine Sache... Aber Pracktisch ist es für den Anwender.
Wenn ich einen Wert zwischen 1 und 255 auswählen soll ist es einfacher einen Regler zu der Position zu schieben als einen Wert einzutippen (Machen wir es den Mausbedienern noch einfacher

)

Ja also ich denke ich komme nun auch mal rüber mit dem Script.
Es ist noch nicht ganz fertig. Man kann das bestimmt noch zusammen fasssen aber ich bin ziemlich müde und habe nun keine Lust mehr mich da noch dran zu setzen...

Ich hätte gerne eine Meinung von euch!

Wie gefällt es euch?
Wie funktioniert es bei euch
- Firefox macht Probleme mit dieser Grafik rausziehen funktion. Jedoch die funktioniert es aber halt mit 2x klicken.
- Der IE klappt ganz gut bis auf ein makierungsproblem
- Safari nimmt das ganz gelassen. Alles Super!
So ist mein aktueller stand
Wie gefällt euch die Struktur des Scriptes
Wo kann man was verbessern, verändern, vereinfachen usw.
- ein paar dinge habe ich auch noch z.B. so wie ich die Mausposition abfrage funktioniert das nicht mit jedem Browser soweit ich weiß.
Naja und was euch noch so einfällt

So hier der Code:

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=windows-1250">
        <title></title>
        <style type="text/css">
            body {
                background: #FFF;
            }
            /*Style Horizontal*/
            div.regler_platte_h{
                height:200px;
                width:50px;
                padding:0px;
                background: transparent url(regler_horizontal_platte.png) no-repeat; 
            }
            div.regler_knopf_h{
                position: relative;
                top:0px;
                height:22px;
                width:50px;
                padding:0px;
                background: transparent url(regler_horizontal_knopf_normal.png) no-repeat;
                cursor:pointer; 
            }
            /*Style Vertikal*/
            div.regler_platte_v{
                height:50px;
                width:200x;
                padding:0px;
                background: transparent url(regler_vertikal_platte.png) no-repeat; 
            }
            div.regler_knopf_v{
                position: relative;
                left:0px;
                height:50px;
                width:22px;
                padding:0px;
                background: transparent url(regler_vertikal_knopf_normal.png) no-repeat;
                cursor:pointer; 
            }
        </style>
        <script type="text/javascript" language="JavaScript">
            //Variablen deklarieren
            var mausposx=0;         //Aktuelle Mausposition auf der x Achse (links,rechts)
            var mausposy=0;         //Aktuelle Mausposition auf der y Achse (oben,unten)
            var mausklickposx=0;    //X-Position wo Geklickt wurde (beim Regler) bez.: Mausklick-Position X
            var mausklickposy=0;    //Y-Position wo Geklickt wurde (beim Regler) bez.: Mausklick-Position Y
            var intervaltime=0;     //Intervalvariable
            var move_started=0;     //1=Regler wird aktuell bewegt 0=Regler wird nicht bewegt
            
            //Fix-Variablen Initialisieren    
            var max_schiebebereich=178; //Der bereich zwischen 0 und x in dem sich der Regler bewegen kann. 
            
            //Mausposition im Fenster bestimmen und abspeichern.
            function mausposition(Ereignis){
                if (!Ereignis)
                    Ereignis = window.event;
                
                mausposx = Ereignis.clientX;
                mausposy = Ereignis.clientY;
            }
            //Starten der "Schiebung"
            function schieberegler_start(id,pos,richtung){
                //Wenn die Schiebung bereits aktiv ist soll der Regler erstmal deaktiviert werden um eine neue Schiebung zu starten.
                if(move_started==1){
                    schieberegler_drop();
                }
                if(!pos){pos=0;}else{pos = parseInt(pos);} //Wenn die Position noch nicht bekannt ist dann auf null ansonsten das "px" entfernen und wieder speichern.
                move_started=1; //mit move_started die Schiebung als gestartet makieren.
                //richtung h ist Horizontal alles andere Vertikal.
                if(richtung=="h"){
                    document.getElementById(id).style.backgroundImage="url(regler_horizontal_knopf_gedrueckt.png)"; //Den Knopf in gedrückt ändern
                }else{
                    document.getElementById(id).style.backgroundImage="url(regler_vertikal_knopf_gedrueckt.png)"; //Den Knopf in gedrückt ändern
                }
                mausklickposy=mausposy; //Mausklick-Position X speichern
                mausklickposx=mausposx; //Mausklick-Position Y speichern
                intervaltime=window.setInterval(function(){schieberegler_newpos(id,pos,richtung);},50); //Interval starten der ständig die Funktion zur Positionsveränderung startet.
            }
            //Knopfposition ändern
            function schieberegler_newpos(id,pos,richtung){
                //Positionen auf 0 setzen (sicherheitshalber, nicht zwingend erforderlich)
                var newposy=0; 
                var newposx=0;
                //richtung h ist Horizontal alles andere Vertikal. 
                if(richtung=="h"){
                    //Wenn die startposition des Knopfes NICHT 0 ist dann folgende Formel verwenden:
                    if(pos!=0){
                        //([Aktuelle Mausposition]+[Knopf Startposition])-[Mausklick Position]
                        newposy=(mausposy+pos)-mausklickposy;
                    //ansonsten ist der Knopf bei 0 so wird folgende Formel verwendet:
                    }else{
                        //[Aktuelle Mausposition]-[Mausklick Position]
                        newposy=mausposy-mausklickposy;
                    }
                    //Der errechnete Wert wird verglichen ob...
                    
                    //...er innerhalb des Schiebebereichs liegt
                    if(newposy>=0 && newposy<=max_schiebebereich){
                        //Wenn "Ja" dann den Regler verschieben
                        document.getElementById(id).style.top=newposy +'px';
                    //...er unterhalb bzw. Außerhalb des Schiebebereichs liegt
                    }else if(newposy<0){
                        //Wenn "Ja" dann den Regler auf Position 0 setzen.
                        document.getElementById(id).style.top=0+'px';
                    //...er oberhalb bzw. Außerhalb des Schiebebereichs liegt
                    }else if(newposy>max_schiebebereich){
                        //Wenn "Ja" dann den Regler auf Position [Eingestellter Fixwert] setzen.
                        document.getElementById(id).style.top=178+'px';
                    }
                }else{
                    //Alles so wie bei Horizontal nur im Vertikalen
                    if(pos!=0){
                        newposx=(mausposx+pos)-mausklickposx;
                    }else{
                        newposx=mausposx-mausklickposx;
                    }
                    if(newposx>=0 && newposx<=max_schiebebereich){
                        document.getElementById(id).style.left=newposx +'px';
                    }else if(newposx<0){
                        document.getElementById(id).style.left=0+'px';
                    }else if(newposx>max_schiebebereich){
                        document.getElementById(id).style.left=178+'px';
                    }
                }
            }
            //Beenden der "Schiebung"
            function schieberegler_stop(id,pos,richtung){
                move_started=0; //mit move_started die Schiebung als beendet makieren.
                window.clearInterval(intervaltime); //Interval anhalten
                //richtung h ist Horizontal alles andere Vertikal. 
                if(richtung=="h"){
                    document.getElementById(id).style.backgroundImage= "url(regler_horizontal_knopf_normal.png)";//Knopf auf normal zurücksetzen
                }else{
                    document.getElementById(id).style.backgroundImage= "url(regler_vertikal_knopf_normal.png)";//Knopf auf normal zurücksetzen
                }
            }
            document.onmousemove = mausposition;        
        </script>
    </head>
    <body>
        <div class="regler_platte_h">
                <div id="regler_knopf1" 
                     class="regler_knopf_h" 
                     onMouseDown="javascript: schieberegler_start(this.id,this.style.top,'h');" 
                     onMouseUp="javascript: schieberegler_stop(this.id,this.style.top,'h');">
                </div>
        </div>
        <div class="regler_platte_v">
                <div id="regler_knopf2" 
                     class="regler_knopf_v" 
                     onMouseDown="javascript: schieberegler_start(this.id,this.style.left,'v');" 
                     onMouseUp="javascript: schieberegler_stop(this.id,this.style.left,'v');">
                </div>
        </div>  
    </body>
</html>

So das hätten wir.
Im Anhang liegt dieser Code sowohl als auch die Grafikdateien.

Ich hoffe es gefällt euch und ich erhalte viele Meinungen und Kritik.

P.S.: Ich habe dieses Script selber geschrieben. Ich erheben auf dieses Script KEIN Copyright. Also, es ist Freeware und Open Source. Viel Spaß damit

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Eure Meinungen	scrat	Hardware - Kaufempfehlungen	13	24.09.2008 16:21
hab ein problem mit meinem sound und mit meinem bildschirm	nikls	Hardware - Problemlösungen	2	29.10.2007 14:06
PC bei Dell, Meinungen	fuellemann	Hardware - Kaufempfehlungen	18	11.04.2007 20:47
Einkaufsliste und eure Meinungen	Snuffx	Hardware - Problemlösungen	6	05.06.2005 21:34