Stiod Blog » Javascript http://blog.stiod.com Just another WordPress weblog Mon, 22 Feb 2010 14:20:16 +0000 http://wordpress.org/?v=2.8.2 en hourly 1 Ordenação de tabelas com jQuery http://blog.stiod.com/2009/11/12/ordenacao-de-tabelas-com-jquery/ http://blog.stiod.com/2009/11/12/ordenacao-de-tabelas-com-jquery/#comments Thu, 12 Nov 2009 13:19:36 +0000 Gabriel Verta http://blog.stiod.com/?p=698 Em mais um post de jQuery, venho apresentar-lhes o plugin tablesorter. Este plugin ordena as colunas de uma tabela a partir do clique no cabeçalho da mesma:

No código, basta adicionar o javascript e o css do tablesorter, além da biblioteca jquery:

 
<html>
<head>
<link rel="stylesheet" type="text/css" href="tablesorter.css" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.tablesorter.js">
    </script>
    <script type="text/javascript">
        $(function(){
             $('.tablesorter').tablesorter()
         })
    </script>
</head>
<body>
<table class="tablesorter" cellspacing="1">
<thead>
<tr>
<th>first name</th>
<th>last name</th>
<th>age</th>
<th>total</th>
<th>discount</th>
<th>date</th>
</tr>
</thead>
<tbody>
<tr>
<td>peter</td>
<td>parker</td>
<td>28</td>
<td>$9.99</td>
<td>20%</td>
<td>jul 6, 2006 8:14 am</td>
</tr>
<tr>
<td>john</td>
<td>hood</td>
<td>33</td>
<td>$19.99</td>
<td>25%</td>
<td>dec 10, 2002 5:14 am</td>
</tr>
<tr>
<td>clark</td>
<td>kent</td>
<td>18</td>
<td>$15.89</td>
<td>44%</td>
<td>jan 12, 2003 11:14 am</td>
</tr>
<tr>
<td>bruce</td>
<td>almighty</td>
<td>45</td>
<td>$153.19</td>
<td>44%</td>
<td>jan 18, 2001 9:12 am</td>
</tr>
<tr>
<td>bruce</td>
<td>evans</td>
<td>22</td>
<td>$13.19</td>
<td>11%</td>
<td>jan 18, 2007 9:12 am</td>
</tr>
</tbody>
</table>
 
<body>
</html>
 



Na documentação oficial ainda, são listadas algumas das configurações possíveis, dentre as quais podemos destacar:

É isso ai ;)

]]> http://blog.stiod.com/2009/11/12/ordenacao-de-tabelas-com-jquery/feed/ 0 Carrossel de imagens com jQuery http://blog.stiod.com/2009/11/05/carrossel-de-imagens-com-jquery/ http://blog.stiod.com/2009/11/05/carrossel-de-imagens-com-jquery/#comments Thu, 05 Nov 2009 13:46:50 +0000 Gabriel Verta http://blog.stiod.com/?p=679 Neste post venho mostrar-lhes outro bom plugin para jQuery, o jCarousel.
Com este plugin podemos fazer com que diversas imagens rodem em um espaço limitado tornando o layout mais amigável.

Vamos ao nosso primeiro exemplo de carrossel:

Para fazer um carrossel simples, como este, precisaremos dos arquivos de js e css da biblioteca jCarousel, além do css de skin do jCarousel a ser utilizado, e do js do jQuery. Segue o código:

 
<html>
<head>
<title>Carrossel simples com jQuery</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/jcarousel.css" />
<link rel="stylesheet" type="text/css" href="css/tango-skin.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jcarousel.js"></script>
<script type="text/javascript">
$(function(){
    $('#carrossel').jcarousel()
})
</script>
</head>
<body>
<h1>jCarousel - Carrosel Simples</h1>
<ul id="carrossel" class="jcarousel-skin-tango">
<li><img src="img/imagem1.jpg" /></li>
<li><img src="img/imagem2.jpg" /></li>
<li><img src="img/imagem3.jpg" /></li>
<li><img src="img/imagem4.jpg" /></li>
<li><img src="img/imagem5.jpg" /></li>
<li><img src="img/imagem6.jpg" /></li>
</ul>
 
</body>
</html>
 



Este é o exemplo mais simples de utilização do jCarousel, existem várias outras variações deste através de opções passadas a ele. Dentre as funcionalidades podemos destacar:

;)

]]> http://blog.stiod.com/2009/11/05/carrossel-de-imagens-com-jquery/feed/ 9 Slide de Imagens com jQuery http://blog.stiod.com/2009/10/26/slide-de-imagens-jquery/ http://blog.stiod.com/2009/10/26/slide-de-imagens-jquery/#comments Mon, 26 Oct 2009 14:44:38 +0000 Ricardo Perez http://blog.stiod.com/?p=420 Continuando a série de post sobre jQuery iniciado por Gabriel.

Hoje vou mostrar um pouco sobre Effects e alguns métodos interessantes do jQuery, Usando como exemplo um simples slide de Imagem.

Neste código vemos o effect FadeIn(efeito de aparecer) e fadeOut(efeito de desaparecer) e o método next

 
function slidein(){
    active_img = $(".active");
    //O método next pega o próximo objeto,  dentro do div #slide-img
    next_img =active_img.next();
 
    // verifica se existe um próximo objeto no div #slide-img
    if (next_img.length==0){
            //se não tem um próximo objeto retorna pro primeiro
            next_img = $(".first-active");
    }
 
    active_img.fadeOut("slow");
    active_img.removeClass('active');
 
    next_img.fadeIn("slow");
    next_img.addClass('active');
}
 
$(document).ready(function(){
setInterval("slidein()", "3500");}
)
 



O HTML para o slide de imagem deve ser o seguinte:

 
<div id="slide-img">
<ul>
<li class="active first-active"><img src="img1.jpg"/></li>
<li><img src="img2.jpg" /></li>
<li><img src="img3.jpg" /></li>
</ul>
</div>
 



Antes coloque esse trecho de CSS:

 
#slide-img {
    float:left;
    height:xxx px;/* a largura padrão das imgs dentro do slide*/
    overflow:hidden;
    width:yyy px;/* o altura padrão das imgs dentro do slide*/;
}
* {
    margin:0;
    padding:0;
}
 





Veja o exemplo aqui:




O ideal que o tamanho das imagens dentro do slide sejam as mesmas

]]> http://blog.stiod.com/2009/10/26/slide-de-imagens-jquery/feed/ 0 Bordas arredondadas com jQuery http://blog.stiod.com/2009/10/22/bordas-arredondadas-com-jquery/ http://blog.stiod.com/2009/10/22/bordas-arredondadas-com-jquery/#comments Thu, 22 Oct 2009 16:25:21 +0000 Gabriel Verta http://blog.stiod.com/?p=557 Pulando um pouco a seqüência de posts anteriores, gostaria de mostrar-lhes o plugin Jquery Corner que cria bordas arredondas com o JQuery.

E como funciona?

Para adicionar bordas arredondas basta você adicionar a biblioteca do jquery na sua página e o arquivo js do plugin:

 
<html>
<head>
<title>JQuery Corner</title>
// Jquery
<script src="jquery.js" type="text/javascript"></script>
// JQuery Corner
<script src="jquery.corner.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){     
    // Arredonda a borda do elemento com id borda-arredondada
    $('#borda-arredondada').corner() 
})
</script>
</head>
<body>
<div id="borda-arredondada">
Lorem ipsum dolor sit amet
</div>
 
</body>
</html>
 


Segue o exemplo:


Você ainda pode passar parâmetros para colocar bordas com certo tamanho de arredondamento, ou somente no topo, em baixo, ou outras "formas de arredondamento":

 
// Borda de 30px em todas as pontas
$("#borda-arredondada').corner('30px')
// Somente no topo
$("#borda-arredondada').corner('top')
// Somente em baixo
$("#borda-arredondada').corner('bottom')
// Somente no topo direito (tr = top + right)
$("#borda-arredondada').corner('tr')
// Bevel
$("#borda-arredondada').corner('bevel')
 



Outros exemplos podem ser vistos no site http://www.malsup.com/jquery/corner/.


É isso ai ;)

]]> http://blog.stiod.com/2009/10/22/bordas-arredondadas-com-jquery/feed/ 1 O objeto JQuery e seus seletores http://blog.stiod.com/2009/10/09/o-objeto-jquery-e-seus-seletores/ http://blog.stiod.com/2009/10/09/o-objeto-jquery-e-seus-seletores/#comments Fri, 09 Oct 2009 13:24:01 +0000 Gabriel Verta http://blog.stiod.com/?p=380 Continuando o post anterior sobre jQuery, iremos descrever o objeto jQuery.
A maioria das funcionalidades do jQuery é iniciada pela objeto $. O $ no jQuery possui diversas funcionalidades, que podem ser:

- Obtenção de objetos a partir de seletores.
Ex.: Obtendo todos os objetos que contenham a classe "dinamico":
alert($(".dinamico").length)

- "Window onload" (funções que irão ser executadas após o término do carregamento da página).
Ex.: Executando função com mensagem simples:
$(function(){
alert("A página já carregou!")
})

- Funções úteis (a serem descritas em um próximo post).
Ex.: Removendo espaços do final e começo de uma string:
alert($.trim(" texto ").length)

- Ajax
Ex.: Requisição ajax por get
$.get("exemplo-ajax.php", function(resposta){
alert(resposta)
})

- Criar conteúdo dinâmicamente
Ex.: Adicionando um novo paragrafo ao corpo da página:
$('<p>Novo Paragrafo</p>').appendTo(document.body)

Seletores

Seletores são declarações que igualam um ou vários elementos do HTML. São eles que mapeiam o HTML no css:

Seletor Descrição
TAG Traz todos os elementos que sejam da TAG selecionada.
Ex.:
alert($('p').length)
#ID Traz o elemento que tenha o ID selecionado.
Ex.:
$('#conteudo').css('background-color', '#ccc')
.CLASSE Traz todos os elementos que tenham a CLASSE selecionada.
Ex.:
$('.content-center').css('text-align', 'center')
[PROPRIEDADE=VALOR] Traz todos os elementos que tenham a PROPRIEDADE com o VALOR selecionado.
Ex.:
$('[name=nome]').val('Gabriel Verta')
SELETOR1 SELETOR2 Traz todos os elementos que SELETOR2 que estejem dentro do SELETOR1.
Ex.:
$('div label').addClass('required')



Existe uma lista extensa de seletores para jQuery, que podem ser vistas na documentação oficial do jQuery. Tentei criar um site com uma forma dinâmica de ver estes seletores em jQuery, espero que entendam como funciona o site. ;)

]]> http://blog.stiod.com/2009/10/09/o-objeto-jquery-e-seus-seletores/feed/ 1 Funções com argumentos variáveis em Javascript http://blog.stiod.com/2009/09/28/funcoes-com-argumentos-variaveis-em-javascript/ http://blog.stiod.com/2009/09/28/funcoes-com-argumentos-variaveis-em-javascript/#comments Mon, 28 Sep 2009 14:41:03 +0000 Yoshio Iwamoto http://blog.stiod.com/?p=400 Talvez você já tenha se deparado em uma situação onde precisava de uma ou mais funções em Javascript com o mesmo nome, porém com listas de argumentos diferentes ou com um argumento com um valor padrão.

Pois é, isso não existe em Javascript, pelo menos não como outras linguagens normalmente implementam. Um das formas de resolver este problema é utilizando a propriedade arguments das funções.

Propriedade arguments

arguments é uma propriedade que contém os argumentos passados para a função. Ele só pode ser chamado localmente e pode ser utilizado como um array.

Propriedades:
Function.arguments.length: Quantidade de argumentos declarados.
arguments.length: Quantidade real de argumentos.
arguments.callee: Referência para função.

Lembre-se que o arguments deve ser utilizado de dentro da função. Aqui vão alguns exemplos para deixar as coisas mais claras.

Você pode passar quantos argumentos quiser sem precisar declara-los na função:

function myfunc() {
    a = arguments[0];
    b = arguments[1];
    c = arguments[2];
    // ...
}
 
myfunc(1, 2, 3);
 

Um meio de se indicar um valor padrão para um argumento que não é passado:

function myfunc(a, b) {
    var c = 3;
    if (arguments.length == 3) {
        c = arguments[2];
    }
    /*
    ou
    var c = arguments.length == 3 ? arguments[2] : 3;
    */
}
 
myfunc(1, 2);
 
/* ou */
 
myfunc(1, 2, 3);
 

Verificando a quantidade de argumentos passados com os permitidos:

function myfunc(a, b) {
    if (arguments.length != myfunc.arguments.length) {
        alert('Passe 2 argumentos!');
    }
    // ...
}
 
myfunc(1); // exibe 'Passe 2 argumentos!'
 
/* ou */
 
myfunc(1, 2, 3); // exibe 'Passe 2 argumentos!'
 

O callee pode ser utilizado em recursões onde não se conhece o nome da função, como as funções anônimas:

function myfunc() {
    return function(a) {
        if (a > 10) {
            return a;
        }
        return arguments.callee(a + 1);
    }
    // ...
}
 
myfunc()(1);
 
]]> http://blog.stiod.com/2009/09/28/funcoes-com-argumentos-variaveis-em-javascript/feed/ 0 Jquery – Introdução a biblioteca Javascript http://blog.stiod.com/2009/09/21/jquery-introducao-a-biblioteca-javascript/ http://blog.stiod.com/2009/09/21/jquery-introducao-a-biblioteca-javascript/#comments Mon, 21 Sep 2009 16:15:12 +0000 Gabriel Verta http://blog.stiod.com/?p=357 Introdução
JQuery é uma biblioteca Javascript que tem como objetivo simplificar o tratamento javascript em uma página HTML, ou seja, tornar mais fácil o tratamento de eventos, animações, requisições Ajax... Muito utilizada no mercado devido a facilidade de uso e de extensão, onde os diversos programadores que a utilizam criam plugins para as mais variadas atividades, tais como slide de imagens, máscara para campos de formulário, tornar bordas redondas dentre outras...

Como funciona?
Para utilizar a biblioteca basta adicionar o arquivo Javascript do jQuery:

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

<script type="text/javascript">

</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>

A última versão também pode ser encontrada em http://code.jquery.com/jquery-latest.js

Exemplo de utilização
Caso eu queira que todos os elementos que tenham a classe "dinamico" sejem ocultadas quando apertado o botão ocultar, eu teria o seguinte código dentro da função de ocultar:


$('.dinamico').hide()

ou ainda, utilizando os efeitos do jQuery:


$('.dinamico').fadeOut("slow")

Veja este exemplo funcionando:

No próximo post explicarei algumas funcionalidades do objeto jQuery e como funcionam os seletores.

]]> http://blog.stiod.com/2009/09/21/jquery-introducao-a-biblioteca-javascript/feed/ 0 Criando um Widget Panel com o framework javascript ExtJs http://blog.stiod.com/2008/11/28/criando-um-widget-panel-com-o-framework-javascript-extjs/ http://blog.stiod.com/2008/11/28/criando-um-widget-panel-com-o-framework-javascript-extjs/#comments Fri, 28 Nov 2008 17:31:31 +0000 caio http://blog.stiod.com/?p=172 Segue a segunda parte do tutorial de introdução ao framework do ExJs.

Vamos falar dos Widgets, que são aplicativos feitos com o Extjs para facilitar o desenvolvimento das aplicações web.

E pra começar crie um arquivo HTML [não esqueça de baixar os fontes do ExtJs] e :
No HEAD do arquivo HTML referencie os arquivos script e de formatação de estilo.

 
<!-- CSS pegue o arquivo na pasta ext-2.2\resources\ -->
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
 
<!-- Ext-base.js pegue o arquivo na pasta ext-2.2\adapter\ext\ -->
<script type="text/javascript" src="js/ext-base.js" ></script>
<!-- Ext-all.js pegue o arquivo na pasta raiz ext-2.2\ -->
<script type="text/javascript" src="js/ext-all.js"></script>
 

E insira no corpo do documento esses elementos:

 
<div id="quadro-id"></div>
<div id="quadro-conteudo"><span>Conte&uacute;do</span></div>
 

Coloquei essa formatação em um STYLE pra deixar os textos mais harmônicos e definir um tamanho para o quadro que irá gerar o Ext Panel

 
body{
  font:normal normal 12px/1.8em arial, 'trebuchet ms', verdana;
}
#quadro-id{
  width:500px;
}
 

Agora indo para a parte mais importante os Scripts:

 
//Verificando se o ExtJs foi carregado
Ext.onReady(function(){
  //Instanciando um novo objeto do Extjs
  var quadro = new Ext.Panel({
    title:'meu quadro',
    //referenciando um objeto no corpo do HTML
    renderTo:'quadro-id',
    //tem a opção de ser expansível
    collapsible:true,
    //Opção de ser arrastado, mas volta ao ponto original
    //Necessita incluir as propriedades de Drag n' Drop
    draggable:true,
    //icone de fechar,  precisa de programação pra interatividade
    closable:true,
    //Inserção e programação dos botões do cabeçalho do PANEL
    tools:[{
      id:'help',
      handler:function(){
          Ext.Msg.show({
          width:350,
          title:'titulo do texto de ajuda',
          msg:'corpo do  quadro de ajuda'
        })
      }
    },{
    id:'close',
    handler:function(){
      Ext.destroy(quadro);
    }
    }],
    // conteúdo a ser renderizado dentro do PANEL
    contentEl:'quadro-conteudo'
  })
  //Centralizando quadro no centro da tela
  Ext.get("quadro-id").center();
});
 

O Widget PANEL e seus elementos visuais podem ser customizados, os arquivos de imagens e css desse objeto estão separados na pasta RESOURCES com seu respectivo nome.

Bom.. é só isso :) .

Coloquei esse exemplo no nosso servidor pra quem quiser acessar e ver funcionando.

Abraços a todos e em seguinda colocarei mais funcionalidades do ExtJs.

]]> http://blog.stiod.com/2008/11/28/criando-um-widget-panel-com-o-framework-javascript-extjs/feed/ 0