jQuery - jak na událost onShow

JQuery samo o sobě má spoustu užitečných událostí, ale může se stát, že přeci jen potřebujete ještě něco jiného. To se mi právě stalo. Potřeboval jsem, aby se určitá funkce provedla až poté, co se prvek zobrazí - nemohl jsem ji provést po načtení stránky, protože prvek je skrytý a po zobrazení má jinou pozici. Proto jsem na internetu začal hledat, jestli někdo už tenhle problém neřešil.

A našel jsem to rychle. Název události: onShow je výstižný a přesně s tím radili na stackoverflow.com. Pro mě, byl nejdůležitější přesně tento komentář a kód, který uživatel vytvořil:

$.fn.extend({
    onShow: function(callback, unbind){
      return this.each(function(){
        var obj = this;
        var bindopt = (unbind==undefined)?true:unbind;
        if($.isFunction(callback)){
          if($(this).is(':hidden')){
            var checkVis = function(){
              if($(obj).is(':visible')){
                callback.call();
                if(bindopt){
                  $('body').unbind('click keyup keydown', checkVis);
                }
              }                        
            }
            $('body').bind('click keyup keydown', checkVis);
          }
          else{
            callback.call();
          }
        }
      });
    }
});

Stačí, když tento kód nakopírujete do vlastního souboru s JavaScriptem a můžete začít používat událost onShow:

$('#element').onShow(function(){
 alert('byl jsem zobrazen :)');
});

Já jsem ale potřeboval funkci ještě trochu upravit. Do callback (návratové funkce) se nevkládal objekt, na který je událost spuštěna, ale to jsem já potřeboval. Událost onShow jsem totiž potřeboval spouštět na více prvků najednou. A tak jsem začal zkoumat kód.

Callback funkce se volá funkcí .call(), ale i když jsem jí předal parametr obj a stejný jsem vložil i do callback funkce, hlásilo mi to v alertu undefined. Když jsem se na internetu podíval po funkci .call(), tak jsem naštěstí narazil na článek Function.apply and Function.call in JavaScript.

Díky článku vím, že pokud do callback funkce zapíšu parametr, tak ten musí být v zápisu funkce .call() na druhém místě. Na prvním místo v parametrech ve funkci .call() se dává obsah, ke kterému budeme mít přísup jako objekt this. Takže stačilo, abych ponechal prázdný seznam parametrů u callback funkce, do parametru .call() funkce jsem vložil obj a je to vyřešené.

Úprava události:

callback.call(obj);

Úpravu je nutné provést u obou výskytů funkce .call

Zdroje:

• http://stackoverflow.com/questions/1432111/how-to-write-onshow...
• http://odetocode.com/blogs/scott/archive/2007/07/05/function-apply...