Ankündigung

Einklappen
Keine Ankündigung bisher.

[Erledigt] jQuery Slider - In eine Richtung sperren

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • [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 
    0<= '.count($result).'i++) {                                                    
       var 
    slider_num "#slider_" i;
       var 
    total total + $(slider_num).slider("value");                        



  • #2
    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
    --

    „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
    Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


    --

    Kommentar


    • #3
      @ 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});
          $(
      ".slider").each(function(indexelement) {
              var 
      name element.id.replace("Slider""");
              $(
      "#" element.id).slider({
                  
      animatetrue,
                  
      min0,
                  
      max500,
                  
      step50,
                  
      value0,
                  
      slide: function(eventui) {            
                      var 
      totalValue 0;                                    
                      
      currentSlider = $(this).attr("id");
                      
                      for (var 
      1<= '.count($result).'i++) {
                          var 
      eachSlider "s" "Slider";
                          $(
      "#" eachSlider).slider("enable");                                                                
                          if (
      eachSlider == currentSlider) {
                              
      totalValue += ui.value;
                          } else {
                              
      totalValue += $("#" eachSlider).slider("option""value");
                          }
                      }
                      
                      if (
      totalValue >= 500) {
                          for (var 
      1<= '.count($result).'i++) {
                              var 
      eachSlider "s" "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);
                  }
              });
          });        
      }); 

      Kommentar

      Lädt...
      X