Jump to content
Fórum Script Brasil
  • 0

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

PyetroSafe

Asked by PyetroSafe,

 Share

Question

PyetroSafe

PyetroSafe

Posted
Posted (edited)

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:

<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();
});

Edited by PyetroSafe
Link to comment
Share on other sites

1 answer to this question

Recommended Posts

  • 0
PyetroSafe

PyetroSafe

Posted
  • Author
Posted

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();
});

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing


  • Forum Statistics

    • Total Topics
      152.2k
    • Total Posts
      652k
×
×
  • Create New...