Pro svůj již běžící zajímavý projekt Vyluštit.cz jsem chtěl uživatelům nabídnout co nejjednodušší front-end. Vlastně vůbec nerozlišovat front-end a back-end. Důvod? Tím je cílová skupina, luštitelů křížovek, osmisměrek, sudoku, kvizů a všech možných soutěží. Takže nejlépe úpravy správcům na kliknutí, hlasování hvězdičkami, prostě rychle a jednoduše. To všechno se bez javascriptu neobejde.
Přiznám se, že jsem celkem donedávna nepatřil k příznivcům javascriptových knihoven a o jQuery jsem jen věděl, že existuje. Potřeba používání AJAXu a všech možných kontrol mě donutila jQuery vyzkoušet. Nelituju! Samotné jQuery mi ušetřilo spoustu času a nervů, protože práce s AJAXem i DOMem je maličkostí. Dalším plusem je možnost rozšíření (pluginů):
Skvělý plugin RateIt – hvězdičkové hodnocení
Pro potřebu hodnocení soutěží a to nejlépe graficky bez nutného opětovného načítání stránky po hlasování. Tento plugin to splňuje dokonale a nastavení je velmi jednoduché. Podle obrázku řádek hodnocení vypadá v kódu takto:
<div id="topic-polls">Hodnocení: <div class="rateit"></div> • Hlasů: <span id="popularity-counter">0</span>
Jak se to spustí a jak nabinduju AJAX po hodnocení:
$jQuery('.rateit').rateit({ step: 1, ispreset: true, value: 0 });
$jQuery('.rateit').bind('rated', function (e){
$jQuery.ajax({
url: 'url se skriptem',
data: {
value: $jQuery('.rateit').rateit('value')
// dalsi podle potreby....
},
type: 'POST',
success: function(){
// v pripade uspechu jsem si pripocetl 1 u hlasu puvodniho hodnoceni a dopocetl celkove hodnoceni
popularity_counter++;
$jQuery('#popularity-counter').html(popularity_counter);
popularity += $jQuery('.rateit').rateit('value');
$jQuery('.rateit').attr('title', 'Hodnotil si');
$jQuery('.rateit').rateit('value', popularity / popularity_counter);
$jQuery('.rateit').rateit('readonly', true);
}
});
});
Abych to uživatelům usnadnil a nemusel nikdo přemýšlet jestli více hvězdiček znamená dobře nebo špatně. Doplnil jsem navíc ToolTipy:
var tooltipvalues = ['velmi špatná', 'špatná', 'průměrná', 'dobrá', 'výborná'];
$jQuery('.rateit').bind('over', function (event, value){ $jQuery(this).attr('title', tooltipvalues[value-1]); });
Stránky pluginu RateIt zde. Příklady použití pluginu najdete zde. No není to skvělé? Určitě je a teď přejdu k božímu… 🙂
Boží plugin Jeditable – in place editace
Velice příjemná věcička, která umožní upravovat obsah, bez nutnosti přecházet na jinou stránku. Jen poklepu na daném textu a on se změní do možnosti úprav. Pro představu:
Jak je z obrázku vidět, text je v trošku jiném kódu než původní. Proto považuji tento plugin za boží ;-). Text formátuji do HTML pomocí Texy, ale když jej chci nabídnou k úpravě, měl by být neformátovaný. Jeditable mi umožňuje AJAXové načtení obsahu před úpravou a po úpravě opět za pomoci AJAXu jej uložit :-). A to za pomoci několika řádků kódu:
$jQuery('.edit-content div').editable('url kam ulozit',{
event: 'dblclick',
loadurl: 'url odkud vzit obsah, je-li jiny od stavajiciho',
type: 'textarea',
getDataType: 'json',
width: 450,
height: 300,
placeholder: 'pokud je obsah prazdny, zobrazi se tento text',
// Asi netreba vysvetlovat indikator prace
indicator: 'pracuji...',
tooltip: 'Klikni (dvojklik) pro změnu...',
onblur: 'submit',
submitdata:{
token: 'treba token proti CSRF'
},
callback: function(response, settings){
// callback po provedeni ... zde obycejne ruzne skryvam nebo zobrazuji informaci o uspechu
}
});
Díky tomuto pluginu se úprava obsahu opravdu stává příjemnou a o to mi přece ve Vyluštit.cz šlo.
Stránky pluginu Jeditable zde. Příklady použití pluginu najdete zde.
Napsat komentář