Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]Suwak Fader wysyłający wartość
Forum PHP.pl > Forum > Przedszkole
dnaielpro
Witam,
potrzebuję pomocy.
Tworzę właśnie webowy interfejs do sterowania oświetleniem i wyzwalania gotowych scen, natomiast muszę również stworzyć suwak, który będzie działał w zakresie 0-100% i w zależności od zakresu (najlepiej co 1%) działał jako href do konkretnej podstrony.

Tzn. moje przyciski to są np. trigger/10, trigger/11, trigger/12 więc jeśli suwak w zakresie 0-100% będzie ustawiony na 11% to uruchamia się href do trigger/11

Póki co znalazłem skrypt samego suwaka, lecz nie wiem jak zrobić żeby wysyłać href w zależności od położenia

  1. $( function() {
  2. $( "#slider-vertical" ).slider({
  3. orientation: "vertical",
  4. range: "min",
  5. min: 0,
  6. max: 100,
  7. value: 0,
  8. slide: function( event, ui ) {
  9. $( "#amount" ).val( ui.value );
  10. });
  11. $( "#amount" ).val( $( "#slider-vertical" ).slider( "value" ) );
  12. } );
  13. </script>
matiit
A jakiego slidera używasz? Zobacz w jego dokumentacji, cze nie ma eventu typu "on change", wtedy sie po prostu pod to podpinasz
dnaielpro
Znalazłem w internecie: https://jqueryui.com/slider/#slider-vertical
matiit
No to tutaj masz wszystko czego potrzebujesz IMO:

http://api.jqueryui.com/slider/#event-change
dnaielpro
Ok,
natomiast nie za bardzo wiem jak zrobić wartościowe wysyłanie hrefa, czyli to co mówiłem, kiedy value wynosi 0 to href wysyła /trigger/0, kiedy value wynosi 27 to trigger/27

matiit
hrefa sie nigdzie nie wysyla

href to jest atrybut tagu a.

Powiedz dokladniej o co chodzi bo nie do konca rozumiem..

Ze zdarzenia "change" wyciągniesz wartosc suwaka, np. 15 i sobie skleisz stringa,

Kod
var currentValue = <jakos zdobadz value suwaka z eventu>;
var newHref = 'trigger/'  + currentValue


I sobie gdzieś to umieścisz.
dnaielpro
Wyjaśniam:
o tyle ile znam się na html/css oraz trochę php to nie znam się za bardzo na java, a muszę zrobić jeden suwak, który będzie działał w zakresie od 0-100%. Obecnie z tego skryptu, który znalazłem działa i nawet przedstawia ustawioną wartość obok suwaka. Ja jednak potrzebuję takiej funkcjonalności jak w zależności od ustawienia suwaka zostanie uruchomione przejście do konkretnej podstrony.

Czyli: suwak ustawiam na 24 i wtedy uruchamia się przejście do podstrony xyz/24
suwak ustawiam na 73 i wtedy uruchamia się przejście do podstrony xyz/73
matiit
No to tak jak napisałem w poprzednim poście

Cytat
Ze zdarzenia "change" wyciągniesz wartosc suwaka, np. 15 i sobie skleisz stringa


Kod
var currentValue = <jakos zdobadz value suwaka z eventu>;
var newHref = 'trigger/'  + currentValue


I zobacz to: https://developer.mozilla.org/en-US/docs/We...Window/location

Do zmiany adresu (zeby zmienic strone).

dnaielpro
Mniej więcej rozumiem, gorzej ze sklepaniem tego, muszę zrobić to z mojego przykładu dla #slider-vertical czy #amount?

Może jakiś przykład jak to powinno wyglądać?
matiit
Spróbuj sam, napisz coś jak nie będzie wychodzić to wrzuć kod i pomogę.
dnaielpro
No niestety nawet nie wiem jak dobrze zacząć, nie chce wrzucać czegoś co i tak będzie od razu źle zrobione, bo tak jak mówiłem, nie za bardzo znam java i nigdy czegoś takiego nie robiłem, a potrzebuję jedynie tej jednej funkcjonalności.

Może uda Ci się wrzucić jakiś przykład, który by mnie naprowadził jak coś takiego powinno wyglądać w praktyce?


  1. <script>
  2. $( function() {
  3. $( "#slider-vertical" ).slider({
  4. orientation: "vertical",
  5. range: "min",
  6. min: 0,
  7. max: 100,
  8. value: 0,
  9. slide: function( event, ui ) {
  10. $( "#amount" ).val( ui.value );
  11. });
  12. $( "#amount" ).val( $( "#slider-vertical" ).slider( "value" ));
  13. onchange: function (event, ui) {
  14. var currentValue = <tutaj nie wiem co wpisać>;
  15. var newHref = "trigger/01" + currentValue?? - to znaczy?
  16. }
  17. } );
  18. </script>


Czy powinno to być zbudowane na zasadzie if,else?

Czy nikt nie jest w stanie mi pomóc?
matiit
Wrzuć kod na jakiegoś jsfiddla, zeby bylo widac ten slider jak dziala i dalo sie edytowac kod.

dnaielpro
Oto link do plików: http://jsfiddle.net/w4ppLc6t/

Czy powinno to wyglądać tak?

  1. $( function() {
  2. $( "#slider-vertical" ).slider({
  3. orientation: "vertical",
  4. range: "min",
  5. min: 0,
  6. max: 100,
  7. value: 0,
  8. step: 1,
  9. change: function( event, ui ) {
  10. location.href = "/trigger/" + ui.value
  11. },
  12. slide: function( event, ui ) {
  13. $( "#amount" ).val( ui.value );
  14. }
  15. });
  16. $( "#amount" ).val( $( "#slider-vertical" ).slider( "value" ) );
  17. } );
  18.  
  19. });
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.