Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [php] Pasek postępu (oceny)
Forum PHP.pl > Forum > PHP
GreenGo
Witam.
Wie może ktoś jak zrobić aby pasek oceny rysował się automatycznie w zależności od jej wysokości ? Czyli np.
użytkownicy ocenili artykuł na np. 8.46 i chodzi o to aby pasek wyświetlający tą ocene wypełnił się kolorkiem do punku 8.46 biorąc za max 10 smile.gif

Z góry dzięki za pomoc smile.gif
batman
Rysujesz sobie tabelę. Tabela ma szerokość (lub wysokość) 10 (w pikselach) razy jakaś tam wartość (nie wiem jak duży ma być pasek). Następnie za pomocą css ustawiasz kolor tła dla komórki i masz ładny pasek winksmiley.jpg
My4tic
Cytat(batman @ 17.08.2006, 21:02 ) *
Rysujesz sobie tabelę. Tabela ma szerokość (lub wysokość) 10 (w pikselach) razy jakaś tam wartość (nie wiem jak duży ma być pasek). Następnie za pomocą css ustawiasz kolor tła dla komórki i masz ładny pasek winksmiley.jpg


Troche dziwny pomysł ;-)

A wracając do tematu to nie ma sensu bawić sie w coś co będzie rysowało obrazki z taką dokładnością. Jeśli jednak chcesz to:

http://pl2.php.net/manual/pl/ref.image.php

...jednak radziłbym zrobić oceny artykułu w postaci jakiś gwaizdek lub nawet słupka ale nie z taką dokładnością. Zrob sobie jakiś gif na 10px wysokości i w zależności czy ocena znajduje sie w przedziałach wsatawaisz odpowiednią ilość gwiazdek czy czego tam chcesz np.:

ocena < 0 - zero gwiazdek
0 < ocena < 1 - jedna gwiazdka
1 < ocena < 2 - dwie gwiazdki

..itd.
batman
Co do gd to nie polecam. Ma duże możliwości ale zamula i wymaga modułu, który nie zawsze jest dostepny u dostawców.
A odnośnie gwiazdek. Jest to pomysł tak samo funkcjonalny jak słupki z jednym wyjątkiem. W przykładzie podanym przez My4tic trzeba będzie napisać trochę if-ów. Po co zaśmiecać kod kolejnymi warunkami?
GreenGo
gwiazdki miałem do tej pory i właśnie ze względu na czytelność kodu chce to zmienić na taki pasek. Jeśli nie ma innej możliwoście to pewnie skończy się na poszerzającym się obrazku.
Prph
Mozna zrobic tak:

  1. <?php
  2. $iOcena = baza_danych_podaj_ocene();
  3.  
  4. for($i = 1; $i <= $iOcena; $i++)
  5. echo '<gwiazdka>';
  6. ?>


Adrian.
php programmer
Cytat
Troche dziwny pomysł ;-)

Właśnie bardzo dobry pomysł,
użycie CSS dobrze nadaje się do takiego prostego wyksreu
natomiast użycie GD jest w tym przypadku to troche przesada
(z czołgiem na zająca)

na samy dole tej strony przykład
jest użyte właśnie CSS do zrobienia wykresu
tiraeth
Na dole jest nie tyle CSS to znacznik <img> ze zmienioną szerokością.... klik

Przykład CSS (działa tylko na Firefoxie i Operze):
  1. <style type="text/css">
  2. div.shadows {
  3. margin-top : 1px;
  4. margin-left : 1px;
  5. width : 454px;
  6. padding-right : 1px;
  7. padding-bottom : 1px;
  8. background : #c9c9c9;
  9. -moz-border-radius : 4;
  10. border-radius : 4;
  11. }
  12.  
  13. div.shadows>div.ProgressBar {
  14. top : -1px;
  15. left : -1px;
  16. width : 450px;
  17. height: 11px;
  18. background : #ffffff;
  19. border : solid 1px #000000;
  20. padding : 1px;
  21. position : relative;
  22. -moz-border-radius : 4;
  23. border-radius : 4;
  24. }
  25.  
  26. div.shadows>div.ProgressBar div.percent {
  27. position : absolute;
  28. top : 0;
  29. width : 100%;
  30. margin : auto 0;
  31. background : 0;
  32. text-align : center;
  33. vertical-align : middle;
  34. font-size : 10px;
  35. font-weight : bold;
  36. font-family : Arial, sans-serif;
  37. font-color : #434343;
  38. }
  39.  
  40. div.shadows>div.ProgressBar div.progress {
  41. display : block;
  42. width : 75%;
  43. height : 100%;
  44. background : #ff0000;
  45. -moz-border-radius : 3;
  46. border-radius : 3;
  47. }
  48.  
  49. <div class="shadows">
  50. <div class="ProgressBar">
  51. <div class="progress"></div>
  52. <div class="percent">75%</div>
  53. </div>
  54. </div>
LBO
Cytat(batman @ 18.08.2006, 00:04 ) *
Co do gd to nie polecam. Ma duże możliwości ale zamula i wymaga modułu, który nie zawsze jest dostepny u dostawców.

A o cache nie słyszałeś?

Poza tym mozna gwiazdki wygenerować (stworzyć w PSP, PS) samemu, będzie to raptem z 10 gifów (jeżeli będą połowki gwiazdek).
GreenGo
Ok zdecydowałem się na CSS ale coś nie działa :/

Mama zmienną:
  1. <?php
  2. $width = $ocena2*10;
  3. ?>

a następnie kod wyświetlający pasek:
  1. <div style=\"background-color:#000000; height:10px; width:100px; \">
  2. <div style=\"width:$width px; height:10px; background-color:#3C8EA6;\"></div>
  3. </div>

I nie wiem dla czego ale zawsze zamalowuje mi cały pasek :/
danek
Zrób coś takiego:
  1. <?
  2. $pasek=$ocena*2; //caly pasek bedzie mial 20 px
  3. $reszta=20-$pasek;
  4. echo'<table><tr><td width='.$pasek.'></td><td width='.$reszta.'></td></tr></table>';
  5. ?>

A po ocenie 8 otrzymasz:
  1. <table><tr><td width=16></td><td width=4></td></tr></table>

Proste...
A w komórkach tabeli zrób odwołanie do klas w CSS
My4tic
Cytat(php programmer @ 18.08.2006, 08:59 ) *
Właśnie bardzo dobry pomysł


Mylisz sie - tabele nie słuzą do takich rzeczy dloatego nie jest to dobre rozwiązanie. Przykład podany przez tiraeth jest juz duzo lepszy. Chociaz i tak moim zdaniem lepiej zrobić sobie gwiazdki i jakąś funkcje do tego. Na pewno kod bedzie bardziej przejrzysty niz wtedy gdy bedzie w nim pełno tabelek.

Wywołasz sobei funkcje ProgressBar($ocena), funkcja sprawdzi jaki obrazek nalezy wstawic i taki wysle.

Zamiast:

  1. <table><tr><td width=16></td><td width=4></td></tr></table>


bedziesz miał jedno:

  1. <img>


Pzdr
tiraeth
Udało mi się zrobić alternatywny styl dla InternetExplorera smile.gif Teraz w trzech przeglądarkach pasek postępu wygląda w miarę podobnie biggrin.gif

http://phpfi.com/142501
phpion
A mi sie podobaja takie proste paski postepu:
llllllllllllllllllllllllllllll 40%
cos takiego smile.gif wystarczy uzyc dwukrotnie str_repeat() wypisujacego literke 'l' (male L) i po sprawie.
Mozesz tez uzyc zwyklego gifa o wymiarach 1x1 px i ustawic wysokosc stala np. na 20px a szerokosc wstawiac dynamicznie (np. dla 40% width: 40px;)
Albo system z gwiazdkami analogicznie do pierwszego podanego przeze mnie: np. 4 razy wyswietlasz gwiazdki zakolorowane, po nich 6 razy gwiazdki puste (dla 40%).
slawek_master
@phpion.com efektowne i efektywne tongue.gif mi sie tam podoba:)
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.