jQuery plugins - jQuery Star Rating Plugin
szept 08

jQuery Star Rating Plugin

Szavazó plugin

Verzió: 3.13
Kiadás dátuma: 2009/03/26
Fejlesztő: fyneworks
Liszensz: MIT, GPL
  • 1608
  • 6287
  • 0
  • -

Bevezető

A plugin a rádió gombok csoportjából alkot egy ún. 'star rating' szavazó felületet:
a hagyományos rádió gombot csillagra cseréli - amelyet tetszés szerinti grafikára cserélhetünk, ha úgy kívánjuk.

Jellemzők

  • egyszerű, könnyű kezelhetőség
  • tiltható/engedélyezhető csillagok
  • csillagok tetszőleges számú felosztása
  • tesztelve a jQuery 1.4-es verziójával
  • kompatibilitás: Internet Explorer 6+, Firefox, Google Chrome, Opera, Safari

Implementálás

CSS

            <link type="text/css" rel="stylesheet" href="jquery.rating.css" media="screen" />
          

JavaScript

Lehetőség van a csillagokat nem egy egységként kezelni, hanem részekre felosztani. Ebben az esetben a MetaData.js plugin-ra is szükség van (további részletek a bemutató oldalon):

            <script type="text/javascript" src="js/jquery.js"></script>
            <script type="text/javascript" src="js/jquery.rating.js"></script>
            <script type="text/javascript" src="js/jquery.MetaData.js"></script>
          

Deklaráció

Alapesetben nincs szükség külön deklarációra, a plugin minden rádió gombra kifejti hatását, melyeknek a .star osztályt definiáljuk stílusként. Amennyiben ezt szeretnénk felülbírálni, szükség van deklarációra:

            $(document).ready(function() {
              $('input.myRadio').rating();
            });
          

Használat

Mint említettem, alapesetben a használat igen egyszerű: sima rádió gombokat hozunk létre, amelyeknek alapesetben a .star osztályt adjuk stílusként, illetve az összetartozó gombokat a name attribútummal tudjuk összekötni:

            <input name="example-1" type="radio" class="star" disabled="disabled"/>
            <input name="example-1" type="radio" class="star" disabled="disabled"/>
            <input name="example-1" type="radio" class="star" disabled="disabled" checked="checked"/>
            <input name="example-1" type="radio" class="star" disabled="disabled"/>
            <input name="example-1" type="radio" class="star" disabled="disabled"/>
          

A példából is látható, hogy akár csak a hagyományos rádió gomboknál, itt is használhatjuk a checked és a disabled attribútumokat.

Teljes paraméterlista

  • select: alapértelmezett jelölés beállítása javascript-en keresztül - egyenértékű a checked attribútum használatával (pozitív egész szám)
  • readOnly: az elemek engedélyezése/tiltása (true | false)
  • disable: a readOnly paraméterrel majdnem azonos, csak itt tiltás esetén a beállított érték is érvényét veszti az űrlap elküldésekor - egyenértékű a disabled attribútum használatával
    (enable | disable)
  • split: a csillagok felosztása meghatározott számú részre (pozitív egész szám)
  • half: a csillagok felosztása két részre - egyenértékű a split:2 használatával (true | false)
  • cancel: a törlés gomb title attribútuma (alapértelmezett: 'Cancel Rating')
  • cancelValue: az az érték, amely elküldésre kerül a törlés gombra való klikkelés esetén
  • starWidth: a csillag képének szélessége (alapértelmezett: 16)
  • required: a törlés gomb letiltására szolgál, ezáltal a látogató rá van kényszerítve, hogy csak valós értékre tudjon szavazni (true | false)(alapértelmezett: false)
  • focus: függvény meghívása, ha a csillagokon van a fókusz
  • blur: függvény meghívása, ha a csillagokon van a fókusz
  • callback: függvény meghívása, ha klikkeltek a csillagokra

Tippek

  • A callback függvény segítségével a szavazást követően automatikusan el lehet küldeni az űrlapot feldolgozásra: ehhez a this.form.submit() metódust kell meghívnunk. Ajax esetén: $(this.form).ajaxSubmit()
                    $('input.example').rating({
                      callback: function(value, link){
                        this.form.submit();
                      }
                    });