Efeitos espetaculares em DHTML

Incluir os JS externos no <head> do template

  1. Para todas as páginas
    <script src="../dhtml/scriptaculous/lib/prototype.js" type="text/javascript"></script>
    <script src="../dhtml/scriptaculous/src/scriptaculous.js" type="text/javascript"></script>
    <script src="../dhtml/scriptaculous/src/unittest.js" type="text/javascript"></script>
    <script src="../dhtml/ajaxtabs/ajaxtabs.js" type="text/javascript"></script>

Menu

  1. Esconder o submenu
    <ul id="drop" style="display:none;">
  2. Aplicar efeito Slide
    onclick="Effect.toggle('drop','slide'); return false;"

Home

  1. <script type="text/javascript" language="javascript" charset="utf-8">
    // <![CDATA[
    Element.hide('fixa');
    new Effect.Appear('fixa');
    new Effect.Grow("posicao1",{duration:1.5,direction: 'right',opacityTransition:Effect.Transitions.linear});
    new Effect.Grow("posicao2",{duration:1.0,direction: 'right',opacityTransition:Effect.Transitions.linear});
    new Effect.Grow("posicao3",{duration:0.5,direction: 'right',opacityTransition:Effect.Transitions.linear});
    // ]]>
    </script>

Pacotes

  1. Incluir os efeitos após os boxes
    <script type="text/javascript" language="javascript" charset="utf-8">
    // <![CDATA[
    new Effect.Grow("id1",{duration:2.0,direction: 'top',opacityTransition:Effect.Transitions.linear});
    new Effect.Grow("id2",{duration:1.0,direction: 'left',opacityTransition:Effect.Transitions.linear});
    new Effect.Grow("id3",{duration:5.0,direction: 'right',opacityTransition:Effect.Transitions.linear});
    new Effect.Grow("id4",{duration:7.0,direction: 'bottom',opacityTransition:Effect.Transitions.linear});
    new Effect.Grow("id5",{duration:3.0,direction: 'left',opacityTransition:Effect.Transitions.linear});
    new Effect.Grow("id6",{duration:6.0,direction: 'left',opacityTransition:Effect.Transitions.linear});
    new Effect.Grow("id7",{duration:8.0,direction: 'left',opacityTransition:Effect.Transitions.linear});
    new Effect.Grow("id8",{duration:1.0,direction: 'left',opacityTransition:Effect.Transitions.linear});
    new Effect.Grow("id9",{duration:2.0,direction: 'left',opacityTransition:Effect.Transitions.linear});
    // ]]>
    </script>

Galerias

  1. Exibir a lista de thumbnails
    <h2><a onClick="Effect.toggle('galeria1','BLIND'); return false;"
  2. Ocultar a lista de thumbnails
    style="display:none;"
  3. Direcionando as imagens grandes para o lightbox
    rel="lightbox[balao1]"
    Enter colchetes delimitamos as galerias
  4. title="Se a corda arrebentar...!" para legendas

Atividades > Mountain biking

  1. Inicializar o script após os boxes
    <script type="text/javascript">
    //Start Ajax tabs script for UL with id="maintab" Separate multiple ids each with a comma.
    startajaxtabs("maintab")
    </script>
  2. Conferir container
    <div id="ajaxcontentarea" class="ajax_conteudo">
  3. Linkar as abas
    rel="ajaxcontentarea"
  4. Definir a aba inicial
    <li class="selected">

Roteiros

  1. Linkar cada âncora para os respectivos IDs
    onclick="new Effect.ScrollTo('id1',{duration:2.0}); return false;"

Busca

  1. Aplicar o suggest
    <script type="text/javascript" language="JavaScript" charset="utf-8">
    // <![CDATA[
    new Autocompleter.Local('q','q_sugestao',
    new Array("Treking", "Mountainbiking", "Escalada", "Rapel", "Rafting", "Mergulho", "SkyDiving", "Paraquedismo"), { tokens: new Array(',','\n'), fullSearch: true, partialSearch: true });
    // ]]>
    </script>