Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Kilka slider'ów
Forum PHP.pl > Forum > Po stronie przeglądarki
boosik01
Witam!

Potrzebuje przypisać "przeciągniętą" wartość slider range do input type hidden. Problem polega na tym że wszystkie slidery mam przypisane do jednego ID, co nie jest łatwe do wyciągnięcia. Sliderów jest razem 6, na początku mamy 100 pkt, i my przesuwamy tymi 6 suwakami tak aby łączna wartość wyniosła 100. Teraz potrzebuje przypisać pkt z każdego tego suwaga do pola input hidden tak abym mógł przesłać je sobie spokojnie do php smile.gif Mam nadzieje że w miarę jasno się wyraziłem smile.gif Kod: http://jsfiddle.net/89dxM/46/ (nie wiem czemu tu nie działa).
ghost1511
Skoro masz rozdzielone punkty na atrybuty to po co sumujesz je do osobnej zmiennej? Wydaje się to zbędne.

--edit
Teraz rozumiem, chcesz pozwolić na max 100pkt we wszystkich polach. Możesz CSS umieścić w arkuszu zewnętrznym bo zamazuje on ogólny obraz kodu?
Ja tu żadnych sliderów nie widzę
boosik01
Proszę kod bez zbędnych styli:
http://jsfiddle.net/89dxM/47/

Mam nadzieję że czegoś przypadkiem nie usunąłem.
ghost1511
Gdy uruchamiasz skrypt na stronie którą podałeś nie ma żadnych sliderów... Jest tylko kilka słów które się wyświetlają.
Powiedz mi czy Ty pisałeś ten skrypt w JS? Bo wygląda że nie...
boosik01
Dodam tak:

  1. <form action="" method="post">
  2. <p> Punktów do dyspozycji: <span id="x"> 100 </span> </p>
  3.  
  4.  
  5. <span>Przyśpieszenie: </span>
  6. <div id="sliders">
  7. <span class="slider"></span>
  8. <span> 1 </span>
  9. </div>
  10.  
  11.  
  12. <span>Reakcja: </span>
  13. <div id="sliders">
  14.  
  15. <span class="slider"></span>
  16. <span style="float: left; margin-left: 20px;"> 1 </span>
  17.  
  18. </div>
  19.  
  20.  
  21. <span>Hamowanie: </span>
  22. <div id="sliders">
  23.  
  24. <span class="slider"></span>
  25. <span> 1 </span>
  26.  
  27. </div>
  28.  
  29.  
  30. </form>
  31.  
  32. <script>
  33. //<![CDATA[
  34. $(window).load(function(){
  35. var sliders = $("#sliders .slider");
  36.  
  37. sliders.each(function() {
  38. var value = parseInt($(this).text(), 10),
  39. availableTotal = 100;
  40.  
  41. $(this).empty().slider({
  42. value: 0,
  43. min: 0,
  44. max: 100,
  45. range: "min",
  46. step: 1,
  47. animate: 100,
  48. slide: function(event, ui) {
  49. // Get current total
  50. var total = 0;
  51.  
  52. sliders.not(this).each(function() {
  53. total += $(this).slider("option", "value");
  54. });
  55.  
  56.  
  57. var max = availableTotal - total;
  58. if (max - ui.value >= 0) {
  59. // Need to do this because apparently jQ UI
  60. // does not update value until this event completes
  61. total += ui.value;
  62. console.log(max-ui.value);
  63. $(this).siblings().text(ui.value);
  64. $("#x").text(max - ui.value);
  65.  
  66. } else {
  67. return false;
  68. }
  69. }
  70.  
  71.  
  72.  
  73. });
  74. });
  75. });//]]>
  76. </script>


Dokładnie jest to jquery. Nie wiem czemu na tamtej stronie nie wyświetla nic, ale u mnie na localhoscie działa bez zarzutów.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.