3

Estou fazendo um plugin que em determinada etapa executa uma função.

Exemplo:

<button class="btn btn-warning btn-lg" id="act"> Action </button>

(function($) {
  $.fn.foo = function(options) {
    var opts = $.extend({}, $.fn.foo.defaults, options);

    this.init = function() {
      this.css('background', opts.background);
      this.on(opts.action[0],opts.action[1]);
    };
    this.init();
    return this;
  };


  $.fn.foo.defaults = {
    action: ["click", "bar()"],
    background: "black"
  };

}(jQuery));

function bar() {
  console.log('hello,world');
}

$("#act").foo();

Quero executar uma função forá do escopo do plugin, um exemplo e se eu declarar $("#act").foo({action:["dblclick","bar()"]});, como posso executa-la dentro do meu plugin? tentei isto utilizando o new Function(opts.action[1]) também, fala que a função é indefinida.

2 Respostas 2

3

Sem utilizar o método on, atribuindo o evento usando atributo onclick do input.

(function($) {
  $.fn.foo = function(options) {
    var opts = $.extend({}, $.fn.foo.defaults, options);

    this.init = function() {
      this.css('background', opts.background);
      this.attr(opts.action[0],opts.action[1]);
    };
    this.init();
    return this;
  };


  $.fn.foo.defaults = {
    action: ["onclick", "bar()"],
    background: "#ccc"
  };

}(jQuery));

function bar() {
  alert("Hello world")
}

$("#act").foo();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-warning btn-lg" id="act"> Action </button>

2
  • 1
    +1, Com attr é legal não sabia :) acho que essa é a forma mais legal de se fazer: jsfiddle.net/gabrielr47/sw1d41j6 Commented 2/05/2016 às 18:43
  • Sim, a diferença é que ao invés de usar o nome do evento jQuery("click"), você utiliza o nome do atributo do input. Com attr você consegue setar qualquer propriedade do elemento.
    – Laerte
    Commented 2/05/2016 às 18:45
2

Basta você utilizá-la como um callback. Para isso você deve passar a função como função em si e não como string, porque talvez ela possa não ser conhecida dentro do escopo do seu plugin.

Exemplificando:

$.fn.foo = function(callback){ 
  $(this).html(callback()); //uso o retorno do callback aqui...
  console.log(callback()); //...e aqui também
}

function bar(){ //Aqui defino da função bar
  return "Hello, world";
}

$("#teste").foo(bar); //Aqui passo a função bar como um callback
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="teste"> </div>

1
  • @GabrielRodrigues A lógica seria a mesma, passar o evento como string e a função como callback. Olhe o exemplo modificado nesse fiddle: jsfiddle.net/1m4yhqqv
    – LF Ziron
    Commented 2/05/2016 às 18:54

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .