Plug-in psRel para jQuery! Sugestões e ajuda!

PyetroSafe · Março 12, 2012

Escrevi este conteúdo em meu blog: http://pysafe.blogspot.com/, mas vou remontar aqui.

Espero que a galera com mais conhecimento possa sugerir melhorias e novidades.

Agradecimentos ao Leo Balter, e outros que escreveram sobre plugins pra jQuery, que me ajudou muito desenvolver este...

Bom, irei demonstrar o plug-in que eu estive criando para jQuery. Não é nada demais mas pode ajudar alguém que se interesse pelo funcionamento dele. Mais do que tudo o desenvolvimento deste plug-in foi para mim um baita aprendizado na construção de funções para jQuery.

Bom chega de lero lero, vamos ao que interessa. Este plug-in apelidado de psRel, sendo Rel da propriedade rel dos elementos que uso como base deste plug-in. Eu tentei criar algo para diminuir a construção de código em javascript ecrevendo este código direto no elemento.

Vou exemplificar pelo evento onClick e onDblclick. Abaixo através da tag script, escrevo:

&lt;script>
$("p").click(function(){ alert('Olá Mundo !!!') }).dblclick(function(){ alert('outro alerta') });
</script>

Com o uso deste plugin para escrever o código anterior direto na propriedade rel do elemento, ficaria desta forma:

<p rel="Click=alert('Olá Mundo!!!')!!DblClick=alert('outro alerta')">

Muitos com certeza se perguntam da praticidade do código, do ganho, se tiver, de produtividade, outros sobre a "desorganização" ou "organização", enfim, cada um tem sua opinião própria e seus próprios métodos de criar um código. Para aqueles que estão se interessando pelo assunto, aqui vai o exemplo do que eu considero um ganho de produtividade e praticidade. Código de página teste sem o plugin:

<html>
<head>
<style type="text/css">
  .A {
    text-decoration: underline;
  }
  .A_over {
    background: #CCCCCC;
  }
  .B, .B_over {
    color: #FF0000;
  }
  .B_over {
    background: #CCCCCC;
    color: #0000FF;
  }
</style>
 &lt;script type="text/javascript" src="jquery-1.7.1.min.js"></script>
</head>
<body>
<ul>
  <li name="1" class="A"> TESTE 1 </li>
  <li name="2" class="A"> TESTE 2 </li>
  <li name="3" class="B"> TESTE 3 </li>
  <li name="4" class="B"> TESTE 4 </li>
  <li name="5"> TESTE 5 </li>
</ul>
<p id="a" class="A"> P Teste 1 </p>
<p id="b" class="B"> P Teste 2 </p>

 &lt;script>
  $("li[name=2],li[name=3],li[name=4],p").mouseover(function(){
    $(this).attr("class",$(this).attr("class")+"_over")
  }).mouseout(function(){
    $(this).attr("class",$(this).attr("class").replace("_over",""))
  });
  $("li[name=2]").click(function(){ alert("Clk Li 2")});
  $("li[name=3]").click(function(){ try{ eval("@#(;") }catch(e){console.log(e.message)} });
  $("li[name=4]").dblclick(function(){ alert("DbClk Li 4")});
  $("p#a").dblclick(function(){ try{ eval("ASJDI") }catch(e){console.log(e.message)}});
  $("p#b").click(function(){ $('body').append('<p>Hello</p>'); }).dblclick(function(){ alert("DbClk P b")});
 </script>

</body>
</html>

E agora a mesma página usando o plugin:

<html>
<head>
<style type="text/css">
  .A {
    text-decoration: underline;
  }
  .A_over {
    background: #CCCCCC;
  }
  .B, .B_over {
    color: #FF0000;
  }
  .B_over {
    background: #CCCCCC;
    color: #0000FF;
  }
</style>
 &lt;script type="text/javascript" src="jquery-1.7.1.min.js"></script>
 &lt;script type="text/javascript" src="jquery.psRel.min.js"></script>
</head>
<body>
<ul>
  <li name="1" rel="Class=A"> TESTE 1 </li>
  <li name="2" rel="ClassHover=A!!Click=alert('Clk');"> TESTE 2 </li>
  <li name="3" rel="ClassHover=B!!Click=@#(;"> TESTE 3 </li>
  <li name="4" rel="ClassHover=B!!DblClick=alert('DbClk Li 4')"> TESTE 4 </li>
  <li name="5"> TESTE 5 </li>
</ul>
<p id="a" rel="ClassHover=A!!DblClick=ASJDI"> P Teste 1 </p>
<p id="b" rel="ClassHover=B!!Click=$('body').append('<p>Hello</p>');!!DblClick=alert('DbClk P b')"> P Teste 2 </p>
</body>
</html>

Como podem ver adicionei o evento mouseover..mouseout para mudança de classe apenas com a chamada ClassHover no atributo rel. Se fosse usar esse mesmo evento em jQuery puro para muitos elementos, deveria chamá-lo várias vezes para cada elemento ou colocar estes inúmeros elementos (IDs, tags, classes) no seletor do jQuery. Pretendo ainda aperfeiçoar este plug-in e adicionar mais eventos e outras facilidades. Quem quiser contribuir será de muito bom grado. Comentém e deixem sua opinião e suas dicas do que melhorar ou adicionar... Bom o plugin fica abaixo as versões estudo e min. Plugin psRel min:

/* ----------------------------------------------------------------------------
  -*-*- JS Code document -*-*-
  Plugin: psRel
  Versão: 1.1
  Desenvolvedor: Pyetro Sabaraense Ferreira da Costa
  Descrição: este plugin é uma tentativa de facilitar ainda mais a escrita do código por inserir diretamente no html
    as opções desejadas de class com over, click, et...
---------------------------------------------------------------------------- */
(function(a){ a.cfgs=a.cfgs||{version:"1.1"}, a.cfgs.psRel={ conf:{ el:"",length:0,cls:null,clsOver:null,clk:null,trg:null}};function E(f,g,h){ try{eval(f)}catch(e){ var b=c=d="";b=h.attr("name");d=h.attr("id");b!=undefined?c=' Name: "'+b+'"':(d!=undefined?c=' Id: "'+d+'"':c="");console.log("Ev. "+g+" Error: \""+e.message+"\" on Elem.: \""+h.get(0).tagName+"\" Index:\""+h.index()+"\""+c+"")}}a.fn.psRel=function(o){ var defaults={ el:"",length:0,cls:null,clsOver:null,clk:null,trg:null};if(o){o=a.extend(a.cfgs.psRel.conf,o);}var retRel={ prc:function(el,prop){ s=a(el).attr("rel").split("!!");for(i in s){ t=s[i].split("=");for(j in t){ if(prop==t[0])return t[1];}}}, cls:function(el){ return this.prc(el,"Class")}, clsOver:function(el){ return this.prc(el,"ClassHover")}, click:function(el){ return this.prc(el,"Click")}, dblclick:function(el){ return this.prc(el,"DblClick")}};c=a.cfgs.psRel.conf;p=retRel;return this.filter(":[rel]").each(function(){ if(p.clsOver(a(this))||p.cls(a(this))){ a(this).attr("class", p.clsOver(a(this))||p.cls(a(this)));}if(p.click(a(this))){ a(this).click(function(e){ e.preventDefault();E(p.click(a(this)),"Click",a(this));});}if(p.dblclick(a(this))){ a(this).dblclick(function(e){ e.preventDefault();E(p.dblclick(a(this)),"DblClick",a(this));});}a(this).mouseover(function(){ if(p.clsOver(a(this)))a(this).attr("class", p.clsOver(a(this))+"_over")}).mouseout(function(){ if(p.clsOver(a(this)))a(this).attr("class", p.clsOver(a(this)).replace("_over",""))});})}})(jQuery);$(document).ready(function(){ $("[rel]").psRel();});
/* ------------------------------------------------------------------------ */

Plugin psRel modo estudo:

/* ----------------------------------------------------------------------------
  -*-*- JS Code document -*-*-
  Plugin: psRel
  Versão: 1.1
  Desenvolvedor: Pyetro Sabaraense Ferreira da Costa
  Descrição: este plugin é uma tentativa de facilitar ainda mais a escrita do código por inserir diretamente no html
    as opções desejadas de class com over, click, et...

  < 1.00 - Versões do desenvolvimento do código, sendo que a principal alteração foi de transformar o código
  que era uma simples chamada de uma "váriavel literal como objeto" para o plugin jQuery. Outra alteração foi a troca
  do separador ';;' por '!!' entre os eventos chamados no atributo "rel".
  1.0.0 - Terminado o plugin funcionando perfeitamente, com os eventos Click, DoubleClick, Class e ClassHover.
  1.0.1 - Adicionado o methodo dblclick;
  1.1.1 - Adicionado a função E para agrupamento da função try;

  Obs: Aqueles que quiserem podem participar do desenvolvimento e manutenção das versões do plugin.
  Podem ajudar finalizar o modo trigger. A parte comentada é um trecho retirado do plugin jQuery.tolls.overlay...
---------------------------------------------------------------------------- */
(function(a) {
  // Iniciação da configuração
  a.cfgs=a.cfgs||{version:"1.1"},
    a.cfgs.psRel={
      conf:{ el:"",length:0,cls:null,clsOver:null,clk:null,trg:null}
      // Trecho comentado é um esboço de criação de função passado nos eventos.
      /*, addTrigger:function(a,b,d){ c[a]=[b,d]} }*/ };
  /*var b=[],c={};
  a.cfgs.psRel.addEffect("default",function(b,c){
    var d=this.getConf(),e=a(window);
    d.fixed||(b.top+=e.scrollTop(),b.left+=e.scrollLeft()), b.position=d.fixed?"fixed":"absolute", this.getOverlay().css(b).fadeIn(d.speed,c)},
      function(a){ this.getOverlay().fadeOut(this.getConf().closeSpeed,a) }
  );*/
  // Função de validação do código passado por parametro nos eventos click, dblclick, etc. Caso código seja inválido, mostra-o no console.
  function E(f,g,h){
    try{eval(f)}catch(e){
      var b=c=d=""; b=h.attr("name"); d=h.attr("id"); b!=undefined?c=' Name: "'+b+'"':(d!=undefined?c=' Id: "'+d+'"':c="");
      console.log("Ev. "+g+" Error: \""+e.message+"\" on Elem.: \""+h.get(0).tagName+"\" Index:\""+h.index()+"\""+c+"")}
  }
  // Iniciação do plugin e definição de váriaveis
  a.fn.psRel = function(o){
    var defaults={ el:"",length:0,cls:null,clsOver:null,clk:null,trg:null};
    if(o) {o=a.extend(a.cfgs.psRel.conf,o); }
    var retRel={
      prc : function(el,prop) {
        s = a(el).attr("rel").split("!!");
        for(i in s) {
          t = s[i].split("=");
          for(j in t) {
            if(prop==t[0]) return t[1];
          }
        }
      },
      cls : function(el) { return this.prc(el,"Class")},
      clsOver : function(el) { return this.prc(el,"ClassHover")},
      click : function(el) { return this.prc(el,"Click")},
      dblclick : function(el) { return this.prc(el,"DblClick")}
    };
    // Abreviação de váriaveis
    c=a.cfgs.psRel.conf;
    p=retRel;
    // Retorno dos métodos da função chamada para cada elemento.
    return this.filter(":[rel]").each(function(){
      if(p.clsOver(a(this))||p.cls(a(this))) {
        a(this).attr("class", p.clsOver(a(this))||p.cls(a(this)));
      }
      if(p.click(a(this))) {
        a(this).click(function(e){ e.preventDefault(); E(p.click(a(this)),"Click",a(this)); });
      }
      if(p.dblclick(a(this))) {
        a(this).dblclick(function(e){ e.preventDefault(); E(p.dblclick(a(this)),"DblClick",a(this)); });
      }
      a(this).mouseover(function(){ if(p.clsOver(a(this))) a(this).attr("class", p.clsOver(a(this))+"_over")
      }).mouseout(function(){ if(p.clsOver(a(this))) a(this).attr("class", p.clsOver(a(this)).replace("_over","")) });
    });
  }
})(jQuery);
// Ativando plugin na página HTML
$(document).ready(function(){
  $("[rel]").psRel();
});

Editado Março 12, 2012 por PyetroSafe

PyetroSafe · Março 14, 2012

Bom galera, ainda ninguém se manifestou mas tudo bem... Continuo aguardando comentários...

Vamos lá, eu estou usando meu plugin no site que estou desenvolvendo... e tive a necessidade de usar o evento Change, com isto, eu atualizei o plugin trazendo algumas melhorias...

1.1.2 - Adicionado evento Change; (14/03/2012 10:50)

...
      change : function(el) { return this.prc(el,"Change")}
...
      if(p.change(a(this))) {
        a(this).change(function(e){ e.preventDefault(); E(p.change(a(this)),"Change",a(this)); });
      }
...

1.1.3 - Adicionado replace para váriavel f na função E, para procurar comandos 'this' e trocar por 'h' conseguindo reconhecer o elemento que chamou o evento; (14/03/2012 10:50)

...
  function E(f,g,h){
    try{ var s=f.replace(/this/gi, 'h'); eval(s)}catch(e){ 
...

1.1.4 - Alteração no modo da separação entre o evento chamado e o script deste evento, permitindo agora criar scripts mais complexos; (14/03/2012 14:20)

...
for(i in s) {
 var pos = s[i].indexOf("=",0);
 var t = new Array();
 t[0] = s[i].substr(0,pos);
 t[1] = s[i].substr(pos+1,s[i].length);
 for(j in t) {
  if(prop==t[0]) return t[1];
 }
}
...

Fiz logo abaixo uma página teste para verem as atualizações...

<html>
<head>
<style type="text/css">
  .A { text-decoration: underline; }
  .A_over { background: #CCCCCC; }
  .B, .B_over { color: #FF0000; }
  .B_over { background: #CCCCCC; color: #0000FF; }
</style>
 &lt;script type="text/javascript" src="jquery-1.7.1.min.js"></script>
 &lt;script type="text/javascript" src="jquery.psRel.min.js"></script>
</head>
<body>
<ul>
  <li name="1" rel="ClassHover=A!!Click=alert('Clk');"> TESTE 1 </li>
  <li name="2" rel="ClassHover=B!!DblClick=alert('DbClk Li 4')"> TESTE 2 </li>
  <li name="3"> TESTE 3 </li>
</ul>
<p id="a" rel="ClassHover=B!!Click=$('body').append('<p>Hello</p>');!!DblClick=alert('DbClk P b')"> P Teste 2 </p>
<select name="sel_page" id="sel_page" rel="ClassHover=B!!Change=var a=50, b=20,c; c=a/b; alert(c/this.val())">
  <option value="1"> Option 1 </option>
  <option value="2"> Option 2 </option>
</select>
</body>
</html>

Pra quem gostou, e tenho certeza que já tem gente se interessando pode usar a vontade. Logo abaixo vai o código completo do plugin psRel no modo min e estudo: Modo Min:

/* ----------------------------------------------------------------------------
  -*-*- JS Code document -*-*-
  Plugin: psRel
  Versão: 1.1.4
  Desenvolvedor: Pyetro Sabaraense Ferreira da Costa
  Descrição: este plugin é uma tentativa de facilitar ainda mais a escrita do código por inserir diretamente no html
    as opções desejadas de class com over, click, et...

  < 1.00 - Versões do desenvolvimento do código, sendo que a principal alteração foi de transformar o código
  que era uma simples chamada de uma "váriavel literal como objeto" para o plugin jQuery. Outra alteração foi a troca
  do separador ';;' por '!!' entre os eventos chamados no atributo "rel".
  1.0.0 - Terminado o plugin funcionando perfeitamente, com os eventos Click, Class e ClassHover;
  1.0.1 - Adicionado o methodo dblclick;
  1.1.1 - Adicionado a função E para agrupamento da função try;
  1.1.2 - Adicionado evento Change; (14/03/2012 10:50)
  1.1.3 - Adicionado replace para váriavel f na função E, para procurar comandos 'this' e trocar por 'h' conseguindo reconhecer o elemento que chamou o evento; (14/03/2012 10:50)
  1.1.4 - Alteração no modo da separação entre o evento chamado e o script deste evento, permitindo agora criar scripts mais complexos; (14/03/2012 14:20)

  Obs: Aqueles que quiserem podem participar do desenvolvimento e manutenção das versões do plugin.
  Podem ajudar finalizar o modo trigger. A parte comentada é um trecho retirado do plugin jQuery.tolls.overlay...
---------------------------------------------------------------------------- */
(function(a){ a.cfgs=a.cfgs||{version:"1.1.4"}, a.cfgs.psRel={ conf:{ el:"",length:0,cls:null,clsOver:null,clk:null,trg:null}};function E(f,g,h){ try{var s=f.replace(/this/gi, 'h'); eval(s)}catch(e){ var b=c=d="";b=h.attr("name");d=h.attr("id");b!=undefined?c=' Name: "'+b+'"':(d!=undefined?c=' Id: "'+d+'"':c="");console.log("Ev. "+g+" Error: \""+e.message+"\" on Elem.: \""+h.get(0).tagName+"\" Index:\""+h.index()+"\""+c+"")}}a.fn.psRel=function(o){ var defaults={ el:"",length:0,cls:null,clsOver:null,clk:null,trg:null};if(o){o=a.extend(a.cfgs.psRel.conf,o);} var retRel={ prc:function(el,prop){ s=a(el).attr("rel").split("!!");for(i in s){var pos=s[i].indexOf("=",0);var t=new Array();t[0]=s[i].substr(0,pos);t[1]=s[i].substr(pos+1,s[i].length);for(j in t){if(prop==t[0])return t[1];}}}, cls:function(el){ return this.prc(el,"Class")}, clsOver:function(el){ return this.prc(el,"ClassHover")}, click:function(el){ return this.prc(el,"Click")}, dblclick:function(el){ return this.prc(el,"DblClick")}, change:function(el) { return this.prc(el,"Change")}};c=a.cfgs.psRel.conf;p=retRel;return this.filter(":[rel]").each(function(){ if(p.clsOver(a(this))||p.cls(a(this))){ a(this).attr("class", p.clsOver(a(this))||p.cls(a(this)));}if(p.click(a(this))){ a(this).click(function(e){ e.preventDefault();E(p.click(a(this)),"Click",a(this));});}if(p.dblclick(a(this))){ a(this).dblclick(function(e){ e.preventDefault();E(p.dblclick(a(this)),"DblClick",a(this));});}if(p.change(a(this))) { a(this).change(function(e){ e.preventDefault();E(p.change(a(this)),"Change",a(this)); });}a(this).mouseover(function(){ if(p.clsOver(a(this)))a(this).attr("class", p.clsOver(a(this))+"_over")}).mouseout(function(){ if(p.clsOver(a(this)))a(this).attr("class", p.clsOver(a(this)).replace("_over",""))});})}})(jQuery);$(document).ready(function(){ $("[rel]").psRel();});

Modo Estudo:

/* ----------------------------------------------------------------------------
  -*-*- JS Code document -*-*-
  Plugin: psRel
  Versão: 1.1.4
  Desenvolvedor: Pyetro Sabaraense Ferreira da Costa
  Descrição: este plugin é uma tentativa de facilitar ainda mais a escrita do código por inserir diretamente no html
    as opções desejadas de class com over, click, et...

  < 1.00 - Versões do desenvolvimento do código, sendo que a principal alteração foi de transformar o código
  que era uma simples chamada de uma "váriavel literal como objeto" para o plugin jQuery. Outra alteração foi a troca
  do separador ';;' por '!!' entre os eventos chamados no atributo "rel".
  1.0.0 - Terminado o plugin funcionando perfeitamente, com os eventos Click, DoubleClick, Class e ClassHover.
  1.0.1 - Adicionado o methodo dblclick;
  1.1.1 - Adicionado a função E para agrupamento da função try;
  1.1.2 - Adicionado evento Change; (14/03/2012 10:50)
  1.1.3 - Adicionado replace para váriavel f na função E, para procurar comandos 'this' e trocar por 'h' conseguindo reconhecer o elemento que chamou o evento; (14/03/2012 10:50)
  1.1.4 - Alteração no modo da separação entre o evento chamado e o script deste evento, permitindo agora criar scripts mais complexos; (14/03/2012 14:20)

  Obs: Aqueles que quiserem podem participar do desenvolvimento e manutenção das versões do plugin.
  Podem ajudar finalizar o modo trigger. A parte comentada é um trecho retirado do plugin jQuery.tolls.overlay...
---------------------------------------------------------------------------- */
(function(a) {
  // Iniciação da configuração
  a.cfgs=a.cfgs||{version:"1.1.4"},
    a.cfgs.psRel={
      conf:{ el:"",length:0,cls:null,clsOver:null,clk:null,trg:null}
      // Trecho comentado é um esboço de criação de função passado nos eventos.
      /*, addTrigger:function(a,b,d){ c[a]=[b,d]} }*/ };
  /*var b=[],c={};
  a.cfgs.psRel.addEffect("default",function(b,c){
    var d=this.getConf(),e=a(window);
    d.fixed||(b.top+=e.scrollTop(),b.left+=e.scrollLeft()), b.position=d.fixed?"fixed":"absolute", this.getOverlay().css(b).fadeIn(d.speed,c)},
      function(a){ this.getOverlay().fadeOut(this.getConf().closeSpeed,a) }
  );*/
  // Função de validação do código passado por parametro nos eventos click, dblclick, etc. Caso código seja inválido, mostra-o no console.
  function E(f,g,h){
    try{ var s=f.replace(/this/gi, 'h'); eval(s)}catch(e){ 
      var b=c=d=""; b=h.attr("name"); d=h.attr("id"); b!=undefined?c=' Name: "'+b+'"':(d!=undefined?c=' Id: "'+d+'"':c="");
      console.log("Ev. "+g+" Error: \""+e.message+"\" on Elem.: \""+h.get(0).tagName+"\" Index:\""+h.index()+"\""+c+"")}
  }
  // Iniciação do plugin e definição de váriaveis
  a.fn.psRel = function(o){
    var defaults={ el:"",length:0,cls:null,clsOver:null,clk:null,trg:null};
    if(o) {o=a.extend(a.cfgs.psRel.conf,o); }
    var retRel={
      prc : function(el,prop) {
        var s = a(el).attr("rel").split("!!");
        for(i in s) {
          var pos = s[i].indexOf("=",0);
          var t = new Array();
          t[0] = s[i].substr(0,pos);
          t[1] = s[i].substr(pos+1,s[i].length);
          for(j in t) {
            if(prop==t[0]) return t[1];
          }
        }
      },
      cls : function(el) { return this.prc(el,"Class")},
      clsOver : function(el) { return this.prc(el,"ClassHover")},
      click : function(el) { return this.prc(el,"Click")},
      dblclick : function(el) { return this.prc(el,"DblClick")},
      change : function(el) { return this.prc(el,"Change")}
    };
    // Abreviação de váriaveis
    c=a.cfgs.psRel.conf;
    p=retRel;
    // Retorno dos métodos da função chamada para cada elemento.
    return this.filter(":[rel]").each(function(){
      if(p.clsOver(a(this))||p.cls(a(this))) {
        a(this).attr("class", p.clsOver(a(this))||p.cls(a(this)));
      }
      if(p.click(a(this))) {
        a(this).click(function(e){ e.preventDefault(); E(p.click(a(this)),"Click",a(this)); });
      }
      if(p.dblclick(a(this))) {
        a(this).dblclick(function(e){ e.preventDefault(); E(p.dblclick(a(this)),"DblClick",a(this)); });
      }
      if(p.change(a(this))) {
        a(this).change(function(e){ e.preventDefault(); E(p.change(a(this)),"Change",a(this)); });
      }
      a(this).mouseover(function(){ if(p.clsOver(a(this))) a(this).attr("class", p.clsOver(a(this))+"_over")
      }).mouseout(function(){ if(p.clsOver(a(this))) a(this).attr("class", p.clsOver(a(this)).replace("_over","")) });
    });
  }
})(jQuery);
// Ativando plugin na página HTML
$(document).ready(function(){
  $("[rel]").psRel();
});

Entrar

Plug-in psRel para jQuery! Sugestões e ajuda!

Pergunta

PyetroSafe

Link para o comentário

Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

PyetroSafe

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades