Plugin pSFut_Utils
Mas o que faz esse plugin? Ele acaba com o problema dos IE antigos em não oferecer a pseudo-classe ":hover" a todos elementos, fora o elemento âncora "<a />". Isso é um grande problema tendo em vista que ainda hoje o IE detêm entre 20% e 28% dos acessos da internet.
Algum tempo atrás, pra contornar isso, os desenvolvedores costumavam usar funções javascript pra "dar" essa função css a todos os elementos, exemplo:
Porém esse tipo de código era estressante e gerava códigos muito grandes pro pequeno efeito. Pensando nisso criei o plugin para fazer "o mesmo" de forma mais limpa.
Com o plugin basta dentro do atributo "class" do elemento a tag "over:" antes da classe a ser usada como hover.
O mesmo efeito de cima usando o plugin ficaria assim:
O plugin faz o mesmo para a pseudo-classe ":focus" para elementos input como text, select, textarea, password.
Mas como funciona exatamente?
Simples, basta chamar o plugin passando por paramentro qual pseudo-classe ativar, com valor 1 pra ativar: "$.pSFut_Utils({over:1, focus:1});".
Depois basta adicionar a tag "over:" ou "focus:" no começo da classe do elemento. Assim todas as classes do elemento receberão a pseudo-classe.
No CSS a classe que simularia essa pseudo-classe deve ser escrita com o mesmo nome da classe acrescida de "_over".
Mas e seu eu estiver usando duas classes num elemento e quiser ativar apenas pra primeira ou segunda?
Isso é facil, ao inserir a tag inclua um índice ao qual vai definir quais classes serão ativadas com a pseudo-classe. Isso se faz assim: class="over[0]: class1 class2". Usando o índice apenas a class1 ativará a pseudo-classe hover, ou seja, após passar o mouse em cima do elemento a classe ficará assim: class="over[0]: class1 class1_over class2"
Além do índice é possível determinar se todos os elementos serão ativados ou apenas alguns específicos. Para especificar um elemento pra receber as funções, use o parâmetro: filterOver, filterFocus (ou filterTab veremos mais a frente).
A chamada do plugin ficaria: "$.pSFut_Utils({over:1, focus:1, filterOver: '#Button1'});". Dessa forma só o elemento com ID "Button1" recebe as funções do plugin pra pseudo-classe :hover.
Também incluso neste plugin está o tabAsEnter que simula o pressionamento da tecla Tab ao pressionar a tecla Enter, para ir ao próximo campo de um formulário.
Plugin pSFut_Utils min versão 4.0.5:
Atualização 4.05 do plugin pSFut_Utils!
Mudanças: Ao invés de remover a classe inicial, agora será apenas incluída a classe adicional no disparo do evento (over, focus), não haverá a substituição das classes.
Vantagens: Escrever menos código no css. Com esta mudança, não é mais necessário incluir a classe adicional em todos os lugares junto da classe inicial. Como a classe inicial irá se manter no atributo, basta escrever o código específico para classe adicional fazendo uma única inclusão desta no css.
Mas o que faz esse plugin? Ele acaba com o problema dos IE antigos em não oferecer a pseudo-classe ":hover" a todos elementos, fora o elemento âncora "<a />". Isso é um grande problema tendo em vista que ainda hoje o IE detêm entre 20% e 28% dos acessos da internet.
Algum tempo atrás, pra contornar isso, os desenvolvedores costumavam usar funções javascript pra "dar" essa função css a todos os elementos, exemplo:
Porém esse tipo de código era estressante e gerava códigos muito grandes pro pequeno efeito. Pensando nisso criei o plugin para fazer "o mesmo" de forma mais limpa.
Com o plugin basta dentro do atributo "class" do elemento a tag "over:" antes da classe a ser usada como hover.
O mesmo efeito de cima usando o plugin ficaria assim:
O plugin faz o mesmo para a pseudo-classe ":focus" para elementos input como text, select, textarea, password.
Mas como funciona exatamente?
Simples, basta chamar o plugin passando por paramentro qual pseudo-classe ativar, com valor 1 pra ativar: "$.pSFut_Utils({over:1, focus:1});".
Depois basta adicionar a tag "over:" ou "focus:" no começo da classe do elemento. Assim todas as classes do elemento receberão a pseudo-classe.
No CSS a classe que simularia essa pseudo-classe deve ser escrita com o mesmo nome da classe acrescida de "_over".
Mas e seu eu estiver usando duas classes num elemento e quiser ativar apenas pra primeira ou segunda?
Isso é facil, ao inserir a tag inclua um índice ao qual vai definir quais classes serão ativadas com a pseudo-classe. Isso se faz assim: class="over[0]: class1 class2". Usando o índice apenas a class1 ativará a pseudo-classe hover, ou seja, após passar o mouse em cima do elemento a classe ficará assim: class="over[0]: class1 class1_over class2"
Além do índice é possível determinar se todos os elementos serão ativados ou apenas alguns específicos. Para especificar um elemento pra receber as funções, use o parâmetro: filterOver, filterFocus (ou filterTab veremos mais a frente).
A chamada do plugin ficaria: "$.pSFut_Utils({over:1, focus:1, filterOver: '#Button1'});". Dessa forma só o elemento com ID "Button1" recebe as funções do plugin pra pseudo-classe :hover.
Também incluso neste plugin está o tabAsEnter que simula o pressionamento da tecla Tab ao pressionar a tecla Enter, para ir ao próximo campo de um formulário.
Plugin pSFut_Utils min versão 4.0.5:
/* ***********************************************************************
*** PlugIn SaFe Utilitys vs 4.0.5 - 02/09/2013 - 15:47:10
***
*** Funções:
*** Over: Aplica efeito mouseOver e mouseOut para elementos com valor = "over:" no atributo class
*** Focus: Aplica efeito focusIn e focusOut para elementos com valor = "focus:" no atributo class
*** tabAsEnter: Aplica efeito da tecla Tab ao pressionar Enter em elementos de entrada de texto (input, select)
*** Atualização:
*** Alteração:
*** Agora o plugin faz uso de namespace, remove os eventos e os adiciona;
*** A alteração da classe agora é feita em tempo de execução toda vez que chamado o evento, ao contrário
*** de ser definido uma só vez na chamada do plugin. Isso melhora a performance e inclui elementos adicionados dinamicamente;
*********************************************************************** */
(function(a){a.pSFut_cfgs=a.pSFut_cfgs||{version:'4.0.5'};a.pSFut_cfgs.Utils={confg:{over:0,focus:0,tabAsEnter:0,filterOver:null,filterFocus:null,filterTab:null,filterForm:null}};a.pSFut_Utils=function(o){var defaults=a.pSFut_cfgs.Utils.confg,cfgs=(o)?(a.extend({},defaults,o)):defaults,showErro=function(e){try{console.log('Erro: '+e)}catch(e){}},SearchClass=function(e,t){try{var xe=a(e),cls=xe.attr('class'),ncls=a.trim(cls.replace(regEv[t],'')),idxB=cls.indexOf('['),idxE=cls.indexOf(']'),idxN=cls.indexOf(ncls),clss,ind=[],newc;if(ncls.indexOf(' ')>0){clss=ncls.split(' ');if(idxE>=0){ind=cls.substr(idxB+1,(idxE-1)-idxB).replace(/\s/g,'').split(',')}else{for(i in clss)ind[i]=i}for(i in ind){clss[ind[i]]=clss[ind[i]]+' '+clss[ind[i]]+'_'+t}newc=(idxE>=0)?(cls.substr(0,idxE+1)+' '+clss.join(' ')):cls.substr(0,idxN)+' '+clss.join(' ')}else if(ncls.length>0){newc=a.trim(t+': '+ncls+' '+ncls+'_'+t)}else{newc=a.trim(cls+' '+t)+'ed'}}catch(e){try{console.log('Erro: '+e)}catch(e){}}return newc},Event0=function(e){if(!a(this).data('pSFut_'+t+'_cls')){var t=e.data.t,xe=a(this),cls=xe.attr('class').replace(/\s*$/g,'').replace(regEv[t],'$1 ');if(!cls)return false;xe.attr('class',cls);var newc=SearchClass(xe,t);if(!xe.data('pSFut_'+t+'_cls')){xe.data('pSFut_'+t+'_cls',cls);xe.data('pSFut_'+t+'_newc',newc)}}xe.removeClass().addClass(xe.data('pSFut_'+t+'_newc'))},Event1=function(e){var t=e.data.t,xe=a(this);if(!xe.data('pSFut_'+t+'_cls'))return false;xe.removeClass().addClass(xe.data('pSFut_'+t+'_cls'))},Execute=function(t,col){try{a(col).each(function(i,e){xe=a(e);xe.removeData('pSFut_'+t+'_cls');xe.removeData('pSFut_'+t+'_newc')});var ns='.pSFut_'+t,events=(t==='over')?'mouseover'+ns+' mouseout'+ns:'focus'+ns+' focusout'+ns,eachEvt=events.split(' ');a(document).off(ns,col);a(document).on(eachEvt[0],col,{'t':t},Event0);a(document).on(eachEvt[1],col,{'t':t},Event1)}catch(e){showErro(e.message)}},regEv=[];regEv['over']=/^(over:\s*\[?[0-9, ]*\]?\s*)/gi,regEv['focus']=/^(focus:\s*\[?[0-9, ]*\]?\s*)/gi;if(cfgs.over===1||cfgs.over===true){try{Execute('over',(cfgs.filterOver||'*[class^="over:"]'))}catch(e){showErro(e.message)}}if(cfgs.focus===1||cfgs.focus===true){try{Execute('focus',(cfgs.filterOver||'*[class^="focus:"]'))}catch(e){showErro(e.message)}}if(cfgs.tabAsEnter===1||cfgs.tabAsEnter===true){try{var col=cfgs.filterTab||':input[type!=hidden][disabled!=disabled]';a(document).off('.pSFut_tabAsEnter',col);a(document).on('keydown.pSFut_tabAsEnter',col,{'col':col},function(e){try{var kp=e.which,inps=a(e.data.col);if(kp==13){if(/(button|submit|reset|readonly|hidden)/i.test(a(this).attr('type'))||/(textarea|select|button)/i.test(a(this)[0].tagName))return;var nxt=inps[inps.index(this)+1]||inps[0];nxt=a(nxt);while(nxt.attr('type')=='hidden'||nxt.attr('disabled')=='disabled'){nxt=inps[inps.index(nxt)+1]||inps[0];nxt=a(nxt)}e.preventDefault();nxt.focus();return kp=9}}catch(e){showErro(e.message)}})}catch(e){showErro(e.message)}}}})(jQuery);
// Chamada do plugin:
// $.pSFut_Utils({over:1, focus:1, tabAsEnter: 1});
Atualização 4.05 do plugin pSFut_Utils!
Mudanças: Ao invés de remover a classe inicial, agora será apenas incluída a classe adicional no disparo do evento (over, focus), não haverá a substituição das classes.
Vantagens: Escrever menos código no css. Com esta mudança, não é mais necessário incluir a classe adicional em todos os lugares junto da classe inicial. Como a classe inicial irá se manter no atributo, basta escrever o código específico para classe adicional fazendo uma única inclusão desta no css.
Nenhum comentário:
Postar um comentário