Documentação

MagicTree v1.0.0 - Bruno P. Sousa

Exemplo de Integração

<html>
<head>
<link href="magictree.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="magictree.js"></script>
<script type="text/javascript">
var dados = [
    [1, 0, "Eletrônicos"],
    [2, 0, "Games"],
    [3, 0, "Livros"],
    [4, 0, "Telefonia"],
    [5, 0, "Beleza e Saúde"],
    [6, 1, "Áudio"],
    [7, 1, "Acessórios"],
    [8, 2, "Acão"],
    [9, 2, "RPG e Aventura"],
    [10, 2, "Esportes"],
    [11, 8, "Call of Duty Black Ops"],
    [12, 8, "Counter Strike"], 
    [13, 9, "Final Fantasy"],
    [14, 9, "The Elder Scrolls IV Oblivion"],
    [15, 4, "Celulares Desbloqueados"],
    [16, 4, "Telefone sem Fio"],
];

var mc = new MagicTree();
mc.addList(dados);
mc.draw("exemplo");
</script>	
</head>
<body>
	<div id="exemplo"></div>
</body>
</html>

» Opções

mainID

(String)

ID do elemento HTML

dirRoot

(String)

Diretório de localização dos arquivos

lines

(Boolean)

Indica se deve exibir a linha de junção

showIcon

(Boolean)

Indica se deve exibir os ícones

cookies

(Boolean)

Indica se deve armazenar a posição da árvore em cookies

checkBox

(Boolean)

Indica se deve exibir caixa de checagem nos itens

multiSelect

(Boolean)

Abilita multi seleção de itens

closeSameLevel

(Boolean)

Caso esteja habilitada esta opção, ao abrir um nível os outros itens do mesmo nível serão fechados

» Métodos

add(Integer itemID, Integer rootID, String name, Boolean selected, String url, String icon, String iconOpen, Boolean isOpen)

Método utilizado para adicionar um item na árvore

addList(Array list)

Método utilizado para adicionar os itens em um array

fullExpand()

Expande todos os itens da árvore

fullCollapse()

Colapsa todos os itens da árvore

draw(String element)

Desenha o elemento MagicTree na tela

setSelected(Integer id)

Seleciona um item na árvore

getSelected()

Pega os itens selecionados na árvore

getValSetting(String name)

Pega um valor das opções do MagicTree

getTreeNodes()

Pega todos os nós da árvore

» Eventos

Para definir os eventos no MagicTree utilize o objeto bindEvent, confira um exemplo abaixo de como utilizar.

Utilização de Eventos

mc.bindEvent.click(function(node) {
    alert("Olá MagicTree!");
});

Você pode passar diversas funcões em um mesmo evento, confira a lista abaixo de todos os eventos disponíveis.

click()

Dispara ao clicar com o mouse em um item

dblclick()

Dispara ao clicar duas vezes com o mouse em um item

expand()

Dispara ao expandir todos os itens

collapse()

Dispara ao colapsar todos os itens

selection()

Dispara ao selecionar os itens pela caixa de seleção