Fórum JQuery TreeView, visual estranho #512379

01/03/2015

0

Front-end

Boa tarde,

Testando o JQuery TreeView, gostei do recurso, mas achei o simbolos de + - meio estranho, quando expando tudo bem, mas quando eu recuo o recurso, ficam todos juntos.

As imagens devem ajudar a entender melho

[img]http://arquivo.devmedia.com.br/forum/imagem/323571-20150301-132728.jpg[/img]

Estranho

[img]http://arquivo.devmedia.com.br/forum/imagem/323571-20150301-132744.jpg[/img]

Mais ou menos correto.

tem como modificar? deixar mais separado.
Marcelo Pastore

Marcelo Pastore

Responder

Posts

02/03/2015

Randrade

Olá Marcelo,

Esse recurso possui vários modelos, e você pode modificar cada um como bem entender.

Não sei qual você está utilizando, e como está seu código, mas posso deixar uma dica de como chegar ao resultado esperado.

Esses recursos sempre possuem arquivos JS e CSS, e a alteração desejada é feita em um dos dois arquivos, já modifiquei alguns no css e outros no js, depende do que necessita.
Aconselho a utilizar a ferramenta de análise e depuração que os navegadores possuem, geralmente apertando f12, e realizar a modificação na página, após obter o resultado desejado, realize a alteração no arquivo.

Sobre o JQuery TreeView, neste site possui vários exemplos diferentes e interessantes.
Responder

Gostei + 0

02/03/2015

Marcelo Pastore

Só posso fazer as modificações nesses arquivos? se quiser posso postar meu código.
Responder

Gostei + 0

02/03/2015

Randrade

Geralmente são esses arquivos que define o espaçamento, dentre outras configurações.
Se postar seu código, ajudaria a verificar para você.
Responder

Gostei + 0

02/03/2015

Marcelo Pastore

Postando...


<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery treeview</title>
		
		<script type="text/javascript" src="jquery.treeview/lib/jquery.js"></script>
		<script type="text/javascript" src="jquery.treeview/jquery.treeview.js"></script>
		<script type="text/javascript" src="jquery.treeview/lib/jquery.cookie.js"></script>
		
		<link rel="stylesheet" href="jquery.treeview/jquery.treeview.css"/>
		
		<style type="text/css">
			
		</style>
		
		<script type="text/javascript">
			$(document).ready(function () {
				$('#tree').treeview({
					animated: 'fast',
					toggle: function() {
						//alert('o foi selecionado');
					},
					persist: 'cookie',
					cookieId: 'abc'
				});
			});
		</script>
	</head>
	
	<body>
		<ul class="treeview-red treeview" id="tree">
			<li><div class="hitarea collapsable-hitare"></div>
				<ul>
					<li class="collapsable"><span class="file">Inicio</span></li>
					<li class="last"><span class="file">Olá Mundo</span></li>
				</ul>
			</li>	
			<li class=""><div class="hitarea collapsable-hitare"></div>
				<ul>
					<li class="collapsable"><span class="file">Inicio</span></li>
					<li class="last"><span class="file">Olá Mundo 2</span></li>
				</ul>
			</li>
			<li class="closed expandable"><div class="hitarea collapsable-hitare"></div>
				<ul>
					<li class="collapsable"><span class="file">Inicio</span></li>
					<li class="last"><span class="file">Olá Mundo 3</span></li>
				</ul>
			</li>		
		</ul>
	</body>
</html>
Responder

Gostei + 0

06/03/2015

Marcelo Pastore

Randrade, não esquece desse post.
abraço.
Responder

Gostei + 0

10/03/2015

Leonardo Melo

Pelo que entendi o que eles falaram vc tem que ir nesse arquivo,
<link rel="stylesheet" href="jquery.treeview/jquery.treeview.css"/>
e alterar as configurações do CSS e deixar do jeito que vc deseja.
Responder

Gostei + 0

10/03/2015

Marcelo Pastore

É um arquivo que desconheço, não sei realmente aonde fazer a modificação.
Responder

Gostei + 0

11/03/2015

Randrade

Randrade, não esquece desse post.
abraço.


Desculpe a demora. Andei um pouco ocupado.

Mas eu realizei o download da biblioteca Neste link e adicionei o código abaixo, para o exemplo que você passou.
Tente alterar o seu código para este, mudando apenas o local dos arquivos em seu diretório.

<!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">
<head>

	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
	<title>jQuery treeview</title>

	<link rel="stylesheet" href="../jquery.treeview.css" />
	<link rel="stylesheet" href="screen.css" />

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
	<script src="jquery.cookie.js"></script>
	<script src="../jquery.treeview.js"></script>

	<script type="text/javascript">
	$(document).ready(function(){

	// first example
	$("#browser").treeview();

	// second example
	$("#navigation").treeview({
		persist: "location",
		collapsed: true,
		unique: true
	});

	// third example
	$("#red").treeview({
		animated: "fast",
		collapsed: true,
		unique: true,
		persist: "cookie",
		toggle: function() {
			window.console && console.log("%o was toggled", this);
		}
	});

	// fourth example
	$("#black, #gray").treeview({
		control: "#treecontrol",
		persist: "cookie",
		cookieId: "treeview-black"
	});

});</script>

	</head>
     
    <body>
   <ul id="red" class="treeview-red">
	<li><span>Item 1</span>
		<ul>
			<li><span>Item 1.0</span>
				<ul>
					<li><span>Item 1.0.0</span></li>
				</ul>
			</li>
			<li><span>Item 1.1</span></li>
			<li><span>Item 1.2</span>
				<ul>
					<li><span>Item 1.2.0</span>
					<ul>
						<li><span>Item 1.2.0.0</span></li>
						<li><span>Item 1.2.0.1</span></li>
						<li><span>Item 1.2.0.2</span></li>
					</ul>
				</li>
					<li><span>Item 1.2.1</span>
					<ul>
						<li><span>Item 1.2.1.0</span></li>
					</ul>
				</li>
					<li><span>Item 1.2.2</span>
					<ul>
						<li><span>Item 1.2.2.0</span></li>
						<li><span>Item 1.2.2.1</span></li>
						<li><span>Item 1.2.2.2</span></li>
					</ul>
				</li>
				</ul>
			</li>
		</ul>
	</li>
	<li><span>Item 2</span>
		<ul>
			<li><span>Item 2.0</span>
				<ul>
					<li><span>Item 2.0.0</span>
					<ul>
						<li><span>Item 2.0.0.0</span></li>
						<li><span>Item 2.0.0.1</span></li>
					</ul>
				</li>
				</ul>
			</li>
			<li><span>Item 2.1</span>
				<ul>
					<li><span>Item 2.1.0</span>
					<ul>
						<li><span>Item 2.1.0.0</span></li>
					</ul>
				</li>
					<li><span>Item 2.1.1</span>
					<ul>
						<li><span>Item 2.1.1.0</span></li>
						<li><span>Item 2.1.1.1</span></li>
						<li><span>Item 2.1.1.2</span></li>
					</ul>
				</li>
					<li><span>Item 2.1.2</span>
					<ul>
						<li><span>Item 2.1.2.0</span></li>
						<li><span>Item 2.1.2.1</span></li>
						<li><span>Item 2.1.2.2</span></li>
					</ul>
				</li>
				</ul>
			</li>
		</ul>
	</li>
	<li class="open"><span>Item 3</span>
		<ul>
			<li class="open"><span>Item 3.0</span>
				<ul>
					<li><span>Item 3.0.0</span></li>
					<li><span>Item 3.0.1</span>
					<ul>
						<li><span>Item 3.0.1.0</span></li>
						<li><span>Item 3.0.1.1</span></li>
					</ul>

				</li>
					<li><span>Item 3.0.2</span>
					<ul>
						<li><span>Item 3.0.2.0</span></li>
						<li><span>Item 3.0.2.1</span></li>
						<li><span>Item 3.0.2.2</span></li>
					</ul>
				</li>
				</ul>
			</li>
		</ul>
	</li>
	</ul>

    </body>
    </html>


Com este exemplo o meu código ficou assim:
[img:descricao=Tree View]http://arquivo.devmedia.com.br/forum/imagem/397347-20150311-090652.png[/img]
Responder

Gostei + 0

11/03/2015

Marcelo Pastore

A modificação foi só no código que postei ou teve que mexer em algum interno do JQuery?
Responder

Gostei + 0

12/03/2015

Randrade

Foi apenas no código.
Mas não sei quais arquivos do JQuery Tree-View você possui, então não posso dizer se é o mesmo.
Mas teste aí, se não funcionar, baixe os arquivos no link que indiquei e substitua os que você possui.

Após os testes dê um retorno aqui no tópico.
Responder

Gostei + 0

12/03/2015

Marcelo Pastore

Realmente eu devo baixar os arquivos que me indicou, tentei só modificando o codigo e não deu, mas não mudei a "chamada" dos arquivos.
Responder

Gostei + 0

12/03/2015

Randrade

Tente baixar os arquivos, referenciar os mesmos na pasta correta e usar o código que postei.

PS.: Dentro dos arquivos possuem vários exemplos, incluindo este que você escolheu.
Responder

Gostei + 0

12/03/2015

Marcelo Pastore

OK! Obrigado Randrade!!!
Responder

Gostei + 0

14/03/2015

Marcelo Pastore

Deu certo Randrade, apenas confirmando.
Responder

Gostei + 0

16/03/2015

Randrade

Deu certo Randrade, apenas confirmando.


Que bom Marcelo. Feliz por ter ajudado.
Responder

Gostei + 0

Mais tópicos

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar