DES:WEB:Js

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>