webrebel html css javascript laravel oop php mysql wordpress kurz

Hviezdičkové hodnotenie cez jQuery [video]

napísal , 1 Oct 2010 [ jQuery Tutoriály Videá ]

Kód, resp. jeho tvorba sa zvykne blbo vysvetľovať v textovej podobe, preto sa o to občas pokúsime formou videa. A keďže opakovanie je matka múdrosti, na začiatku videa si vypočujete to, čo ste práve prečítali :)

V tomto prvom brm.sk video tutoriále krok za krokom ukážem, ako pomocou jQuery spraviť hviezdičkové hodnotenie, ktoré sa používa v našich recenziách.

"Pre najlepšiu kvalitu zvoľte fullscreen HD.", odkázal Captain Obvious.
...

Yep, mohlo by sa zdať, že je to obyčajných 5 obrázkov, ktoré vždy manuálne pridám na koniec recenzie. Na to som ale moc lenivý. Mohlo by sa tiež zdať, že to bude nejaký wordpress plugin. To by bol ale zbytočný overkill. Pravda sa skrýva inde (vo videu ;) ).

Kód si samozrejme môžete stiahnuť a robiť s ním čo len chcete. Enjoy:

var review = $('.hodnotenie');
if (review.length > 0)
{
  var text = review.text().replace(',', '.').split('/'),
    rating = $.trim(text[0]),
    max = $.trim(text[1]),
    half = (rating.toString().indexOf('.') > - 1) ? true : false,
    star = '',
    html = '';
  
  for (var i = 0, floored = Math.floor(rating); i < max; i++)
  {
    if (i < floored) star = 'full_star';
    else if (half) { star = 'half_star'; half = false; }
    else star = 'no_star';
    
    html += '<img src="'+star+'.png" alt="'+star+'">';
  }
  
  review.html( html ).attr('title', rating+'/'+max);
}
napísal , 1 Oct 2010

7 komentárov

komentuj
  1. Andrej Herich [ Piatok 1.10.2010, 20:15 ]

    Prečo

    half = (rating.toString().indexOf('.') > - 1) ? true : false

    a nie iba

    half = rating.indexOf('.') > - 1

    ?

    Just curious.

  2. yablko [ Piatok 1.10.2010, 22:02 ]

    keď som písal ten riadok napadlo ma "hej, toto vyzerá ako miesto, kde by sa dal spomenúť ternárny operátor" :)

    .toString() je samozrejme zbytočné, nechal som sa uniesť tým, že to vyzeralo ako číslo :) keď sa človek má sústrediť na písanie kódu a ešte aj rozprávanie, tak sa také veci stávajú :)

    ale keďže to má byť mierené skôr na tých začínajúcich, tak to nevadí - aspoň sme si ukázali ďalšiu metódu :)

  3. xxx [ Štvrtok 7.10.2010, 01:04 ]

    A co ak je niekto az tak nerozhodny ze potrebuje stvrtinove hodnotenie? :-D :-P

  4. yablko [ Štvrtok 7.10.2010, 12:37 ]

    možno by nemal písať recenzie :)

  5. anonym [ Streda 12.1.2011, 17:17 ]

    Si dobrý programator ..
    fakt obdiv :)

  6. Buri [ Nedeľa 13.2.2011, 23:01 ]

    to xxx: Tak buď si rozšíriš podmienku alebo lepšie je dať dva div-y do seba, prvy co je vonku, do neho dat sive hviezdicky, a do druheho co je v tom, zlte. A už iba editovať šírku toho divu s žltými hviezdičkami :D
    Tak neviem ako by to bolo po validnej stranke ale pre programatora je to lepsie no :D

  7. FrostFire [ Nedeľa 8.7.2012, 22:15 ]

    Nefunguje :(