Ir ao conteúdo
  • Cadastre-se
JosuéVfazani

Botões em html como fazer?

Recommended Posts

@JosuéVfazani Poderia por gentileza dar mais detalhes do que gostaria de saber?

Criar botões em html é relativamente simples. 

Pode-se fazer de dois modos,  por tag <button>  ou por elementos a nível de bloco, por exemplo Div e outros.

 

Já a adição de "script" é via Javascript. seja em javascript puro ou jQuery.

 

Se você explicar melhor seu objetivo, com detalhes, podemos ajudar você a entender como fazer.

Compartilhar este post


Link para o post
Compartilhar em outros sites

O que eu quero fazer é o seguinte, eu quero criar um botão para que quando clicado, vai alterar a cor do background da pagina, e eu queria fazer o script em javascript se possivel

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

@JosuéVfazani

Basicamente, você pode usar as funções css()  do jQuery para alterar a cor da propriedade background de um elemento. 

 

Por exemplo:

 

<a href="#" class="trocar">trocar cor<a/>

  <div class="backgroud"></div>  
  
$(document).ready(function(){
	$('.trocar').on('click', function(){
  		$('.backgroud').css({'background-color':'#f00' });
  });  
});  

Primeiro mostrei a marcação HTML.

Depois, um elemento DIV.

 

Mais abaixo, o javascript onde quando o documento estiver pronto, quando clicar no elemento com a classe trocar,  o elemento da classe background, setará a cor de fundo para vermelho.

 

Lembre-se que pode trocar o $('.backgroud')  por $('body')

que nesse caso você troca a cor de fundo da página.

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

To com outra duvida se puder ajudar agradeço, quanto a duvida anterior consegui resolver, se quiser mando o código, 

Eu queria fazer aquele negocio em menus que quando voce clica ou passa o mouse por cima desse uma lista de opções

 

 outra coisa como eu faço para uma funçãoem uma pagina afetar outra pagina

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

@JosuéVfazani

Sobre o menu,  o que você quer fazer é um menu dropdown. 

 

Existe duas maneiras de fazer:

A comum usando elementos de lista não ordenada UL e LI

Utilizar a técnica Listless. Ou seja, sem lista não ordenada. Mas sim usando Div, 

 

Explicado neste tópico:

 

4 horas atrás, JosuéVfazani disse:

 outra coisa como eu faço para uma funçãoem uma pagina afetar outra pagina

Poderia explicar com mais detalhes?

Compartilhar este post


Link para o post
Compartilhar em outros sites

desculpa a demora para responder eu estudo o dia todo e não deu tempo

Sobre o menu dropdown você poderia colocar pelo menos um pouco de codigo para que eu possa visualizar melhor o q você disse

 

sobre o outro é o seguinte eu com a tag frameset dividi uma uma pagina em dois, para que a aba menor funcionasse como menu de opções, nessa aba eu consegui fazer um botao que muda a cor do fundo, mas em vez de mudar a cor do frame onde esta o botao eu queria mudar a cor do segundo frame

Ou seja afetar outra pagina com um codigo que esta em outra.  

E DIF só pra constar quero agradecer você ta me ajudando bastante

Compartilhar este post


Link para o post
Compartilhar em outros sites

@JosuéVfazani

 

Basicamente os menus dropdown possuem  dois níveis de elementos da lista não ordenada.

Por exemplo:

<nav> <!-- Elemento NAV pai  -->
<ul class="menu"> <!-- Elemento UL filho de NAV -->
  <li> <!-- Elemento LI filho de UL  --> 
  	<ul class="submenu"> <!-- Elemento UL filho de LI -->
      <li></li> <!-- Elemento LI filho de UL  -->
    </ul>
  </li>
  <li></li> <!-- Elemento LI filho de UL, irmão adjascente de LI  -->
</ul>
</nav>  

Para entender esta estrutura, temos que lembrar sobre estrutura de árvore DOM.  

dom_tree.gif?resize=700%2C365

De acordo com a árvore, o elemento raiz é html. head e body são irmãos adjacentes.

Repare que UL, é irmão de P,  irmão de H1 e filho de body.

UL, possui 3 filhos. estes 3 filhos são irmãos adjacentes .

Esta é a representação da árvore dom. Não necessariamente o html vai ser chamado de pai ou raiz.

 

Voltando ao nosso código de exemplo, O elemento NAV é  o elemento pai do menu.

O elemento UL é a nossa lista não ordenada.

O elemento LI filho de UL é o ítem do menu. Dentro dele pode ter outro bloco de UL que será chamado de submenu.

 

Bom esta é só uma estrutura básica. A mágica toda é no CSS.

Com a posição relativa e absoluta.

Aqui está o exemplo: https://jsfiddle.net/o8cfx0za/

 

Contudo, há outra alternativa se quiser, é com a técnica listless. Consiste em não utilizar listas não ordenadas.

Usa-se DIV, Span e outros elementos.

Mas no mesmo modo que o método normal, a mágica toda é no CSS!

Veja um exemplo prático: https://jsfiddle.net/3jd6aoLy/1/

Neste exemplo, experimente copiar todo o bloco de DIV class  dropown e cole um a baixo do outro. e rode o exemplo novamente com o botão run. Veja que vai adicionar um bloco de menu lado a lado.

Estude o CSS, Veja o pseudo-elemento hover!

 

9 horas atrás, JosuéVfazani disse:

sobre o outro é o seguinte eu com a tag frameset dividi uma uma pagina em dois

 O frameset é um elemento obsoleto. Além de ser o antecedente do iframe. E ainda assim o iframe não é recomendando.

Por isso eu sugiro que você refaça ele com DIv,   e outros elementos mais recentes.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×