Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]Slider + Show/Hide
Forum PHP.pl > Forum > Przedszkole
peja1990
Witam,
proszę Was o pomoc bo sam już nie wiem jak to zrobić.

Mianowicie mam skrypt jQuery wygl±daj±cy tak (element oznaczony jako "1"):

Czyli dynamiczny suwak, który definiuje wynik w nawiasach, np. (50%).

Wszystko fajnie działa ale chciałem dodać jeszcze co¶ takiego aby obok, np. w elemencie oznaczonym na obrazku jako "2", wy¶wietlały się wyniki odpowiadaj±ce odpowiedniemu wynikowi z suwaka.

Tak aktualnie działa suwak:
  1. $(document).ready(function() {
  2. $("#slider-range-max").slider({
  3. range: "max",
  4. min: 0,
  5. max: 100,
  6. value: 50,
  7. slide: function(event, ui) {
  8. $("#amount").val(ui.value);
  9. switch(ui.value) {
  10. case 0:
  11. //$("#results").show();
  12. break;
  13. }
  14. if(ui.value == 0) {
  15. document.getElementById("amount").innerHTML = "zablokowany";
  16. } else {
  17. document.getElementById("amount").innerHTML = ui.value+"%";
  18. }
  19. }
  20. });
  21. $("#amount").val($("#slider-range-max").slider("value"));
  22. document.getElementById("amount").innerHTML = "50"+"%";
  23. });


A tak aktualnie wygl±daj± wyniki, w HTML:
  1. <div class="moduleAccess" rel="47">Jaki¶ moduł - 47%</div>
  2. <div class="moduleAccess" rel="100">Jaki¶ moduł - 100%</div>
  3. <div class="moduleAccess" rel="52">Jaki¶ moduł - 52%</div>
  4. <div class="moduleAccess" rel="31">Jaki¶ moduł - 31%</div>
  5. <div class="moduleAccess" rel="99">Jaki¶ moduł - 99%</div>


Chciałbym zrobić tak, że gdyby na suwaku wynik był równy, np 67% obok wy¶wietlałyby się div'y których warto¶ć atrybutu "rel" jest równa lub mniejsza "67".

Mam nadzieję, że wystarczaj±co obja¶niłem mój problem.
Będę wdzięczny za wszelkie sugestie jak i wszelk± pomoc.

Serdecznie pozdrawiam,
Kamil Dunaj
Kostek.88
To mam rozumiec, ze chcesz wyswietlic duzo divow z wartosciami, czy 1-go, w ktorym te wartosci beda dynamicznie aktualizowane? Jesli ma byc duzo divow, to jak przejedziesz 2x po suwaku to bedziesz mial ponad 100 divov....

Co do 1 diva to wydaje mi sie, ze po 17. linijce kodu powinienes wstawic jeszcze cos takiego:

  1. document.getElementById("id_twojego_diva").innerHTML = ui.value+"%";


PS. Jesli chcesz utrzymac poprawny kod HTML to powinienes parametr rel zastapic innym atrybutem, np. id albo title. http://www.w3schools.com/tags/tag_div.asp pod tym adresem masz liste parametrow dopuszczalnych dla DIV. rel na pewno mozesz uzywac w linkach.

PS2. Troche mieszasz czysty JS z jQuery. Uwazam, ze przez jQuery mialbys latwiejszy dostep do znacznikow, np. zamiast linii 17. mialbys

  1. $("#amount").html = ui.val()+"%";
peja1990
No ale przecież w 17 linijce jest dokładnie to co napisałe¶ i jak widać nie bardzo się rozumiemy.
Chcę wy¶wietlać dużo div'ów, których warto¶ć "rel" może się powtarzać.
Kostek.88
Myslalem, ze #amount to to co nad paskiem. Ja napisalem przyklad to wyswietlenia tego w DIVie oznaczonym 2, ale niewazne. Chyba wiem co masz na mysli. W takim razie:

  1. <div id="div_nr2">
  2. <!-- to jest div, ktory oznaczyles na rysunku jako 2 -->
  3. </div>


No i jQuery (nadal twierdze, ze za 17. linijka):
  1. $('#div_nr2').html('<div class="moduleAccess" rel=" ' + ui.value + ' ">Jaki¶ moduł - ' + ui.value + ' %</div>');


Lub ew. zastapic... ui.val() zamiast ui.value, ale nie jestem do konca pewien, szczerze mowiac nie uzywalem jeszcze tych paskow przewijania.

PS. Ew. zapoznaj sie ze strona jQuery API i poczytaj o append(), appendTo(), html(), text(), val() . W ogole na tej stronce masz mnostwo ciekawych przykladow i zrodla smile.gif
peja1990
Nadal się nie rozumiemy.
Okienko oznaczone na obrazku jako "2" to nie jest jeden wynik.
Wynik z suwaka wy¶wietla się tutaj :: Poziom dostępu (75%)

W okienku oznaczonym jako "2" jest lista wyników, np:

  1. <div class="moduleAccess" dir="47">Jaki¶ moduł - 47%</div>
  2. <div class="moduleAccess" dir="100">Jaki¶ moduł - 100%</div>
  3. <div class="moduleAccess" dir="52">Jaki¶ moduł - 52%</div>
  4. <div class="moduleAccess" dir="31">Jaki¶ moduł - 31%</div>
  5. <div class="moduleAccess" dir="100">Jaki¶ moduł - 100%</div>
  6. <div class="moduleAccess" dir="52">Jaki¶ moduł - 52%</div>
  7. <div class="moduleAccess" dir="75">Jaki¶ moduł - 75%</div>
  8. <div class="moduleAccess" dir="61">Jaki¶ moduł - 61%</div>
  9. <div class="moduleAccess" dir="15">Jaki¶ moduł - 15%</div>
  10. <div class="moduleAccess" dir="99">Jaki¶ moduł - 99%</div>
  11. <div class="moduleAccess" dir="31">Jaki¶ moduł - 31%</div>


Jak widać warto¶ć atrybutów "dir" może się powtarzać więc nie mogę zastosować atrybutu "id".
Chcę zrobić co¶ na zasadzie:

  1. result = $("div.moduleAccess").attr('dir');
  2. if(result > ui.value) {
  3. //TUTAJ CHCĘ ZROBIĆ BY DIV KTÓREGO WARTO¦Ć ATRYBUTU "DIR" JEST MNIEJSZA LUB RÓWNA WARTO¦CI "ui.value" ZOSTAŁ WY¦WIETLONY A DIV'y KTÓRYCH WARTO¦Ć JEST WIĘKSZA OD WARTO¦CI "ui.value" ZOSTAŁY UKRYWANE CZYLI (.show(); i .hide();).
  4. }



Załóżmy że warto¶ć "ui.value" jest równa "52%" to wy¶wietlamy tylko te div'y:
  1. <div class="moduleAccess" dir="47">Jaki¶ moduł - 47%</div>
  2. <div class="moduleAccess" dir="52">Jaki¶ moduł - 52%</div>
  3. <div class="moduleAccess" dir="31">Jaki¶ moduł - 31%</div>
  4. <div class="moduleAccess" dir="52">Jaki¶ moduł - 52%</div>
  5. <div class="moduleAccess" dir="15">Jaki¶ moduł - 15%</div>
  6. <div class="moduleAccess" dir="31">Jaki¶ moduł - 31%</div>


Ja¶niejsze ?
Kostek.88
Zaraz... podalem Ci html... a powinno byc append

  1. $('#div_nr2').append('<div class="moduleAccess" rel=" ' + ui.value + ' ">Jaki¶ moduł - ' + ui.value + ' %</div>');



  1. if(ui.value == 0) {
  2. document.getElementById("amount").innerHTML = "zablokowany";
  3. } else {
  4. if(ui.value < 50) {
  5. $('#div_nr2').append('<div class="moduleAccess" rel=" ' + ui.value + ' ">Jaki¶ moduł - ' + ui.value + ' %</div>');
  6. }
  7. document.getElementById("amount").innerHTML = ui.value+"%";
  8. }


A po co chcesz ukrywac i pokazywac DIVy? Nie lepiej skryptem decydowac, czy maja byc po prostu TWORZONE albo NIE?
peja1990
Kurcze, ale tutaj nie chodzi o generowanie kodu html w postaci :: <div class="moduleAccess" dir="47">Jaki¶ moduł - 47%</div>


To jest HTML, który jest stabilny, a JS ma go tylko wy¶wietlać lub chować:
Kod
<div class="moduleAccess" dir="47">Jaki¶ moduł - 47%</div>
<div class="moduleAccess" dir="100">Jaki¶ moduł - 100%</div>
<div class="moduleAccess" dir="52">Jaki¶ moduł - 52%</div>
<div class="moduleAccess" dir="31">Jaki¶ moduł - 31%</div>
<div class="moduleAccess" dir="100">Jaki¶ moduł - 100%</div>
<div class="moduleAccess" dir="52">Jaki¶ moduł - 52%</div>
<div class="moduleAccess" dir="75">Jaki¶ moduł - 75%</div>
<div class="moduleAccess" dir="61">Jaki¶ moduł - 61%</div>
<div class="moduleAccess" dir="15">Jaki¶ moduł - 15%</div>
<div class="moduleAccess" dir="99">Jaki¶ moduł - 99%</div>
<div class="moduleAccess" dir="31">Jaki¶ moduł - 31%</div>
Kostek.88
http://jsfiddle.net/Qbbwp/ questionmark.gif


EDIT: Sorry, update http://jsfiddle.net/Qbbwp/1/ Nieprzytomny dzis jestem tongue.gif Oczywiscie zamiast < mozesz dac <=
peja1990
DOKŁADNIE O TO MI CHODZIŁO exclamation.gif!!!!!!!!!!!!!!!!!!
DZIĘKI WIELKIE exclamation.gif!!!!!!!!!!!!!!!
Gdybym mógł to dałbym Ci mistrzu milion razy POMÓGŁ exclamation.gif!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Jeszcze raz WIELKIE DZIĘKI exclamation.gif!!!!
Pozdrawiam smile.gif
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.