Latest Entries »

As vezes precisamos ajudar o usuário à preencher formulários, dizendo o que pode e não pode ser digitado nos campos. Na minha opnião este tipo de ajuda nunca é demais. Valendo-se da filosofia do jQuery (escrever pouco, produzir muito), escrevi este script para tal.

var help = function() {
 return {
  init: function() {
   var $form = $('form');
   var tip = null;
   $(':text',$form).each(function(){
    $(this).bind('focus',function(){
     tip = document.createElement('span');
     $(this).after( $(tip).text( $(this).attr('tips') ) );
    }).blur(function(){
     if (tip) {
      $(tip).remove();
      tip = null;
     }
     return;
    });
   });
  }
 }
}();
$(document).ready(help.init);

HTML

<form>
<input type="text" name="teste1" tips="Este input é muito importante..." /><br />
<input type="text" name="teste2" tips="Digite qualquer coisa..." /><br />
<input type="text" name="teste3" tips="Terceiro, esta quase acabando..." /><br />
<input type="text" name="teste4" tips="Seja persistente" /><br />
<input type="text" name="teste5" tips="Último input, caso tenha preenchido os anteriores, boa sorte!" />
</form>

[s]

JunioR

Anúncios

Retornar último número pelo PHP

Vou mostrar algumas formas para descobrir/mostrar o(s) último(s) número(s) de uma string via php.

// string
$x = 144-4534-ABACD-394-ADSACD;

// preg_match_all
preg_match_all('/(\d+)/',$x,$m);
echo end($m[0]);
echo "\n";

// preg_split
echo end(preg_split('/[^\d]+/',$x,-1,PREG_SPLIT_NO_EMPTY));
echo "\n";

// caracter por caracter...
$c = strlen($x) - 1;
$r = array();
while(true) {
 // se o caracter for inteiro
 if(ctype_digit($x[$c])) {
  $r[$c] = $x[$c];
  // se próximo caracter não for inteiro
  // break
  if(!ctype_digit($x[$c - 1]))
   break;
 }
 $c--;
}
ksort($r);
echo join($r);
echo "\n";

Sempre que posso, procuro melhorar alguns scripts (visualização, velocidade, integração…). Neste post, vou mostrar um pequeno script js para manipular dados de uma tabela. Coisa básica, o objetivo é clicar na letra e mostra na tabela apenas a linhas que comecem com ela (letra).

JAVASCRIPT

$(document).ready(function(){
 var enab = $(document.getElementById('todas')).addClass('enable');
 var tr = $('table tbody > tr');
 $('ul > li').bind('click',function(){
  if (enab) $(enab).removeClass();
  enab = $(this).addClass('enable');
  var text = $(this).text();
  if (text.match(/todas/i)){
   tr.show();
  } else {
   if ($.browser.msie) {
    tr.hide();
    $('.'+text).show()
   } else {
    tr.hide().filter('.'+text).show();
   }
  }
 });
});

CSS

ul li {
 display:inline;float:left;width:30px;text-align:center;list-style:none;
 background:#ccc;margin-left:2px;cursor:pointer;border:1px solid #ccc;
}
.enable {
 background:#028AC6;color:#fff;border:1px solid #555;
}
.disable {
 background:#ccc;color:#000;
}
table {
 background:#dadada;margin-top:10px;
}
thead tr {background:#ccc;}
thead th {width:100px;}
tbody tr {background:#fff;}

HTML
<ul>
<listyle="margin-left:0;">A</li>
<li>B</li><li>C</li><li>D</li><li>E</li><li>F</li><li>G</li>
<li>H</li><li>I</li><li>J</li><li>L</li>
<li>M</li><li>N</li><li>O</li><li>P</li>
<li>Q</li><li>R</li><li>S</li><li>T</li>
<li>U</li><li>V</li><li>X</li><li>Z</li>
<listyle="width:80px"id="todas">TODAS</li>
<divstyle="clear:both"></div>
</ul>
<table>
<thead>
<tr>
<th>Coluna1</th>
<th>Coluna2</th>
</tr>
</thead>
<tbody>
<trclass="A"><td>Atestado</td><td>1</td></tr>
<trclass="A"><td>Almanaque</td><td>2</td></tr>
<trclass="A"><td>Almoxarifado</td><td>3</td></tr>
<trclass="B"><td>Balconista</td><td>1</td></tr>
<trclass="B"><td>Balão</td><td>2</td></tr>
<trclass="C"><td>Carro</td><td>3cef</td></tr>
<trclass="D"><td>Dedos</td><td>3sdf</td></tr>
<trclass="E"><td>Escola</td><td>3ssdfdf</td></tr>
<trclass="F"><td>Fórmula1</td><td>3s</td></tr>
<trclass="F"><td>Farsante</td><td>3s</td></tr>
<trclass="G"><td>Gases</td><td>3s</td></tr>
</tbody>
</table>

Testado no IE6, IE7 e FireFox.

Confira.

[s]

JunioR

jQuery UI

Foi lançada no dia 17/09/2007 a lib jquery UI. Não é uma novidade, pois os jQuerianos utilizavam, e muito, o interface, que possui inumeros plugins funcionáveis até o jquery-1.1.4.

Agora, com o jquery UI, creio que o inteface seja descontinuado ou migrado. Será que o jquery UI veio para competir com o ExtJS ? Vamos esperar.

Confira os plugins

Draggables
Droppables
Sortables
Selectables
Resizables
Accordion
Calendar
Dialog
Slider
Tablesorter
Tabs
Magnifier
Shadow

Grande trabalho do Leandro Vieira Pinho, vale apena conferir.

Ext.BasicDialog – extjs

Uma maneira simples de criar janelas com a lib extjs.

Includes cd css
ext/resources/css/ext-all.css
ext/resources/css/xtheme-default.css

A primeira linha corresponde ao css default da ext, a segunda faz referência ao theme, na versão 1.1 existem 3 opções além do default: areo,vista e gray.

Includes de javascript
ext/adapter/ext/ext-base.js
ext/ext-all.js

Você pode trabalhar com outros adaptadores: jQuery,Prototype e YUI. Já fiz alguns testes com o jQuery, funciona perfeitamente, mas neste post vamos usar o “Stand-Alone” ext-base.js.

Classe para manipulação da janela

var ExtJs = function() {
 var dialog = [];
 return {
  init: function() {
   Ext.select('button').on('click',function(){
    ExtJs.showDialog(this.getAttribute('dialogId'))
   });
  },
  showDialog : function(xid) {
   if (!dialog[xid]) {
    dialog[xid] = new Ext.BasicDialog('', {
     autoCreate: true,
     width:500,
     height:300,
     shadow:true,
     minWidth:300,
     minHeight:250,
     proxyDrag: true,
     title: 'Minha Janela número '+xid
    });
    dialog[xid].addKeyListener(27, dialog[xid].hide, dialog[xid]);
    dialog[xid].addKeyListener(13, dialog[xid].hide, dialog[xid]);
    dialog[xid].addButton('Close', dialog[xid].hide, dialog[xid]);
    dialog[xid].body.dom.innerHTML = Ext.get('content'+xid).dom.innerHTML;
    dialog[xid].on('hide',function(){
    dialog[xid].destroy(true);
    dialog[xid] = false;
   });
  }
  dialog[xid].show(Ext.get('trigger')).toFront();
 }
};
}();

Esta classe busca, através de um seletor (neste caso a tag button), e adiciona um evento onclick para criação da janela.

Iniciamos a extjs baseada na classe acima
Ext.onReady(ExtJs.init,ExtJs,true);

Pronto, tudo certo basta clicar nos botões.

O HTML
<div style="text-align:center">
<button class="dialog-box" dialogId="1">Dialog 1</button>
<button class="dialog-box" dialogId="2">Dialog 2</button>
<button class="dialog-box" dialogId="3">Dialog 3</button>
</div>
<div id="trigger" style="position:absolute;top:50%;left:50%;"></div>
<div id="content1" style="display:none">Conteúdo 1</div>
<div id="content2" style="display:none">Conteúdo 2</div>
<div id="content3" style="display:none">Conteúdo 3</div>

Referências:
extjs.com/learn
extjs.com.br
google.com

[s]

JunioR