Image Image Image Image Image
Scroll to Top

Topo

drop

20

dez
2011

Sem Comentários

Em Blog
CSS
PHP
Wordpress

Por Allison

Menu drop down no WordPress com css e Jquery

Em 20, dez 2011 | Sem Comentários | Em Blog, CSS, PHP, Wordpress | Por Allison

A pedido do Matheus vamos hoje falar sobre como fazer menus no wordpress fazendo as sub-paginas aparecerem como um menu drop down usando CSS e jQuery.

O menu deve ficar algo mais ou menos assim:

Como na verdade este tutorial é uma continuação do anterior, Como criar menus no WordPress não vamos explicar aqui novamente o que já falamos lá.

Como fizemos no tutorial anterior colocamos no seu tema a função: wp_list_pages() para listar as paginas, a unica diferença agora é que vamos tirar o parâmetro depth da mesma, deixando assim:

<ul id="nav">
<?php wp_list_pages(); ?>
</ul>

Isto vai gerar um codigo mais ou menos desta maneira:

<ul id="nav">

    <li class="page_item page-item-1 current_page_item">
        <a href="http://www.geniusdeveloper.com.br" title="home">home</a>
    </li>

    <li class="page_item page-item-225">
        <a title="Plugins" href="http://www.geniusdeveloper.com.br/plugins/">Plugins</a>
        <ul>
            <li class="page_item page-item-227">
                <a title="Twitter Follow Me Box" href="http://www.geniusdeveloper.com.br/plugins/twitter-follow-me-box/">Follow Me</a>
            </li>
            <li class="page_item page-item-227">
                <a title="Twitter Follow Me Box" href="http://www.geniusdeveloper.com.br/plugins/twitter-follow-me-box/">Follow Me</a>
            </li>
            <li class="page_item page-item-227">
                <a title="Twitter Follow Me Box" href="http://www.geniusdeveloper.com.br/plugins/twitter-follow-me-box/">Follow Me</a>
            </li>
        </ul>
    </li>

    <li class="page_item page-item-4">
        <a title="Sobre Nós" href="http://www.geniusdeveloper.com.br/sobre-nos/">Sobre Nos</a>
    </li>

    <li class="page_item page-item-6">
        <a title="Contato" href="http://www.geniusdeveloper.com.br/contato/">Contato</a>
    </li>
</ul>

E aqui segue o nosso css:

#nav {
    list-style: none;
}

#nav * {
    padding: 0; margin: 0;
}

#nav li {
    float: left;
    margin: 0 12px 0 0;
    height: 32px;
}

#nav li a {
    color: #b5c6e4;
    text-transform:uppercase;
    text-decoration: none;
    font-weight: bold;
    padding: 8px 8px;
    height: 16px;
    display: block;
    text-align:center;
    width:100px;
}

#nav li a:hover {
     background: #203461;
}

.current_page_item {
    background: #203461;
}

#nav ul {
  display: none;
  text-align: left;
  width:100px;
  font-weight: normal;
  line-height: 20px;
  list-style: none;
  margin: 0 0 0 10px;
  float:left;
}

#nav li li {
  border: 1px solid #E3E0D5;
  background: #F3EFEB;
  font-size: 11px;
}

#nav li li a {
  padding: 4px 10px 0 10px;
  width: 150px;
}

#nav li li a:hover {
    background: none;
    color: #000;
}

#nav li:hover ul {
        display:block;
}

O que fazemos basicamente alem de dar o estilo ao menu é esconder a lista de dentro da lista. E depois exibir ela quando passamos o mouse por cima. A estrutura mais básica que poderíamos pensar seria assim:

<style type="text/css">

#nav ul {
  display: none;
}

#nav li:hover ul {
        display:block;
}

</style>

<ul id="nav">
    <li>
        <a href="#">menu</a>
        <ul>
            <li>
                <a href="#">sub-menu</a>
            </li>
            <li>
                <a href="#">sub-menu</a>
            </li>
            <li>
                <a href="#">sub-menu</a>
            </li>
        </ul>
    </li>
</ul>

Acredito que com esta estrutura básica deve ter ficado mais claro para vc como funciona.

Mas nem tudo são flores, como o titulo ja diz, vamos ter que usar o jQuery para fazer o menu funcionar, quero dizer, quase isto, vamos ter que usar o jQuery para o menu funcionar no IE, pois ele somente suporta a pseudo classe :hover sobre um link e não sobre uma lista como estamos fazendo para o nosso menu funcionar. Então, temos que nos preucupar que o nosso tema ative o jQuery e incluir o nosso arquivo js no tema, para isto vamos colocar este codigo no nosso functions.php:

add_action('template_redirect', 'gd_add_js');

function gd_add_js(){

    //nao vamos precisar disto no admin
    if(is_admin()) return;
    wp_enqueue_script('app', get_bloginfo('template_directory') . '/scripts/app.js', array('jquery'));
}

Isto vai fazer duas coisas, uma chamar o nosso script js e ainda vai verificar se o jquery já esta ativo, se não tiver ativa o mesmo.

Vamos ao codigo do app.js:

//<![CDATA[
jQuery(document).ready(function(){
    jQuery('#nav li').hover(
        function() { jQuery('ul', this).css('display', 'block'); },
        function() { jQuery('ul', this).css('display', 'none'); });
});
//]]>

Este codigo em jQuery faz que quando tivemos o cursor em cima do #nav li ele adiciona ao ul sobre ele a propriedade display blog, e quando tiramos o mouse volta o display none.

Desta forma vc ja vai ter um belo menu drop down no seu blog.

Fonte: Rafael Cirolini/Nerd Head

Tags | , , , ,

08

nov
2011

Sem Comentários

Em Blog

Por Allison

Oracle propõe tornar o JavaFX open source

Em 08, nov 2011 | Sem Comentários | Em Blog | Por Allison

Recentemente, na conferência JavaOne, a Oracle disse que tem a intenção de tornar o JavaFX uma plataforma open source. Agora, a empresa está propondo formalmente que a toolkit JavaFX seja open source sob o projeto OpenJDK e está quer que ela seja incorporada ao Java 9. O arquiteto desktop da Oracle, Richard Bair, ao fazer a proposta, disse que a empresa já vinha conversando a respeito há muito tempo, “mas finalmente estão preparados para atuar nessa área”.

JavaFX foi criado pela Sun como uma tecnologia independente, com sua própria linguagem de script. Mas desde a aquisição da Sun pela Oracle, ela foi reposicionada como uma toolkit Java com uma moderna arquitetura, dando suporte para, por exemplo, aceleração de hardware e estilização utilizando CSS.

O projeto se chamará JFX e a Oracle espera que durante o processo uma comunidade se desenvolva em torno dele; o projeto inclui mais de 6 mil membros de APIs públicas, 11.500 unidades de testes, bibliotecas core, efeitos, suporte a CSS e a aceleração de hardware e controle UI e gráficos. Eles também esperam que a transparência vinda dos códigos open source irá melhorar a aceitação. O código já existe para portar uma camada que suporta Linux, Mac OS X e Windows.

Bair espera que existirá um JSR para JFX a tempo do Java 9, que incluiria JFX como “uma parte adequada do JDK”.A proposta dele formalizada por Iris Clark, que foi quem colocou a proposta para votação. Inicialmente, o projeto – que será liderado por Bair – terá o código JavaFX publicado pela Oracle, começando pelos controles UI. Ao longo dos meses, o código completo será publicado. O OpenJFX não dependerá dos binários por muito tempo. A votação deve ser concluída até o dia 16 de novembro.

Plano a longo prazo da Oracle é ver o JavaFX superar o toolkit UI já existente, como o Swing. Mas não há planos de remover o Swing do Java e é possível usar os dois em um aplicativo. O código fonte para o JavaFX deve ser lançado sob a GPLv2 com a exceção do Classpath.

Com informações de The H

Fonte: IMasters

Tags | , , , , , , , ,

13

jan
2011

Um Comentário

Em Blog

Por Vinicius AC

Carrinho de compras com drag and drop

Em 13, jan 2011 | Um Comentário | Em Blog | Por Vinicius AC

O mercado de e-commerce não para de crescer e este crescimento vem acompanhando de diversas novidades e melhorias nas interfaces das lojas virtuais. Uma delas é opção de arrastar e soltar produtos no carrinho de compras e é isso que você aprende neste artigo.

Se você comprou alguma coisa recentemente no Submarino deve ter notado uma nova opção na interface do site: agora é possível arrastar os produtos exibidos na página para o seu carrinho, que fica exibido de forma permanente no topo do site.

De uma forma simples, vou tentar mostrar pra vocês como implementar uma solução parecida utilizando jQuery e sua biblioteca para interfaces, a jQuery UI – é nela que encontramos os plugins draggable() e droppable(), responsáveis, como os nomes sugerem, por toda nossa operação de arrastar e soltar produtos.

Também veremos um pouco sobre o vasto universo de animações com jQuery através do método animate(). Diferente do Submarino, onde a barra superior é um novo elemento e não o próprio carrinho original, a nossa irá acompanhar de forma fluida o movimento do usuário na página.

Estrutura básica

Vamos começar com um pouco de HTML/CSS para apresentar nossa loja. A página terá os seguintes elementos:

  • Barra localizada no topo (#carrinho-top) – essa barra, no carregamento inicial, estará relativa ao corpo do site. Assim que o usuário mover o mouse abaixo da metade da altura da barra, ela será “fixada” e acompanhará a navegação.
  • Box do mini-carrinho (#carrinho-container) – ficará dentro da barra no topo e é a área onde o usuário pode “soltar” os produtos.
  • Lista de produtos (#produtos) – a listagem de produtos, contendo os elementos que podem ser arrastados para o carrinho.
  1. <div>
  2. <div>
  3. <p>Arraste produtos para esta área</p>
  4. </div>
  5. <div>
  6. <ul>
  7. <li class=”adicione”>Arraste produtos para esta área</li>
  8. </ul>
  9. </div>
  10. </div>
  11. <ul>
  12. <li class=”produto-dd”><h3>Livro 1</h3><p><img src=’_img/twa.jpg’ width=’75’ height=’90’ /></p><p class=’preco-de’>De: R$31,00</p><p class=’preco-por’>Por: R$13,00</p></li>
  13. </ul>
  1. div#carrinho-top{background-color:#C92D21;width:960px;color:#fff;border-bottom:1px dashed #fff;opacity:.8;position:relative;}
  2. div#carrinho-info{padding:10px;}
  3. div#carrinho-container{height:240px;position:absolute;width:240px;background-color:#fff;border:2px solid #c92d21;display:none;}
  4. div#carrinho-container ul{overflow:auto;height:200px;list-style:none;margin:10px;}
  5. div#carrinho-container ul li{color:#333;font-size:12px;border-bottom:1px dotted #ccc;text-align:center;margin:10px;}
  6. ul#produtos li{float:left;background-color:#fff;-moz-box-shadow:5px 5px 5px #ccc;-webkit-box-shadow:5px 5px 5px #ccc;box-shadow:5px 5px 5px #ccc;width:270px;text-align:center;margin:15px;padding:10px;}

Animando a barra superior

O primeiro passo da nossa implementação é fazer com que a barra superior acompanhe os movimentos do usuário, fazendo com que a área de drop dos produtos fique sempre visível. Para tornar isso possível associaremos uma função ao evento scroll da janela (window).

Toda vez que a a distância do scroll para o topo for maior do que a metade da altura da barra, o CSS será alterado para que a barra fique sempre visível e uma leve animação levará a barra para onde for o scroll.

  1. // associando uma função ao evento scroll da janela
  2. $(window).scroll(function(){
  3. // valor do scroll – distância entre a barrinha menor e o início do scroll
  4. var wtop   = $(this).scrollTop();
  5. // objeto da barra superior
  6. var carrinho  = $(‘#carrinho-top’);
  7. // objeto container do site
  8. var container = $(‘#container’);
  9. // altura do carrinho
  10. var cheight  = $(carrinho).height();
  11. // distância do scroll é maior do que a altura da barra / 2 ?
  12. if( wtop &gt; ( cheight / 2 ) )
  13. {
  14. // adiciona uma margem ao container para evitar quebra do lay-out
  15. $(container).css(‘margin-top’, cheight+‘px’);
  16. // transforma a position da barra em absolute
  17. $(carrinho)
  18. .css({
  19. position: ‘absolute’
  20. })
  21. // anima utilizando a propriedade marginTop, com velocidade de 100ms
  22. .animate({
  23. marginTop: ( wtop – cheight ) + ‘px’
  24. }, 100);
  25. }
  26. });

O funcionamento básico do método animate() segue o formato acima. O primeiro parâmetro é composto por um ou vários atributos CSS que farão a animação do elemento. No nosso caso, a barra será animada do valor original da sua margem superior até a especificada na função (a distância do scroll subtraída da altura da barra). Já o segundo parâmetro recebe um valor em milissegundos para efetuar a transição.

Precisamos agora de uma outra condição: quando o usuário voltar para o topo da página, nossa barra precisa recuperar o estado inicial, “fixado” no corpo:

  1. // distância do scroll é menor do que a metade da altura da barra
  2. else
  3. {
  4. $(container).css(‘margin-top’, 0);
  5. $(carrinho)
  6. .stop(true, true)
  7. .css({
  8. position: ‘relative’,
  9. marginTop: 0
  10. });
  11. }

Definindo as áreas de drag and drop

Utilizando a biblioteca jQuery UI vamos definir os elementos que podem ser arrastados (qualquer li dentro da lista #produtos) e a área que vai recebê-los, no nosso caso o div #carrinho-container.

  1. $(‘#produtos li’).draggable({
  2. helper: ‘clone’,
  3. start: function()
  4. {
  5. $(‘#carrinho-container’).show();
  6. }
  7. });

Os produtos, que podem ser arrastados, recebem o método draggable. Já ao box do carrinho é aplicado o método droppable. A chamada dos ítens recebe apenas o parâmetro helper e o evento start. O parâmetro helper pode receber os valores ‘original’, ‘clone’ ou uma função. Utilizaremos ‘clone’ que, como o nome sugere, clona o elemento original na ação de arrastar.

Já evento start acontece assim que o elemento começa a ser arrastado. Quando um produto sofre a ação de arrastar, precisamos exibir o carrinho, que é nossa área de drop.

  1. $(‘#carrinho-produtos’).droppable({
  2. hoverClass: ‘ui-state-hover’,
  3. drop: function( event, ui )
  4. {
  5. // remove a marcação “arraste produtos para esta área”
  6. $(this).find(‘.adicione’).remove();
  7. // busca o ID do produto no campo hidden
  8. var cod = ui.draggable.find(‘.produto-id’).val();
  9. // verifica se o produto existe
  10. if( $(this).find(‘#clone-‘+cod).length == 0 )
  11. {
  12. // adiciona o elemento li à lista de produtos do carrinho
  13. $(‘<li></li>’).html(ui.draggable.html()).prependTo( this );
  14. // animação para indicar que o produto foi adicionado
  15. $(this).find(‘li:first’).slideDown();
  16. // atualiza total de produtos do carrinho
  17. var total_produtos = $(this).find(‘li’).length;
  18. $(‘#carrinho-info’).html(‘<p>’ + total_produtos + ‘ produto’ + ( total_produtos &gt; 1 ? ‘s’ : ) + ‘</p>’ );
  19. }
  20. }
  21. });

No método droppable utilizaremos também um parâmetro e um evento. O parâmetro é o hoverClass, que especifica uma classe que será aplicada a àrea de drop quando um ítem estiver sendo arrastado (vamos utilizar o padrão da jQuery UI). E o evento drop é acionado toda vez que um elemento for “solto” no carrinho. Nossa função primeiro verifica se o produto já existe no carrinho. Caso não exista, cria um novo elemento li na lista com os dados do produto.

Para uma lista completa dos parâmetros e eventos visite jqueryui.com/demos/draggable e jqueryui.com/demos/droppable

Melhorando a exibição do carrinho

O código mostrado até agora tem um problema básico. Toda vez que o produto é adicionado o carrinho “some”. Seria legal que ele ficasse visível por uma certa quantidade detempo e só depois de um período de inatividade fosse escondido. Para isso vamos implementar um timer global na variável timerCarrinho.

Toda vez que o mouse estiver sobre o carrinho o timer é zerado. E, quando o mouse deixar a área, depois de 5 segundos, o carrinho é escondido.

  1. var timerCarrinho = ;
  2. $(‘#produtos li’).draggable({
  3. helper: ‘clone’,
  4. start: function()
  5. {
  6. clearTimeout( timerCarrinho );
  7. $(‘#carrinho-container’).show();
  8. }
  9. });
  10. $(‘#carrinho-container’).mouseenter(function(){
  11. clearTimeout( timerCarrinho );
  12. });
  13. $(‘#carrinho-container’).mouseleave(function(){
  14. var carrinho = $(this);
  15. timerCarrinho = setTimeout( function(){
  16. $(carrinho).slideUp();
  17. }, 5000 );
  18. });

Dever de casa

Essa é uma versão básica de um carrinho drag and drop que pode sofrer diversas melhorias. Segue abaixo uma lista de implementações e funcionalidades novas pra vocês praticarem um pouco:

  • Remover animação da barra, fazendo todo o posicionamento via CSS;
  • Ao adicionar um produto que já exista no carrinho, aumentar a quantidade ao invés de ignorar;
  • Adicionar funcionalidade para excluir produtos do carrinho;
  • Salvar em cookie o carrinho do usuário, ou via AJAX, ou com o plugin de cookies do jQuery.

Por Davi Ferreira

Fonte: Tableless

Tags | , , , , , ,