Meinungen zu meinem Schiebregler:

  • 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]
    <!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>


    [/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 ;)

    Die deutsche Rechtschreibung ist Freeware, Du darfst sie kostenlos nutzen. Allerdings ist sie nicht Open Source, d.h. Du darfst sie nicht verändern oder in veränderter Form veröffentlichen.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!