jQuery értékelő plugin fejlesztése Font Awesome ikonokkal

A webes űrlapoknál gyakran használunk JavaScript alapú vezérlőket, hogy növeljük a használhatóságot és ezzel a felhasználói élményt. A tutorialban az értékelések megadásához egy jQuery alapú vezérlőt készítünk, amely Font Awesome ikonokat használ.


Értékelő rendszer fejlesztésénél sok esetben az űrlap részét képzi egy számszerű értékmegadás, amelyet egy előre meghatározott tartományból választ ki a felhasználó. A legegyszerűbb megoldást egy legördülő menü jelenti, amit feltöltünk a kiválasztható értékekkel, és az űrlap elküldése után szerver oldalon dolgozunk fel. A hátránya viszont, hogy a felhasználó számára kényelmetlen, mert két kattintással jut el az eredményhez, sőt néhány esetben görgetnie is kell a listában.

Az optimális megoldást így egy jQuery bővítmény létrehozása jelenti, amely elrejti a legördülő menüt és az elemei alapján generál egy ikonokból álló sávot. Az ikonokra kattintva a bővítmény beállítja a legördülő menü értékét is, így megtartva a szerver oldali feldogozás lehetőségét.

Plugin létrehozása

Elsőként a korábbi cikk alapján készítsünk saját keretfájlt vagy töltsük le a hozzá tartozó mellékletet. A letöltött vagy elkészített fájl neve legyen jquery.rating-control.js és nyissuk meg a további lépésekhez.

Plugin név beállítása

A bővítmény nevének átírásához keressük meg a pluginName változót, és az értéke legyen ratingControl.

var pluginName = 'ratingControl';

Alapértelmezett paraméterek beállítása

Három paraméterre lesz szükségünk, az első a bővítményt tartalmazó elem osztálya, a második az üres csillag ikon osztálya és a harmadik a teljes csillag ikon osztálya. A paraméterek beállításához keressük meg a defaults változót, majd adjuk hozzá az alábbiakat:

var defaults = {
    containerClass: 'rating-control',
    emptyStarClass: 'fa fa-star-o',
    starClass: 'fa fa-star'
};

Plugin implementálása

Folytassuk a Plugin osztály metódusainak implementálásával a Plugin.prototype részen belül.

Init metódus

Az inicializáláskor elrejtjük a kiválasztott legördülő menüt, majd közvetlenül alá létrehozunk egy tárolóelemet a paramétereknél megadott osztállyal. Ezután az elrejtett legördülő menü opciói alapján listaelemeket és ezen belülre linkeket generálunk, amelyek lényegében az értékeléshez használt ikonok lesznek. A linkekhez rendelt mouseenter és mouseleave esemény a csillagok ideiglenes kijelölését, majd visszaállítását valósítja meg, amíg a felhasználó az egeret az ikonok fölött mozgatja. Kattintás hatására beállítja a háttérben lévő legördülő menü értékét, és így már a kijelölés is állandó marad.

Tipp! Az opciók feldolgozásánál az elnevezés hozzáadódik a linkek title attribútumához.

// ...
init: function() {
    var self = this;

    this.$element.hide();
    this.$container = $(document.createElement('ul'))
        .attr({
            class: this.settings.containerClass
        })
        .insertAfter(this.$element);
    $('option:not([value=""])', this.$element).each(function() {
        var $this = $(this);
        var val = $this.val();

        $(document.createElement('li'))
            .append($(document.createElement('a'))
                .attr({
                    href: '#',
                    title: $this.text()
                })
                .append($(document.createElement('i'))
                    .attr({
                        class: self.settings.emptyStarClass
                    }))
                .on('mouseenter.' + self._name, function() {
                    self._highlight(val);
                })
                .on('mouseleave.' + self._name, function() {
                    self._highlight(self.$element.val());
                })
                .on('click.' + self._name, function(e) {
                    self.$element.val(val);
                    self._highlight(val);
                    e.preventDefault();
                }))
            .data('val', val)
            .appendTo(self.$container);
    });
    self._highlight(self.$element.val());
}
// ...

Destroy metódus

A bővítmény megszüntetésénél töröljük a tároló elemet, majd megjelenítjük az eredeti legördülő menüt és eltávolítjuk a hozzárendelt példányt.

// ...
destroy: function() {
    this.$container.remove();
    this.$element.show().removeData('plugin_' + this._name);
}
// ...

Highlight metódus

Hozzuk létre a _highlight() metódust, ami a _ előtag miatt privát láthatósággal rendelkezik. A metódus végigjárja a listaelemeket, és addig cseréli ki az ikonokat, amíg el nem ér a val paraméterben megadott értékig. Az összehasonlítást az inicializáláskor a listaelemekhez rendelt adat attribútum segítségével végzi.

// ...
_highlight: function(val) {
    var self = this;
    var highlight = val ? true : false;

    $('li', this.$container).each(function() {
        var $this = $(this);

        if (highlight) {
            $('i', $this)
                .removeClass(self.settings.emptyStarClass)
                .addClass(self.settings.starClass);
            if ($this.data('val') === val) {
                highlight = false;
            }
        } else {
            $('i', $this)
                .removeClass(self.settings.starClass)
                .addClass(self.settings.emptyStarClass);
        }
    });
}
// ...

Stíluslap létrehozása

Hozzunk létre egy jquery.rating-control.less fájlt, másoljuk bele következő kódrészletet és fordítsuk le.

Tipp! Ha nincs telepítve LESS fordító, készítsünk egy jquery.rating-control.css fájlt és másoljuk bele a lentebbi kódrészletet.

LESS

@rating-control-color: #f39c12;

.rating-control {
    margin: 0 -1px;
    padding: 0;
    list-style: none;

    &:before,
        &:after {
        content: " ";
        display: table;
    }
    &:after {
        clear: both;
    }
    li {
        margin: 0;
        padding: 0;
        float: left;

        a {
            color: @rating-control-color;
            padding: 0 1px;
        }
    }
}

CSS

.rating-control {
  margin: 0 -1px;
  padding: 0;
  list-style: none;
}
.rating-control:before,
.rating-control:after {
  content: " ";
  display: table;
}
.rating-control:after {
  clear: both;
}
.rating-control li {
  margin: 0;
  padding: 0;
  float: left;
}
.rating-control li a {
  color: #f39c12;
  padding: 0 1px;
}

Plugin használata

A bővítmény használatához először töltsük be a függőségeket, aztán készítsük el a legördülő menü struktúráját majd végül futtassuk megfelelő paraméterezéssel.

Tipp! A haramdik féltől származó függőségekhez CDN (Content Delivery Network) linkeket használtam, de lokális változatra is kicserélhető.

Stíluslapok betöltése

A HTML dokumentum fejlécébe másoljuk be az alábbi kódrészletet:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" type="text/css" rel="stylesheet">
<link href="jquery.rating-control.css" type="text/css" rel="stylesheet">

JavaScript állományok betöltése

A HTML dokumentum fejlécébe másoljuk be az alábbi kódrészletet:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js" type="text/javascript"></script>
<script src="jquery.rating-control.js" type="text/javascript"></script>

1. Példa: Alapértelmezett működés

Készítsük el a legördülő menü HTML struktúráját a következő kódrészlettel:

<select id="rating-control">
    <option value="">Értékelj!</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

Ezután futtassuk le a az alábbi JavaScript kódrészletet az elem alatt vagy a HTML dokumentum fejlécében a $(document).ready() metódus használatával:

$('#rating-control').ratingControl();

2. Példa: Kiválasztott elem beállítása

A legördülő menü HTML struktúrájában válasszuk ki az alapértelmezett opciót:

<select id="rating-control">
    <option value="">Értékelj!</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3" selected="selected">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

3. Példa: Értékelő ikon cseréje

A JavaScript kódrészletet bővítsük ki egy paraméterként átadott JSON objektummal, amely az ikonok beállításait tartalmazza:

$('#rating-control').ratingControl({
    emptyStarClass: 'fa fa-heart-o',
    starClass: 'fa fa-heart'
});