seja bem vindo ao forum eof, caso nao seja cadastrado se cadastre para poder visualizar todo o conteudo ^^

Participe do fórum, é rápido e fácil

seja bem vindo ao forum eof, caso nao seja cadastrado se cadastre para poder visualizar todo o conteudo ^^
Gostaria de reagir a esta mensagem? Crie uma conta em poucos cliques ou inicie sessão para continuar.

Você não está conectado. Conecte-se ou registre-se

 » Programação Web » Javascript / Jquery / Ajax » [tutorial] criar spoiler em javascript/css

[tutorial] criar spoiler em javascript/css

Ir para baixo  Mensagem [Página 1 de 1]

Kodo no Kami

Kodo no Kami
master
master

bom galera spoiler sao aqueles botoes para ocultar e desocultar parte da pagina muito encontrado em forum e blogs, veja um exemplo abaixo do spoiler do forum

Spoiler:

se voce estiver vendo esse tutorial pelos foruns phpbb acredite nosso spoiler vai ficar mais bonitinho doq o anterior '-' , para começar vamos criar uma pagina html basica

Código:
<html>
<body>
</body>
</html>

agora vamos criar um botao vai ser por ele q agente vai ocultar e desocultar o spoiler, para isso agente usa tag input do tipo button

Código:
<html>
<body>
   <input type="button" value="spoiler">
</body>
</html>

nao e necessario criar uma tabela, mais acho q isso deixa nosso spoiler com um visual melhor entao vamos la, para criar uma table usamos 3 tags q sao table, tr, td, na tag table agente usa o atributo border e o numero da bordar, dentro da tag table agente cria a tag tr e dentro dela agente cria a tag td nao se esquece de fechar as tags na ordem certa, agora agente coloca nosso botao la dentro da tag td

Código:
<html>
<body>
   <table border="1">
      <tr>
         <td>
            <input type="button" value="spoiler">
         </td>
      </tr>
   </table>
</body>
</html>

depois do fechamento da tag tr agente coloca mais um tr e td, ai dentro q agente vai colocar nosso conteudo

Código:
<html>
<body>
   <table border="1">
      <tr>
         <td>
            <input type="button" value="spoiler">
         </td>
      </tr>
      <tr>
         <td>
            by hacker fts315
         </td>
      </tr>
   </table>
</body>
</html>

bom eu presumo q vc vai querer q seu spoiler ja fique oculto entao ai ja vai começar a parte css, no td do nosso conteudo agente coloca o atributo style="display:none" e um id para mais tarde agente poder alterar o valor pelo javascript

Código:
<html>
<body>
   <table border="1">
      <tr>
         <td>
            <input type="button" value="spoiler">
         </td>
      </tr>
      <tr style="display:none" id="conteudo">
         <td>
            by hacker fts315
         </td>
      </tr>
   </table>
</body>
</html>

pronto agora so falta a parte javascript. para isso criamos uma tag script fora da tabela tambem usamos o atributo type="text/javascript" nela

Código:
<html>
<body>
   <table border="1">
      <tr>
         <td>
            <input type="button" value="spoiler">
         </td>
      </tr>
      <tr style="display:none" id="conteudo">
         <td>
            by hacker fts315
         </td>
      </tr>
   </table>
   
   <script type="text/javascript">
   </script>
</body>
</html>

criamos uma funçao la dentro q eu vou chamar de fts_spoiler, e no botao agente criar um atributo chamado onclick e colocamos nossa funçao la tambem

Código:
<html>
<body>
   <table border="1">
      <tr>
         <td>
            <input type="button" value="spoiler" onclick="fts_spoiler()">
         </td>
      </tr>
      <tr style="display:none" id="conteudo">
         <td>
            by hacker fts315
         </td>
      </tr>
   </table>
   
   <script type="text/javascript">
      function fts_spoiler()
      {
      }
   </script>
</body>
</html>

so tem um botao entao vai ser por ele q agente vai ocultar e desocultar para isso agente tem q fazer uma checagem para ver oq ele tem q fazer, usamos a condiçao if dentro dela pegamos o valor do atributo do style mais como vamos fazer isso '-' , usamos o document.getElementById para pegar o id no meu caso o id e conteudo, logo em seguido o atributo .style.display e comparamos com none

Código:
<html>
<body>
   <table border="1">
      <tr>
         <td>
            <input type="button" value="spoiler" onclick="fts_spoiler()">
         </td>
      </tr>
      <tr style="display:none" id="conteudo">
         <td>
            by hacker fts315
         </td>
      </tr>
   </table>
   
   <script type="text/javascript">
      function fts_spoiler()
      {
         if(document.getElementById("conteudo").style.display == 'none')
         {
         }
      }
   </script>
</body>
</html>

dentro da condiçao if agente pega o atributo .style.display so q agora atribuimos block a ele

Código:
<html>
<body>
   <table border="1">
      <tr>
         <td>
            <input type="button" value="spoiler" onclick="fts_spoiler()">
         </td>
      </tr>
      <tr style="display:none" id="conteudo">
         <td>
            by hacker fts315
         </td>
      </tr>
   </table>
   
   <script type="text/javascript">
      function fts_spoiler()
      {
         if(document.getElementById("conteudo").style.display == 'none')
         {
            document.getElementById("conteudo").style.display = 'block';
         }
      }
   </script>
</body>
</html>

pronto agora falta ocultar o conteudo denovo para isso usamos a condiçao else e dentro dela no atributo .style.display atribuimos none a ele

Código:
<html>
<body>
   <table border="1">
      <tr>
         <td>
            <input type="button" value="spoiler" onclick="fts_spoiler()">
         </td>
      </tr>
      <tr style="display:none" id="conteudo">
         <td>
            by hacker fts315
         </td>
      </tr>
   </table>
   
   <script type="text/javascript">
      function fts_spoiler()
      {
         if(document.getElementById("conteudo").style.display == 'none')
         {
            document.getElementById("conteudo").style.display = 'block';
         }
         else
         {
            document.getElementById("conteudo").style.display = 'none';
         }
      }
   </script>
</body>
</html>

bom galera e isso ^^

by hacker fts315

https://endoffile.umforum.net

Ir para o topo  Mensagem [Página 1 de 1]

 » Programação Web » Javascript / Jquery / Ajax » [tutorial] criar spoiler em javascript/css

Permissões neste sub-fórum
Não podes responder a tópicos