[RESOLVIDO] Como faço para manter exibida uma borda vermelha apenas no botão que foi clicado por último?

18 de julho de 2018 4 respostas Resolvido

jMarcel 18 de julho de 2018

Olá pessoal.

Eu tenho um painel com 3 commandButtons do Primefaces que possuem critérios distintos para filtrar uma tabela - e isso já está funcionando perfeitamente.

<p:commandButton id="idBt1" value="#{demandasController.qtdTodas} - Todas" action="#{demandasController.pressedFilter()}" actionListener="#{demandasController.checkClicked}" />

O que eu gostaria é de mostrar, de alguma forma, para o usuário que a tabela está filtrada de acordo com o botão que ele clicou.

Para isso, eu estou tentando deixar a borda inferior do botão colorida de vermelho, o que indicaria qual foi o último botão que ele clicou e, consequentemente, qual é o respectivo filtro que está aplicado na tabela.

Fiz isso no meu CSS e, como eu gostaria, a borda vermelha realmente aparece quando eu passo o mouse pelos botões. Porém, quando eu clico em um botão, a borda em vermelho some

.ui-button.ui-state-hover, .ui-button.ui-state-active {
  border-bottom-color: red;
  border-bottom-style: solid;
  border-bottom-width: thick;
}

Alguém sabe como faço para manter exibida a borda vermelha apenas no botão que foi clicado por último?

4 Respostas

Solucao aceita

Mike 18 de jul. de 2018 1 like

Ola @jMarcel, eu já tentei fazer isso também apenas com CSS, mas não consegui.
A minha solução foi usar SelectOneButton, e eram 3 também.

É possivel adicionar classes a um componente com JS/JQuery.
Testa ai

PS: Não pode dar update no botão, se não some a classe. Ai terá que ter outra abordagem

Arquivo JS

$(document).ready(function()
{
	$('.teste').bind('click', function(){
		console.log("ui");
		$(this).toggleClass('pintar-borda');
		  $('.teste').not(this).removeClass('pintar-borda');

	})
})

XHTML

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
		xmlns:h="http://java.sun.com/jsf/html"
		xmlns:f="http://java.sun.com/jsf/core"
		xmlns:ui="http://java.sun.com/jsf/facelets"
		xmlns:p="http://primefaces.org/ui">
		
	<h:head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>JSF</title>
		<h:outputStylesheet library="style" name="estilos.css"></h:outputStylesheet>
		<h:outputScript library="js" name="toggle.js"></h:outputScript>
		
	</h:head>
	
	<h:body>
		<h:form>
			<p:commandButton value="Botao 1" process="@this" styleClass="teste"></p:commandButton>
			
			<p:commandButton value="Botao 2" process="@this" styleClass="teste"></p:commandButton>
		</h:form>
	</h:body>
</html>

CSS

.pintar-borda{
	border: 1px solid red !important;
}

jMarcel 18 de jul. de 2018 1 like

Ei Mike, deu certo !!! Muito obrigado mesmo meu amigo!!!

Mike 18 de jul. de 2018

Opa!
De nada, tamo ai pra isso haha

Considere marcar como “Solução”

jMarcel 18 de jul. de 2018 1 like

Opa, tinha me esquecido, só havia marcado como Resolvido Mike. Valeu !!!

Criado 18 de julho de 2018

Ultima resposta 18 de jul. de 2018

Respostas 4

Participantes 2

4 Respostas

Topicos relacionados