Laion Camargo

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

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
;)