Knihovna jQuery a skvělá rozšíření

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ář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *