DES:WEB:Js
Índice
Calendário
Objetivo
Cria um calendário utilizando Javascript e DHTML de uma forma bem tranquilo da inserir em qualquer site.
Arquivos
Todos os arquivos estão dentro da pasta sistemas/inc/jscalendar-1.0
Como usar
inclua os seguinte arquivos no seu código fonte:
<link rel="stylesheet" type="text/css" media="all" href="../inc/jscalendar-1.0/calendar-win2k-cold-1.css" title="win2k-cold-1" />
<script type="text/javascript" src="../inc/jscalendar-1.0/calendar.js"></script>
<script type="text/javascript" src="../inc/jscalendar-1.0/lang/calendar-en.js"></script>
<script type="text/javascript" src="../inc/jscalendar-1.0/calendar-setup.js"></script>
Para definir o calendário é necessário o id do campo de texto e o id do objeto que será utilizado para clicar e chamar o calendário
Campo de Texto
<input type='text' value='".$_POST['AcdEstSpr_PrdInicio']."' name='AcdEstSpr_PrdInicio' id='AcdEstSpr_PrdInicio'/>
Imagem <img src=\"imagem/date.png\" id=\"dateButton\" style=\"cursor: pointer; margin:3px;\">
Script de configuração do calendário
<script type=\"text/javascript\">
Calendar.setup({
inputField : \"AcdEstSpr_PrdInicio\", // id of the input field
ifFormat : \"%d/%m/%Y\", // format of the input field (even if hidden, this format will be honored)
displayArea : \"show_e\", // ID of the span where the date is to be shown
daFormat : \"%A, %B %d, %Y\",// format of the displayed date
button : \"dateButton\", // trigger button (well, IMG in our case)
align : \"BR\", // alignment (defaults to \"Bl\")
singleClick : true,
steep : 1
});
</script>
E isto é tudo pessoal
Site oficial do Script
http://www.dynarch.com/projects/calendar/
Mascaras Automáticas
Funciona no bom e velho esquema do MASKEDIT do delphi, vc coloca um string que diz como deve ser a formatação e ele automaticamente deixa o que o usuário digita no formato adequado.
Arquivo
<script type="text/javascript" src="http://cac-php.unioeste.br/sistemas/inc/mascara.js"></script>
Como usar
<input type="textbox" name="xxx" onkeypress="return mascara(document.nomeForm, 'xxx', '99999-999', event);">
E voilà como diriam as francesas se compo já esta mascarado.
tipo de dados:
- 9 : número
- a : letra minuscula, se o cara colocar maiusculo ele já faz a conversão
- A : letra maiuscula, se o cara colocar minusculo ele já faz a conversão
OBS: isto funciona para qualquer máscara com tamanho fixo, CEP, Telefone, Hora etc... OBS2 : funciona no IE também so que ele não impede que se digite depois do fim da mascara, por isto se necessáio usar no IE coloca um maxlenght no campo e BRASIL "como diz um amigo meu"!
A Fazer
Tem um problema com a tecla TAB que ainda não foi solucionada, quem puder dar uma olhada fique a vontade
Abas em JavaScript
Site: http://webfx.eae.net/dhtml/tabpane/tabpane.html
Script para a criação de Abas do tipo que tem nos programas desktop;
Arquivos necessários:
tab.js código fonte
tab.css código fonnte
Como usar:
<div class='tab-pane' id='tabPane1'> <div class='tab-page' id='tabPage1'> <h2 class='tab'>Unioeste</h2> ".$selectInternos." </div> <div class='tab-page' id='tabPage2'> <h2 class='tab'>Outros</h2> <label for='Cnv_Objeto' accesskey='c'><u>C</u>onvênio:</label><br/> <input type='text' value='" . $_POST['Cnv_Objeto'] . "' name='Cnv_Objeto' id='Cnv_Objeto' disabled='true' size='32'/> <a href='../inc/frmBusca/pesquisarConvenio.php?objTela=Cnv_Objeto&objOculto=Cnv_Codigo' class='lbOn'><img src='imagem/magnifier.png' alt='Pesquisar Por Pessoa Convênio'/></a> <br/><label for='PssJrd_RzSocial' accesskey='e'>Empresa <u>C</u>oncedente:</label><br/> <input type='text' value='" . $_POST['PssJrd_RzSocial'] . "' name='PssJrd_RzSocial' id='PssJrd_RzSocial' disabled='true' size='32'/> <a href='../inc/frmBusca/pesquisarPessoaJuridica.php?objTela=PssJrd_RzSocial&objOculto=PssJrd_CNPJNumero;PssJrd_CNPJFilial;PssJrd_CNPJDigito' class='lbOn'><img src='imagem/magnifier.png' alt='Pesquisar Por Pessoa Convênio'/></a> </div> <script type='text/javascript'> tp1 = new WebFXTabPane( document.getElementById('tabPane1'),true); tp1.setSelectedIndex( 1 ); alert(tp1.getSelectedIndex()); </script> </div> </div>