29 de janeiro de 2008

Manipulando option na select com JQuery

Bom dia galera!

Bom cabei de montar um sistema aqui na empresa para jogar item de uma select para outra com JQuery.

Clique aqui para ver um exemplo

Bom agora vamos por a mão na massa

Eu criei com a versão 'jquery-1.1.3.1.mim.js'

Crie um arquivo chamado 'arquivo.html' e cole o seguinte código:

>CODE <<>

<html>
<head>
<title>Manipulando Select com JQuery</title>
<script type="text/javascript" src="jquery-1.1.3.1.min.js"></script>
<script type="text/javascript" src="mudarColuna.js"></script>
<style>
.tamanhoSelect{
width: 200px;
}
</style>
</head>

<body>
<form id="frm" name="frm">
<select id="select1" multiple="multiple" class="tamanhoSelect">
<option value="1">Item1</option>
<option value="2">Item2</option>
<option value="3">Item3</option>
</select>

<div id="add">
<a href="#" title="Mover para baixo">
<span>Mover para baixo</span>
</a>
</div>

<div id="remove">
<a href="#" title="Mover para cima">
<span>Mover para cima</span>
</a>
</div>

<select id="select2" multiple="multiple" class="tamanhoSelect">

</select>
</form>
</body>
</html>

Bom agora que temos nosso html vamos fazer nosso 'arquivo.js'

Crie um arquivo chamado 'mudarColuna.js' e coloque dentro da mesma pasta do html

abra o arquivo 'mudarColuna.js' e cole este código:

>CODE <<>

$(document).ready(function() {

$("#add").click(function(){
moverItem("select1", "select2");
});

$("#remove").click(function(){
moverItem("select2", "select1");
});
});

function adicionarItem(select, val, tex, cla){
$("#"+select).append("<option value=' "+val+" ' class=' "+cla+"
'>"+tex+"</option>");
}

function moverItem(de, para){
$("#"+de+" option:selected").each(function(){
adicionarItem(para, $(this).val(), $(this).text(), $(this).attr("class"));
$(this).remove();
});

}

Pronto!!
Muito facil néh ;D

Nosso tutorial da semana acaba por aqui..
Qualquer dúvida ou ajuda deixe no post.
Até mais galera
;x
Postado por 6 Comentários

21 de janeiro de 2008

Menu simples com JQuery

Opa! Bom dia,

Bom agora vamos uitilizar alguns dos eventos que aprendemos para montar nosso primeiro Menu em JQuery.

Exemplo do MENU

Vamos lá...

Primeiro importe a biblioteca jquery.js
Eu criei com a versão 'jquery-1.1.3.1.mim.js'

Nosso HTML:

>CODE <<>

<html>
<head>
<title>Menu JQuery</title>
<link rel="stylesheet" href="arquivo.css" type="text/css" media="screen">
<script type="text/javascript" src="jquery-1.1.3.1.min.js"></script>
<script type="text/javascript" src="slideMenu.js"></script>
</head>


<body>
<ul>
<li id="a-home1"><a href="#">Home 1</a></li>
<li id="a-home2"><a href="#">Home 2</a></li>
<li id="a-home3"><a href="#">Home 3</a></li>
<li id="a-home4"><a href="#">Home 4</a></li>
</ul>
<br /><br />

<div id="cont">
<div id="menu-details-home1" class="menu-details">
MENU 1
</div>
<div id="menu-details-home2" class="menu-details">
MENU 2
</div>
<div id="menu-details-home3" class="menu-details">
MENU 3
</div>
<div id="menu-details-home4" class="menu-details">
MENU 4
</div>
</div>
</body>
</html>


Até aqui está facil hehehe..

Crie um arquivo chamado 'slideMenu.js' e coloque dentro da mesma pasta do html

abra o arquivo 'slideMenu.js' e cole este código:

>CODE <<>

$(document).ready(function() {

$('.menu-details').hide();
$('#menu-details-home1').show();

/**HOME 1**/
$('#a-home1').click(function() {
var answer = $('#menu-details-home2');
if (answer.is(':visible')){
answer.slideUp();
}

var answer = $('#menu-details-home3');
if (answer.is(':visible')){
answer.slideUp();
}

var answer = $('#menu-details-home4');
if (answer.is(':visible')){
answer.slideUp();
}

var answer = $('#menu-details-home1');
if (answer.is(':not visible')){
answer.slideDown();
}
});

/**HOME 2**/
$('#a-home2').click(function() {
var answer = $('#menu-details-home1');
if (answer.is(':visible')){
answer.slideUp();
}

var answer = $('#menu-details-home3');
if (answer.is(':visible')){
answer.slideUp();
}

var answer = $('#menu-details-home4');
if (answer.is(':visible')){
answer.slideUp();
}

var answer = $('#menu-details-home2');
if (answer.is(':not visible')){
answer.slideDown();
}
});

/**HOME 3**/
$('#a-home3').click(function() {
var answer = $('#menu-details-home1');
if (answer.is(':visible')){
answer.slideUp();
}

var answer = $('#menu-details-home2');
if (answer.is(':visible')){
answer.slideUp();
}

var answer = $('#menu-details-home4');
if (answer.is(':visible')){
answer.slideUp();
}

var answer = $('#menu-details-home3');
if (answer.is(':not visible')){
answer.slideDown();
}
});

/**HOME 4**/
$('#a-home4').click(function() {
var answer = $('#menu-details-home1');
if (answer.is(':visible')){
answer.slideUp();
}

var answer = $('#menu-details-home2');
if (answer.is(':visible')){
answer.slideUp();
}

var answer = $('#menu-details-home3');
if (answer.is(':visible')){
answer.slideUp();
}

var answer = $('#menu-details-home4');
if (answer.is(':not visible')){
answer.slideDown();
}
});

});

Bico!!!
;D

falta pouco, agora vamos ao nosso CSS só para deixar um menu bonitinho na horizontal hehehe

Crie um arquivo chamado 'arquivo.css' e coloque na mesma pasta do html
Abra o 'arquivo.css' e copie este código pra lá..

>CODE <<>

#cont{
position: relative;
width: 780px;
height: 369px;
text-align: justify;
}

.menu-details{
width: 780px;
height: 369px;
position: absolute;
border: 1px solid #000;
}

li{
float: left;
list-style: none;
width: 80px;
margin-left: 15px;
}

Pronto Pronto!!

qualquer dúvida post no comentário..
Até mais
;)
Postado por 1 Comentários

14 de janeiro de 2008

Lista de Eventos para JQuery

Opá! como prometido a Lista de Eventos para JQuery...

Eventos:
--Setter Method--

.bind(String type, Object data, Function fn) : jQuery
.blur(Function fn) : jQuery
.change(Function fn) : jQuery
.click(Function fn) : jQuery
.dblclick(Function fn) : jQuery
.error(Function fn) : jQuery
.focus(Function fn) : jQuery
.hover(Function over, Function out) : jQuery
.keydown(Function fn) : jQuery
.keypress(Function fn) : jQuery
.keyup(Function fn) : jQuery
.load(Function fn) : jQuery
.mousedown(Function fn) : jQuery
.mousemove(Function fn) : jQuery
.mouseout(Function fn) : jQuery
.mouseover(Function fn) : jQuery
.mouseup(Function fn) : jQuery
.one(String type, Object data, Function fn) : jQuery
.ready(Function fn) : jQuery
.resize(Function fn) : jQuery
.scroll(Function fn) : jQuery
.select(Function fn) : jQuery
.submit(Function fn) : jQuery
.toggle(Function even, Function odd) : jQuery
.unbind(String type, Function fn) : jQuery
.unload(Function fn) : jQuery

--Getter Method--

.blur() : jQuery
.click() : jQuery
.focus() : jQuery
.select() : jQuery
.submit() : jQuery

Pronto ;D

bom pra quem quiser saber o que cada evento faz pode estar consultado aqui:
http://www.bitstorm.org/edwin/jquery/doc/events.html [inglês]

Ou postem o evento que eu explico..
Até mais!
Postado por 4 Comentários

7 de janeiro de 2008

Eventos com JQuery

Boa tarde pessoal,

hoje cou mostrar aqui pra vocês como funciona alguns eventos da JQuery.

Bom vamos lá

>CODE <<>

//Aqui é onde inicia nosso código, ou seja, quando o documento for lido rode estes eventos.
$(document).ready(function(){

//Aqui é um exemplo de ultilizar o fade em uma div. Pegue a "div" e vá para o fade zero em animação rápida
$("#id_da_minha_div").fadeTo("fast", 0);

//Aqui é um exemplo de como ocultar uma "div" logo que se inicializa sua página
$("#id_da_minha_div").hide();

//Aqui é um exemplo de um fade após clicar em um botão. Após clicar no botão pegue a "div" e vá para o fade zero em animação lenta
$("#id_do_meu_botao").click(function(){
$("#id_da_minha_div").fadeTo("slow", 0);
});

});


Ráá simples néh?

bom próximo post eu deixo os eventos que podem ser ultilizados dentro das funções..
até mais
;D
Postado por 0 Comentários

2 de janeiro de 2008

Iniciando com a JQuery

Opa, mais um ano se inciando e o serviço continuando kkkk ;D
Vamos intão começar a intender o JQuery

Feito o download do JQuery, basta adicionar em nossa página.

>CODE <<>

<script type="text/javascript" language="javascript"
src="javascript/jquery.js"></script>

<!--- Importante que o arquivo jquery.js esteja sendo chamado do
local correto, nesse exemplo ele se encontra detro de uma pasta chamada
'javascript'-->


A JQuery tem uma sintace bem simples e prática
Vamos selecionar todas as tag's 'div' do nosso código:

>CODE <<>

( "div" );


Enquanto no método tradicional seria:

>CODE <<>

document.getElementsByTagName("div");


Bom já deu pra perceber a diferença e praticidade que a JQuery te oferece.
Agora vamos dizer que nos queremos selecionar um 'div com id especifico'

>CODE <<>

( "nome_da_id" );


Bom até aqui foi fácil.
Vamos agora aprender alguns efeitos simples

Utilizaremos 5 efeitos simples:

Esconde todos os 'p' dentro da determinada 'id'
1) ( "p" , "nome_da_id" ).hide();

Mostra todos os 'p' dentro da determinada 'id'
2) ( "p" , "nome_da_id" ).show();

Mostra todos os 'p' com efeito(lento) de alpha dentro da determinada 'id'
3) ( "p" , "nome_da_id" ).fadeIn("slow");

Esconde todos os 'p' com efeito(lento) de alpha dentro da determinada 'id'
4) ( "p" , "nome_da_id" ).fadeOut("slow");

Mostra ou Esconde todos os 'p' com efeito(lento) até o determinado alpha setado dentro da determinada 'id'
5) ( "p" , "nome_da_id" ).fadeTo("slow", 5);

Espero que gostem ;D
Próximo Post vou ensinar ultilizar esses efeitos dentro de Eventos como ".click"

Até mais ;x
Postado por 1 Comentários
Assinar: Postagens (Atom)