data-toggle

[barogana 0]

Srs, depois de 2 anos longe das web pages, estou precisando de ajuda...

 

utilizei um exemplo (web), para fazer um conteúdo collapsável, mas precisei fazer uma implementação, para dinamizar o conteúdo, que funcionou em parte.

O problema é que ao clicar no botão de expandir, se houver um outro elemento visivel, não fecha o atual, e ficam todos os elementos clicados expostos.

 

ex. Se abrir o conteudo de a1, e depois clicar em a99999, vai abrir o a1 aberto(visivel)  e também o a99999, e isto não é o ideal.

 

Alguma ajuda, pls...
 

<style>
.hiddenRow {
    padding: 0 !important;
}
</style>

...

<div class="container">
	<div class="col-md-12">
   	<div class="panel panel-default">
			<div class="panel-heading">Fases</div>
			<div class="panel-body">
				<table class="table table-condensed table-striped">
				<thead>
					<tr><th></th><th>nome</th><th>Prêmio</th></tr>
				</thead>
				<tbody>
					<tr data-toggle="collapse" data-target="#a1" name="a1" class="accordion-toggle class2">
						<td><button class="btn btn-default btn-xs"><i class="fa fa-eye" aria-hidden="true"></i></button></td>
						<td>nome</td><td>Vários</td>
					</tr>
					<tr>
						<td colspan="2" class="hiddenRow">
							<div class="accordian-body collapse" id="a1"><div>
						</td>
					</tr>

					<tr data-toggle="collapse" data-target="#a2" name="a2" class="accordion-toggle class2">
						<td><button class="btn btn-default btn-xs"><i class="fa fa-eye" aria-hidden="true"></i></button></td>
						<td>nome</td><td>Vários</td>
					</tr>
					<tr>
						<td colspan="2" class="hiddenRow">
							<div class="accordian-body collapse" id="a2"><div>
						</td>
					</tr>
				</tbody>
			</div>	
		</div>
	</div>
</div>

... 
</body>

<script>
function LoadPage(onde,qual){
	$(onde).load(qual, function(){ 
		$(onde).slideDown();
	});
}

$(document).ready(function() {
/*
 $($(this).data("target")).modal("show");
*/
	$('.class2').click( function() {
		//id = $(this).attr('id');
		fd = $(this).attr('name');	//nome da div onde carregará o arquivo de mesmo nome
		LoadPage("#"+fd,"sitePages/instancias/"+fd+".php");
	});
});

 

 

[Omar~ 87]

Não vou reinventar a roda aqui porque já criei um script para tal....

https://github.com/Spell-Master/sm-web/tree/master/javascript/Accordion

 

Uma ponderação....

Quer dizer que toda vez que uma pessoa clicar um conteúdo será recaregado mesmo sem precisar recarregar?

Tire essa coisa de .load do jquery, pré renderize tudo você pouca internert dos seus usuários e agiliza em muito "MAS MUITO MESMO" no desempenho.

Caso seja necessário uma suposta atualização coisa que não acredito que seja, use o socket para ver se algo foi modificado e então re-defina o html e nada de usar essa coisa de load do jquery

[barogana 0]

12 horas atrás, Omar~ disse:

Não vou reinventar a roda aqui porque já criei um script para tal....

https://github.com/Spell-Master/sm-web/tree/master/javascript/Accordion

 

Uma ponderação....

Quer dizer que toda vez que uma pessoa clicar um conteúdo será recaregado mesmo sem precisar recarregar?

Tire essa coisa de .load do jquery, pré renderize tudo você pouca internert dos seus usuários e agiliza em muito "MAS MUITO MESMO" no desempenho.

Caso seja necessário uma suposta atualização coisa que não acredito que seja, use o socket para ver se algo foi modificado e então re-defina o html e nada de usar essa coisa de load do jquery

 

[barogana 0]

Obrigado pela resposta.
É manutenção em um site que já está pronto.
De qualquer forma obrigado.
Algum link para estudar renderização?

[Omar~ 87]

Renderizar que dizer que os conteúdos já vão está no documento, não sendo necessário carregar novamente ou ficar carregando repetitivamente a mesma coisa.

No entando dependendo do contexto pode ser necessário que o conteúdo seja atualizado e isso pode ser feito somente quando for necessário.

A ferramenta para isso eu sugiro: https://socket.io/

 

No seu caso a função load do jQuery irá executar um ajax toda vez que o elemento é clicado, ou seja o conteúdo a ser exibido tem que ser recarregado tanto para seu usuário quanto para seu servidor. Que tem de analizar a requisição > processar-la > obter o retorno > definir o html e entregar pera o usuário, daí o hadware do usuário recebe os dados > analiza > compila > depois re-escreve o html.

Ou seja almenta o custo de processamento para ambos.

 

Sobre o expandir ou recolher o(s) elemento(s)

A coisa é simples:

Ter um elemento no caso um <button> que se refere a outro elemento, quando esse buttom é clicado seu elemento de referência é expandido e os demais elementos iguais são retraídos.

Bastando apenas utilizar do CSS onde um classificador diz que o elemento tem altura 0 "zero", ao clicar o obtão que o ferere, um função checa todos semelhantes aqueles que não é o alvo o classificador que diz que o elemento deve ter zero de altura é adicionado. E no alvo esse classificador é removido.

Veja um exemplo bem básico:

Spoiler

<style>
    div[data-toggle] {
        overflow: hidden;
        /* Exemplo aplicando o feito de expansão */
        height: 200px;
        transition: height .5s linear;
    }
    div[data-toggle].retraido {
        height: 0
    }

    /* Apenas para mostrar uma cor de fundo */
    div[data-toggle]:nth-child(1) {
        background: red
    }
    div[data-toggle]:nth-child(2) {
        background: blue
    }

</style>

<button data-toggle="1">Alvo 1</button>
<button data-toggle="2">Alvo 2</button>


<div class="retraido" data-toggle="1">
    <p>Lorem ipsum dolor sit amet</p>
    <p>Este conteúdo já está renderizado, não será recarregado</p>
</div>
<div class="retraido" data-toggle="2">
    <p>Curabitur pretium tincidunt lacus</p>
    <p>Este conteúdo já está renderizado, não será recarregado</p>
</div>


<script>
    var div = document.querySelectorAll('div[data-toggle]');

    document.querySelectorAll('button[data-toggle]')
    .forEach(function (e) {
        e.addEventListener('click', exemplo, false);
    });

    function exemplo(e) {
        for (var i = 0; i < div.length; i++) {
            if (div[i].dataset.toggle === e.target.dataset.toggle) {
                div[i].classList.toggle('retraido');
            } else {
                div[i].classList.add('retraido');
            }
        }
    }
</script>

 

Lógico que para um efeito mais preciso principalmente para ter a correta altura dos elementos é necessário maior intenvensão do script, mas com o básico já se dar para ter a ideia como a coisa tem de ser...

Retraia tudo, quando for o alvo expanda se ele ainda não foi expandido, do contrário se ele já está expandido retraia ele.