May 06

Lista de Pedidos — Exemplo adicionar e remover elementos usando Javascript.

CSS, HTML, Javascript, PHP, Sites, Template 23 Comments » Marcelo Korjenioski

Neste exem­plo irei mos­trar como criar ele­men­tos den­tro do código html usando javas­cript e remo­ver ele­mento estes ele­men­tos.
Criei uma lista de pedi­dos para exem­pli­fi­car o uso des­tas funções.

Exem­plo funcionando.

Crie um arquivo html cha­mado pedidos.html e insira o código abaixo.

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
<html>
<head>
<script type="text/javascript">

// Remove elementos
function removeElement(id) {
// Declara variavel lista que indica  onde o elemento será removido.
var lista    = document.getElementById('lista');
// Declara variavel elemento que indica qual elemento será removido.
var elemento = document.getElementById(id);

// Função removeChild irá procurar elementos que estão dentro da variavel lista com o valor
// da variavel elemento para remover.
lista.removeChild(elemento);
}

// Adiciona elementos basedo no valor dos combo box (select)
function adicionar(id) {
// Cria uma variavel que captura o valor do elemento selecionado no combo box.
var valor   = document.getElementById(id).value;

// Cria uma variavel com referencia ao Id do Elemento
var lista    = document.getElementById('lista');
// Cria uma variavel para inidicar a quantidade de elementos com o mesmo Id. Com valor inicial 1.
var qtd = 1;

// Verifica se elemento com o Id informado existe.
if(document.getElementById('element_' + valor)){

// Caso o elemento exista é atribuido o valor referente a quandide de vezes que foi adicionado
// este elemento.
qtd = document.getElementById('item_' + valor).value;

// Apos pegar o valor da quantidade. O elemento é removido para que não ocorra duplicação.
removeElement('element_' + valor);

// Incrementa a quantidade do elemento para o proximo registro.
qtd++;
}

// Variavel que contem dados dos novos elementos na lista.
// É criado uma tag <li> que contem informação do elemento adicionado.
// Dentro deste registro é adicionado um link <a> para remover o elemento.
// Tambem é adicionado um <input> do tipo hidden com o valor e a quantidade do elemento.
var dado = '<li id="element_' + valor + '"><span><strong>'
+ valor +
' Qtd '
+ qtd +
'</strong> <a title="Remover" onclick="removeElement(\'element_' + valor +  '\'); return false;" href="javascript:void(0);">Remover</a></span><input id="item_'
+ valor +
'" type="hidden" value="'
+ qtd +
'" name="pedido['
+ valor +
']"/></li>';

// Pega o codigo HTML dento da lista e adiciona novos registros.
lista.innerHTML = lista.innerHTML + dado;

}

</script>
<style type="text/css">

body {
background:#FFFFFF none repeat scroll 0 0;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
height:100%;
line-height:1.3em;
margin:0;
width:100%;
}

div#wrapper {
margin:auto;
position:relative;
width:906px;
z-index:0;
}

input {
border:1px solid #CDCDCD;
background:#FFFFFF;
color:#000033;
}

input, select, textarea, label, button {
line-height:normal;
margin:2px 1px 1px 2px;
}

ul, li {
list-style: none;
}

li {
background:#FDFDFD;
color:#000033;
padding: 2px;
margin:  4px;
text-transform: uppercase;
}

legend {
color: #EB7800;
font-size:14px;
font-weight: bold;
}

</style>
<title>Lista de Pedidos</title>
</head>

<body>

<div id="wrapper">

<fieldset>
<legend>Cardápio</legend>

<label for="desc_bebidas">Bebidas</label>
<select id="desc_bebidas" name="desc_bebidas">
<option value="coca-cola">Coca-Cola</option>
<option value="fanta">Fanta</option>
</select>
<!--  Botão com a função de adicionar valor selecionado no combo box ao ser clicado -->
<input type="button" name="adicionar" value="Adicionar" onclick="adicionar('desc_bebidas');"><br>
<label for="desc_pratos">Pratos</label>
<select id="desc_pratos" name="desc_pratos">
<option value="espaguete">Espaguete</option>

<option value="pizza">Pizza</option>
</select>
<!--  Botão com a função de adicionar valor selecionado no combo box ao ser clicado -->
<input type="button" name="adicionar" value="Adicionar" onclick="adicionar('desc_pratos');"> <br>
<label for="desc_sobremesas">Sobremesas</label>
<select id="desc_sobremesas" name="desc_sobremesas">
<option value="pudim">Pudim</option>
<option value="sorvete">Sorvete</option>
</select>

<!--  Botão com a função de adicionar valor selecionado no combo box ao ser clicado -->
<input type="button" name="adicionar" value="Adicionar" onclick="adicionar('desc_sobremesas');"><br>
</fieldset>

<!--  Envia dados via POST para pedidos.php -->
<form action="pedidos.php" method="post">
<fieldset>
<legend>Descrição</legend>
<textarea rows="3" cols="100" id="desc_observacao" name="desc_observacao"></textarea>
</fieldset>

<div id="pedidos">
<fieldset>
<legend>Pedidos</legend>

<div>
<!--  Lista onde será adicionado registros dos valores dos combo box selecionados -->
<ul id="lista"></ul>
</div>
</fieldset>
</div>
<input type="submit" value="Enviar Pedido">
</form>

</div>

</body>

</html>

Crie um arquivo php cha­mado pedidos.php e insira o código abaixo.

<?php
// Organiza lista do array para o debug.
echo "<pre>";
// Mostra Array de entrada de POST e GET
print_r($_REQUEST);
?>

Caso tenha alguma duvida deixe um comen­tá­rio que terei pra­zer em aju­dar.
Comen­tá­rios são bem vin­dos assim posso melho­rar a qua­li­dade dos tuto­rias aqui apresentados.

Oct 04

Bananascript ferramenta web para compactar arquivos JS.

Ferramentas, Javascript No Comments » Marcelo Korjenioski

Fer­ra­menta web que per­mite com­pac­tar arqui­vos JS. Em alguns casos é pos­sí­vel redu­zir o tama­nho do arquivo em até 80%. Mas a mesmo com um script bem orga­ni­zado é pos­sí­vel redu­zir o arquivo em média de 40%.

Bana­naS­cript

Caso tenha alguma duvida deixe um comen­tá­rio que terei pra­zer em aju­dar.
Comen­tá­rios são bem vin­dos assim posso melho­rar a qua­li­dade dos tuto­ri­ais aqui apresentados.

Sep 18

JQuery usando bind para adicionar efeito toggle

Javascript No Comments » Marcelo Korjenioski

Segue um exem­plo de como adi­ci­o­nar o efeito tog­gle (alter­nar) estado de um ele­mento  (show) ou (hide) dando bind nos ele­men­tos no evento click.


<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>

<div>
<span id="pergunta_1">
<p>antropologia</p>
</span>
<span id="resposta_1">
<p>antropologia</p>
</span>
</div>
<div>
<span id="pergunta_2">
<p>FAQP2</p></span>
<span id="resposta_2">
<p>FAQR2</p>
</span>
</div>
<div>
<span id="pergunta_3">
<p>Atividade Complementar</p>
</span>
<span id="resposta_3">
<p>Atividade Complementar</p>
</span>
</div>

<script type="text/javascript">
// Adicionando background
$("span[@id*=pergunta_]").css('background','silver');
// Adicionando um cursor padrao link
$("span[@id*=pergunta_]").css('cursor','pointer');
// Escondendo elementos
$("span[@id*=resposta_]").hide();
// Adicionando evendo click no elementos span com id que iniciam com
// pergunta_ .
$("span[@id*=pergunta_]").bind("click", function(event) {
// Pegando string apartir da possicao 9.
var id = new String(this.id).substring(9);
// Criando string para pegar a id da resposta_ que pertence a pergunta_ .
var resposta_id = 'resposta_' + id;

// Verifica se existe algo dentro da resposta_id para executar toggle.
if ($('#' + resposta_id).length > 0) {
$('#' + resposta_id).toggle();
return false;
}
});
</script>
</body>
</html>

Caso tenha alguma duvida deixe um comen­tá­rio que terei pra­zer em aju­dar.
Comen­tá­rios são bem vin­dos assim posso melho­rar a qua­li­dade dos tuto­ri­ais aqui apresentados.

Sep 03

Verificar valores de input checkbox com JQuery

Javascript, JQuery 7 Comments » Marcelo Korjenioski

Para exe­cu­tar o script abaixo é neces­sá­rio o JQuery

http://docs.jquery.com/Downloading_jQuery

No exem­plo estou usando o JQuery do  Goo­gle APIs.

Segue um exem­plo em fun­ci­o­na­mento.

</code></code></code>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Phaneronsoft - Verificar valores de input checkbox com JQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<input type="checkbox" value="1" name="id[]" class="cinput">1<br>
<input type="checkbox" value="2" name="id[]" class="cinput">2<br>
<input type="checkbox" value="3" name="id[]" class="cinput">3<br>
<input type="checkbox" value="4" name="id[]" class="cinput">4<br>
<input type="checkbox" value="5" name="id[]" class="cinput">5<br>
<input type="checkbox" value="6" name="id[]" class="cinput">6<br>
<input type="checkbox" value="7" name="id[]" class="cinput">7<br>
<button type="button" id="botao">Verificar</button>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="application/javascript">
function checkBox() {
var files = '';
// Procura em todos os elementos com a classe cinput na página.
$(".cinput:checked").each(function(){
//Verifica se input checkbox esta marcado
//if(this.checked) {
// Adiciona valor do checkbox
files = files + ' [' + this.value + '] ';
//}
});
alert(files);
}
// Adiciona evento ao botão com a função bind
$("#botao").bind("click", function(){
checkBox();
});
</script>
</body>
</html>

Caso tenha alguma duvida deixe um comentário que terei prazer em ajudar.
Comentários são bem vindos assim posso melhorar a qualidade dos tutoriais aqui apresentados.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Phaneronsoft - Verificar valores de input checkbox com JQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<input type="checkbox" value="1" name="id[]" class="cinput">1<br>
<input type="checkbox" value="2" name="id[]" class="cinput">2<br>
<input type="checkbox" value="3" name="id[]" class="cinput">3<br>
<input type="checkbox" value="4" name="id[]" class="cinput">4<br>
<input type="checkbox" value="5" name="id[]" class="cinput">5<br>
<input type="checkbox" value="6" name="id[]" class="cinput">6<br>
<input type="checkbox" value="7" name="id[]" class="cinput">7<br>
<button type="button" id="botao">Verificar</button>

<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js” type=“text/javascript”></script>
<script type=“application/javascript”>
func­tion check­Box() {
var files = ”;
// Pro­cura em todos os ele­men­tos com a classe cin­put na página.
$(“.cinput”).each(function(){
//Verifica se input check­box esta mar­cado
if(this.checked) {
// Adi­ci­ona valor do check­box
files = files + ’ [‘ + this.value + ’] ‘;
}
});
alert(files);
}
// Adi­ci­ona evento ao botão com a fun­ção bind
$(“#botao”).bind(“click”, func­tion(){
check­Box();
});
</script>
</body>
</html>

Sep 03

Eventos JQuery.

Javascript No Comments » Marcelo Korjenioski

Para exe­cu­tar o script abaixo é neces­sa­rio o JQuery

http://docs.jquery.com/Downloading_jQuery

Even­tos: blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error


<button type="button" id="botao">Verificar</button>

<script type="application/javascript">

$("#botao").bind("click", function(){
alert('teste');
});

</script>

Caso tenha alguma duvida deixe um comen­tá­rio que terei pra­zer em aju­dar.
Comen­tá­rios são bem vin­dos assim posso melho­rar a qua­li­dade dos tuto­ri­ais aqui apresentados.

  1. Paginas:
  3. 1
  4. 2
Designed by NattyWP Wordpress Themes.
Images by desEXign.