[Erledigt] jQuery Slider - In eine Richtung sperren

Trainmaster · 07.08.2010, 12:31

Ich bastle gerade einen Konfigurator mithilfe von jQuery. Es soll möglich sein, aus verschiedenen Produkten ein Produkt mit 100% Füllinhalt zu konfigurieren.

Jetzt stehe ich vor folgendem Problem. Setze ich bspw. Regler A auf 60% und Regler B auf 40%, ist das Produkt fertig konfiguriert. Die anderen Regler werden dabei deaktiviert. Allerdings möchte ich gerne, dass die Regler A und B in die positive Richtung ebenfalls deaktiviert werden bzw. diese nur mehr in die negative Richtung geschoben werden können.

Im jQuery Forum habe ich bereits gesucht, allerdings hilft mir die Antwort nicht weiter Lock slider to only one direction? - jQuery Forum . Bei Google findet man ebenfalls recht wenig / nichts dazu.

Ein weiteres Problem habe ich mit dem Event "slide". Das Event wird bei jeder Mausbewegung ausgelöst. Damit lasse ich mir über

PHP-Code:

  $("#amount_'.$i.'").html(ui.value);

den aktuellen Slider-Wert des jeweiligen Sliders ausgeben.

Versuche ich den Gesamtwert aller Slider darzustellen, hinkt der Wert immer um eine Mausbewegung nach, d.h. steht der Slider auf 50, Gesamtwert auf 0 - Slider auf 100, Gesamtwert auf 50 usw.

PHP-Code:

  var total = 0;

for (var i = 0; i <= '.count($result).'; i++) {                                                    

   var slider_num = "#slider_" + i;

   var total = total + $(slider_num).slider("value");                        

}

nikosch · 08.08.2010, 13:57

Zitat:

allerdings hilft mir die Antwort nicht weiter Lock slider to only one direction? - jQuery Forum .

Warum nicht? Was ist Dein Problem mit der ANtwort?

[edit]
Im Grunde ist es doch ganz einfach (Pseudocode):

Code:

onSlide = test;

test(){
  bilde SUmme aller Regler()
  wenn Summe >= 100
    return false;
}

Sollte bereits die Sperre umsetzen. Wenn Du denn das Deaktivieren noch machen willst - ist aber an sich nicht nötig - käme vor dem return noch (Pseudocode):

Code:

für alle slider:
  setze deaktiv, wenn wert == 0

und nach dem return:

Code:

für alle slider:
  setze aktiv

Trainmaster · 08.08.2010, 16:06

@ nikosch: You made my day.

Habe es endlich so hinbekommen, wie ich es haben möchte. Die ersten Schritte in Javascript sind zäh, aber es geht

Da ich hier täglich dazulerne, teile ich gerne meine Lösung:

PHP-Code:

  $(document).ready(function() {                                    

    $("#progressbar").progressbar({ value: 0 });

    $(".slider").each(function(index, element) {

        var name = element.id.replace("Slider", "");

        $("#" + element.id).slider({

            animate: true,

            min: 0,

            max: 500,

            step: 50,

            value: 0,

            slide: function(event, ui) {            

                var totalValue = 0;                                    

                currentSlider = $(this).attr("id");

                

                for (var i = 1; i <= '.count($result).'; i++) {

                    var eachSlider = "s" + i + "Slider";

                    $("#" + eachSlider).slider("enable");                                                                

                    if (eachSlider == currentSlider) {

                        totalValue += ui.value;

                    } else {

                        totalValue += $("#" + eachSlider).slider("option", "value");

                    }

                }

                

                if (totalValue >= 500) {

                    for (var i = 1; i <= '.count($result).'; i++) {

                        var eachSlider = "s" + i + "Slider";                                                            

                        if (!(eachSlider == currentSlider)) {

                            if ($("#" + eachSlider).slider("option", "value") == 0) {

                                $("#" + eachSlider).slider("disable");

                            }

                        }                        

                    }                                                     

                }

                

                if (totalValue > 500) {

                    return false;

                }

                

                totalValueInt = parseInt(totalValue);

                $("#" + name).html(ui.value);

                $("#mix").html(totalValueInt);                                            

                $("#progressbar").progressbar("option", "value", totalValueInt / 5);

            }

        });

    });        

});

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] Statistik mit jQuery	DJ_RhoxxZ	JavaScript, Ajax und mehr	6	25.07.2010 17:47
jquery: dialogbox funktioniert nicht	Dreamwatcher	JavaScript, Ajax und mehr	16	22.07.2010 18:22
jQuery findet Element nicht	ByStones	JavaScript, Ajax und mehr	8	11.06.2010 14:03
jQuery Plug scroll to - wie einbetten?	mxxxx	JavaScript, Ajax und mehr	5	24.04.2010 18:12
jQuery Ajax und $(this) Problem	halskrause	JavaScript, Ajax und mehr	8	01.03.2010 17:39
[Erledigt] Jquery Selektoren	chunky	JavaScript, Ajax und mehr	5	14.02.2010 11:14
jQuery Ablauf	halskrause	JavaScript, Ajax und mehr	8	24.11.2009 13:14
jQuery mit AJAX ohne ActiceX im IE?	krush	JavaScript, Ajax und mehr	2	11.08.2009 08:54
JQUERY - divs auf und zuklappen	sturmi	JavaScript, Ajax und mehr	5	04.06.2009 14:23
JQuery animate klappt in IE nicht richtig	mysteryxxx	JavaScript, Ajax und mehr	2	29.05.2009 09:17
[Erledigt] jQuery Dateien nachladen	Phoscur	JavaScript, Ajax und mehr	7	14.03.2009 13:44
jQuery Plugin - so richtig?	stayInside	JavaScript, Ajax und mehr	5	23.02.2009 12:34
For Schleife mit jQuery	phpbeginner	JavaScript, Ajax und mehr	3	22.11.2008 22:35
time slider?	aha_01	JavaScript, Ajax und mehr	1	28.10.2008 13:14
bestimmtes verzeichnis immer sperren	mAy^daY	Server, Hosting und Workstations	3	03.01.2006 12:46

07.08.2010, 12:31
Trainmaster Erfahrener Benutzer Registriert seit: 25.05.2010 Beiträge: 852 PHP-Kenntnisse: Anfänger	[Erledigt] jQuery Slider - In eine Richtung sperren Ich bastle gerade einen Konfigurator mithilfe von jQuery. Es soll möglich sein, aus verschiedenen Produkten ein Produkt mit 100% Füllinhalt zu konfigurieren. Jetzt stehe ich vor folgendem Problem. Setze ich bspw. Regler A auf 60% und Regler B auf 40%, ist das Produkt fertig konfiguriert. Die anderen Regler werden dabei deaktiviert. Allerdings möchte ich gerne, dass die Regler A und B in die positive Richtung ebenfalls deaktiviert werden bzw. diese nur mehr in die negative Richtung geschoben werden können. Im jQuery Forum habe ich bereits gesucht, allerdings hilft mir die Antwort nicht weiter Lock slider to only one direction? - jQuery Forum . Bei Google findet man ebenfalls recht wenig / nichts dazu. Ein weiteres Problem habe ich mit dem Event "slide". Das Event wird bei jeder Mausbewegung ausgelöst. Damit lasse ich mir über PHP-Code: `$("#amount_'.$i.'").html(ui.value);` den aktuellen Slider-Wert des jeweiligen Sliders ausgeben. Versuche ich den Gesamtwert aller Slider darzustellen, hinkt der Wert immer um eine Mausbewegung nach, d.h. steht der Slider auf 50, Gesamtwert auf 0 - Slider auf 100, Gesamtwert auf 50 usw. PHP-Code: `var total = 0; for (var i = 0; i <= '.count($result).'; i++) { var slider_num = "#slider_" + i; var total = total + $(slider_num).slider("value"); }`


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

08.08.2010, 16:06
Trainmaster Erfahrener Benutzer Registriert seit: 25.05.2010 Beiträge: 852 PHP-Kenntnisse: Anfänger	@ nikosch: You made my day. Habe es endlich so hinbekommen, wie ich es haben möchte. Die ersten Schritte in Javascript sind zäh, aber es geht Da ich hier täglich dazulerne, teile ich gerne meine Lösung: PHP-Code: $(document).ready(function() { $("#progressbar").progressbar({ value: 0 }); $(".slider").each(function(index, element) { var name = element.id.replace("Slider", ""); $("#" + element.id).slider({ animate: true, min: 0, max: 500, step: 50, value: 0, slide: function(event, ui) { var totalValue = 0; currentSlider = $(this).attr("id"); for (var i = 1; i <= '.count($result).'; i++) { var eachSlider = "s" + i + "Slider"; $("#" + eachSlider).slider("enable"); if (eachSlider == currentSlider) { totalValue += ui.value; } else { totalValue += $("#" + eachSlider).slider("option", "value"); } } if (totalValue >= 500) { for (var i = 1; i <= '.count($result).'; i++) { var eachSlider = "s" + i + "Slider"; if (!(eachSlider == currentSlider)) { if ($("#" + eachSlider).slider("option", "value") == 0) { $("#" + eachSlider).slider("disable"); } } } } if (totalValue > 500) { return false; } totalValueInt = parseInt(totalValue); $("#" + name).html(ui.value); $("#mix").html(totalValueInt); $("#progressbar").progressbar("option", "value", totalValueInt / 5); } }); }); });