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

Front-end
,
#1

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 :weary:

.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?

#2

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;
}
1 curtida
#3

Ei Mike, deu certo !!! Muito obrigado mesmo meu amigo!!!:+1::+1::+1::smiley::smiley::smiley:

1 curtida
#4

Opa!
De nada, tamo ai pra isso haha

Considere marcar como “Solução” :slight_smile: :+1:

#5

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

1 curtida