Ir para o conteúdo

Bruno

Cadastrado: 16 Set 2010
Offline Última atividade: Abr 10 2014 00:35
-----

#365 Principio De Menu Em Abas

Postado por Bruno em 17 novembro 2010 - 19:49

<html>

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript">

function id( el ){

	return document.getElementById( el );

}

function hide_all(){

	var divs = id('content').getElementsByTagName('div');

	for( var i=0; i<divs.length; i++ )

	{

		divs[i].style.display = 'none';

	}

}

/* http://www.javascriptkit.com/jsref/event.shtml */

function disablelink( e ){

	var evt = window.event || e

	if (evt.preventDefault) //supports preventDefault?

		evt.preventDefault()

	else //IE browser

		return false

}

window.onload = function(){

	hide_all();

	var as = id('content').getElementsByTagName('a');

	for( var i=0; i<as.length; i++ )

	{

		as[i].onclick = function( e ){

			hide_all();

			var id_el = this.href.split('#')

			

			id( id_el[1] ).style.display = 'block';			

			return disablelink( e );

		}

	}

}

</script>

</head>

<body>

	<div id="content">

		<a href="#historia">História</a><br />

		<div id="historia">Conteudo da História</div>

		

		<a href="#geografia">Geografia</a><br />

		<div id="geografia">Conteudo da Geografia</div>

		

		<a href="#matematica">Matemática</a><br />

		<div id="matematica">Conteudo da Matemática</div>



	</div><!-- /content -->

</body>

</html>



#291 Teclado Virtual Javascript

Postado por Bruno em 13 outubro 2010 - 14:46

<html>

<head> 

<script type="text/javascript">

function id( el ){

	return document.getElementById( el );

}

function val( destino, valor ){

	destino.value += valor;

}

var focus = false;

window.onload = function(){

	

	

	var botoes = id('teclado').getElementsByTagName('input');

	for( var i=0; i<botoes.length; i++ ){

		botoes[i].onclick = function(){

			if( !focus ){ alert('coloque o foco em algum input');exit(); }



			val( id( focus ), this.value );

			id( focus ).focus();

		}

	}

	

	var inputs = id('area').getElementsByTagName('input');

	for( var i=0; i<inputs.length; i++ ){

		inputs[i].onfocus = function(){

			focus = this.id;

		}

	}

	id('entrada_1').focus();

}

</script>

<style type="text/css">

* { margin: 0; padding: 0; border: 0; }

input { background: #fff; border: 1px solid #ccc; padding: 2px;}

#teclado { width: 400px; }

#teclado fieldset { width: 300px; text-align: center; float: left; margin: 2px; }

#teclado #numbers { float: right; width: 80px; }

fieldset { margin: 5px; }

</style>

</head>

<body>

	<form action="" method="post">

		<fieldset id="area">

			<input type="text" name="entrada_1" id="entrada_1" /></label>

			<input type="text" name="entrada_2" id="entrada_2" /></label>

			<input type="text" name="entrada_3" id="entrada_3" /></label>

		</fieldset>

		<fieldset id="teclado">

			<fieldset id="numbers">

				<input type="button" name="7" value="7" />

				<input type="button" name="8" value="8" />

				<input type="button" name="9" value="9" />

				

				<input type="button" name="4" value="4" />

				<input type="button" name="5" value="5" />

				<input type="button" name="6" value="6" />

				

				<input type="button" name="1" value="1" />

				<input type="button" name="2" value="2" />

				<input type="button" name="3" value="3" />

				

				<input type="button" name="0" value="0" />

			</fieldset>

			<fieldset>

				<input type="button" name="q" value="q" />

				<input type="button" name="w" value="w" />

				<input type="button" name="e" value="e" />

				<input type="button" name="r" value="r" />

				<input type="button" name="t" value="t" />

				<input type="button" name="y" value="y" />

				<input type="button" name="u" value="u" />

				<input type="button" name="i" value="i" />

				<input type="button" name="o" value="o" />

				<input type="button" name="p" value="p" />

			</fieldset>

			<fieldset>

				<input type="button" name="a" value="a" />

				<input type="button" name="s" value="s" />

				<input type="button" name="d" value="d" />

				<input type="button" name="f" value="f" />

				<input type="button" name="g" value="g" />

				<input type="button" name="h" value="h" />

				<input type="button" name="j" value="j" />

				<input type="button" name="k" value="k" />

				<input type="button" name="l" value="l" />

				<input type="button" name="ç" value="ç" />

			</fieldset>

			<fieldset>			

				<input type="button" name="z" value="z" />

				<input type="button" name="x" value="x" />

				<input type="button" name="c" value="c" />

				<input type="button" name="v" value="v" />			

				<input type="button" name="b" value="b" />

				<input type="button" name="n" value="n" />

				<input type="button" name="m" value="m" />

			</fieldset>

		</fieldset>

	</form>

</body>

</html>




#288 Máscaras Enquanto Digita Er

Postado por Bruno em 11 outubro 2010 - 10:10

Rotina semelhante ao str_pad() (php), ao 'sair do campo':
<html>
<head>
<script type="text/javascript">
/* Máscaras ER */
function mascara(o,f){
        v_obj=o;
        v_fun=f;
        setTimeout("execmascara()",1);
}
function execmascara(){
        v_obj.value=v_fun(v_obj.value);
}
function id( el ){
        return document.getElementById( el );
}
function mnum(v){
    v=v.replace(/\D/g,"");//Remove tudo o que não é dígito
    return v;
}
window.onload = function()
{
        id('hash').onkeypress = function(){
                mascara( this, mnum );
        }
        id('hash').onblur = function(){
                var dig = this.value.length;

                while( dig<3 ){
                        this.value = '0'+this.value;
                        dig++;
                }
        }
}
</script>
</head>
<body>
        <form action="" method="post">
                <input type="text" name="hash" id="hash" maxlength="3" />
        </form>
</body>
</html>
veja que continuo usando a máscara com er proposta no código inicial, só que agora, de forma não obstrutiva, e com a adição de mais um evento.


#264 Selecionar Inputs Pelo Name

Postado por Bruno em 05 outubro 2010 - 17:07

<html>

<head>

<script type="text/javascript">

function id( el ){

	return document.getElementById( el );

}

window.onload = function()

{

	var inputs = id('f-teste').getElementsByTagName('input');

	var result = '';

	for( var i=0; i<inputs.length; i++ )

	{

		if( inputs[i].name=='id_cod[]' )

			result += 'name: '+inputs[i].name+' value: '+inputs[i].value+'<br />';

	}

	id('result').innerHTML = result;

}

</script>

</head>

<body>

	<form action="" method="post" id="f-teste">

		<input type="hidden" name="id_cod[]" value="1" />

		

		<input type="text" name="produto[]" value="Um" />

		

		<input type="hidden" name="id_cod[]" value="5" />

		<input type="text" name="produto[]" value="Dois" />

		<input type="hidden" name="id_cod[]" value="15" />

		<input type="hidden" name="id_cod[]" value="7" />

		

		<input type="submit" name="ok" value="ok" />

	</form>

	<div id="result"></div>

</body>

</html>



#216 Máscaras Enquanto Digita Er

Postado por Bruno em 04 outubro 2010 - 17:03

Máscaras com Expressões Regulares

a base desse código, funções mascara() e execmascara(), são daqui:
http://elcio.com.br/ajax/mascara/

A ER do valor monetário, eu mesmo implementei.
<html>
<head>
<script type="text/javascript">
/* Máscaras ER */
function mascara(o,f){
    v_obj=o
    v_fun=f
    setTimeout("execmascara()",1)
}
function execmascara(){
    v_obj.value=v_fun(v_obj.value)
}
function mcep(v){
    v=v.replace(/\D/g,"")                    //Remove tudo o que não é dígito
    v=v.replace(/^(\d{5})(\d)/,"$1-$2")         //Esse é tão fácil que não merece explicações
    return v
}
function mtel(v){
    v=v.replace(/\D/g,"")                 //Remove tudo o que não é dígito
    v=v.replace(/^(\d\d)(\d)/g,"($1) $2") //Coloca parênteses em volta dos dois primeiros dígitos
    v=v.replace(/(\d{4})(\d)/,"$1-$2")    //Coloca hífen entre o quarto e o quinto dígitos
    return v
}
function cnpj(v){
    v=v.replace(/\D/g,"")                           //Remove tudo o que não é dígito
    v=v.replace(/^(\d{2})(\d)/,"$1.$2")             //Coloca ponto entre o segundo e o terceiro dígitos
    v=v.replace(/^(\d{2})\.(\d{3})(\d)/,"$1.$2.$3") //Coloca ponto entre o quinto e o sexto dígitos
    v=v.replace(/\.(\d{3})(\d)/,".$1/$2")           //Coloca uma barra entre o oitavo e o nono dígitos
    v=v.replace(/(\d{4})(\d)/,"$1-$2")              //Coloca um hífen depois do bloco de quatro dígitos
    return v
}
function mcpf(v){
    v=v.replace(/\D/g,"")                    //Remove tudo o que não é dígito
    v=v.replace(/(\d{3})(\d)/,"$1.$2")       //Coloca um ponto entre o terceiro e o quarto dígitos
    v=v.replace(/(\d{3})(\d)/,"$1.$2")       //Coloca um ponto entre o terceiro e o quarto dígitos
                                             //de novo (para o segundo bloco de números)
    v=v.replace(/(\d{3})(\d{1,2})$/,"$1-$2") //Coloca um hífen entre o terceiro e o quarto dígitos
    return v
}
function mdata(v){
    v=v.replace(/\D/g,"");                    //Remove tudo o que não é dígito
    v=v.replace(/(\d{2})(\d)/,"$1/$2");       
    v=v.replace(/(\d{2})(\d)/,"$1/$2");       
                                             
    v=v.replace(/(\d{2})(\d{2})$/,"$1$2");
    return v;
}
function mtempo(v){
    v=v.replace(/\D/g,"");                    //Remove tudo o que não é dígito
    v=v.replace(/(\d{1})(\d{2})(\d{2})/,"$1:$2.$3");    
    return v;
}
function mhora(v){
    v=v.replace(/\D/g,"");                    //Remove tudo o que não é dígito
    v=v.replace(/(\d{2})(\d)/,"$1h$2");       
    return v;
}
function mrg(v){
    v=v.replace(/\D/g,"");                                      //Remove tudo o que não é dígito
        v=v.replace(/(\d)(\d{7})$/,"$1.$2");    //Coloca o . antes dos últimos 3 dígitos, e antes do verificador
        v=v.replace(/(\d)(\d{4})$/,"$1.$2");    //Coloca o . antes dos últimos 3 dígitos, e antes do verificador
        v=v.replace(/(\d)(\d)$/,"$1-$2");               //Coloca o - antes do último dígito
    return v;
}
function mnum(v){
    v=v.replace(/\D/g,"");                                      //Remove tudo o que não é dígito
    return v;
}
function mvalor(v){
    v=v.replace(/\D/g,"");//Remove tudo o que não é dígito
    v=v.replace(/(\d)(\d{8})$/,"$1.$2");//coloca o ponto dos milhões
    v=v.replace(/(\d)(\d{5})$/,"$1.$2");//coloca o ponto dos milhares
        
    v=v.replace(/(\d)(\d{2})$/,"$1,$2");//coloca a virgula antes dos 2 últimos dígitos
    return v;
}
</script>
<style type="text/css">
label { display: block; }
</style>
</head>
<body>
	<form action="" method="post">
		<label>Hora: <input type="text" name="hora" onkeypress="mascara( this, mhora );" maxlength="5"/></label>
		<label>Real: <input type="text" name="valor" onkeypress="mascara( this, mvalor );" maxlength="14" /></label>
		<label>CEP: <input type="text" name="cep" onkeypress="mascara(this, mcep)" size="10" maxlength="9" value="" /></label>
	</form>
</body>
</html>



#214 Marcar Vários Checkbox

Postado por Bruno em 04 outubro 2010 - 16:49

Opa Ted !

Então cara, é 'incorreto' repetir o atributo id num documento.
Então, sugiro o seguinte:
<html>
<head>
<script type="text/javascript">
function id( el ){
	return document.getElementById( el );
}
function marcarCheck( id_fieldset, el ) 
{
    var checks = id( id_fieldset ).getElementsByTagName('input');
	for ( var i=0; i<checks.length; i++) 
	{
		if ( checks[i].type == 'checkbox' ) 
			checks[i].checked = el.checked;
	}
}
window.onload = function()
{
	id('CheckTodos').onclick = function()
		marcarCheck( 'todos', this );
}
</script>
<style type="text/css">
label { display: block; }
</style>
</head>
<body>
	<form action="" method="post">
		Marcar Todos: <input type="checkbox" name="CheckTodos" id="CheckTodos" />
		<br /><br />
		<fieldset id="todos">
			<label>1. <input type="checkbox" name="um" /></label>
			<label>2. <input type="checkbox" name="dois" /></label>
			<label>3. <input type="checkbox" name="tres" /></label>
			<label>4. <input type="checkbox" name="quatro" /></label>
			<label>5. <input type="checkbox" name="cinco" /></label>
		</fieldset>
	</form>
</body>
</html>