Alterando Layout do Menu Árvore Através de Evento

Programação
#1

Alterando Layout do Menu Árvore Através de Evento

O ScriptCase possui temas próprio como padrão afim de auxiliar na produtividade do seu projeto. E isso é ótimo, porém nem por isso o usuário é limitado na personalização do seu próprio tema. É possível alterarmos através de eventos, eventos que são carregados juntamente com a aplicação. Neste exemplo vou utilizar o evento onLoad.

Estou utilizando como exemplo um menu árvore padrão criado pelo pelo módulo de segurança.

Veja a imagem do resultado no anexo abaixo das instruções.

Gostou? Agora veja como é simples!

  1. No evento onLoad utilize o seguinte código para alterar o CSS da aplicação gerada.

?>
    <style>
        #css3menut{width:220px;}
        .jstree-container-ul jstree-no-dots jstree-wholerow-ul{width:215px;}
        .scMenuTTable{background-color:#fff !important;}
        .scMenuTItems{
            font-weight: bold;
            padding: 0px 10px 0px 10px;
            color:#fff !important;
        }
        .scMenuTSubItems {
            font-weight: normal !important;
            padding: 0px 10px 0px 10px;
            color:#333 !important;
        }
        .jstree-default .jstree-anchor{padding:11px;}
        .jstree-default .jstree-node {margin-left:0px !important;}
        .jstree-default .jstree-wholerow {
            height:30px !important;
            padding:23px;
        }
        .jstree-default>.jstree-no-dots .jstree-open>.jstree-ocl {margin-top:11.8px;}
        .jstree-default>.jstree-no-dots .jstree-closed>.jstree-ocl {margin-top:11.8px;}
        .jstree-wholerow-ul .jstree-wholerow{background-color:#598DB5 !important;border-right:1px solid #D8D8D8}
        .jstree-children .jstree-wholerow {
            background-color:#fff !important;
            border-width:1px !important;
            border-color:#D8D8D8 !important;
            border-style:solid !important;
        }
        .jstree-children .jstree-wholerow-hovered {background-color:#F1F1F1 !important;}
    </style>
<?php
  1. Nas configurações gerais do menu utilize desta forma:
  • Largura do Menu: 230
  • Expandir Itens: Sim
  • Ocultar as linhas pontilhadas de menu: Sim
  1. Nos subitens utilizados na configuração de itens, informe a label da seguinte forma:
Sintaxe:<span class="scMenuTSubItems">label</span>

Ex.:
Painel de Privilégios
Listar Usuários
Novo Usuário
Listar Departamentos
Novo Departamento
Alterar Senha

Observação: Seguem imagens utilizadas nos itens e subitens do menu no link abaixo:
https://drive.google.com/folderview?id=0BwUe2zBbmuOhfmhjd3NpbHNybXc3RW9GdmtjSGJQSF9HbUlfT2dBNk9RN0ZBSEpyS0U2c0U&usp=sharing

Administrativo - admin-menu.png
Painel de Privilégios- controlpanel-menu.png
Usuários - user-menu.png
Listar Usuários - list-menu.png
Novo Usuário - form-menu.png
Departamentos - group-menu.png
Listar Departamentos - list-menu.png
Novo Departamento - form-menu.png
Minha Conta - me-menu.png
Alterar Senha: - changepass-menu.png

treemenu.png
treemenu.png261×527 9.77 KB

1 Curtida
Aplicação de Menu, vamos discutir sobre esse tipo de aplicação?
#2

oh, ahi simm, e desses tipo de exemplo que precisamos :slight_smile:

#3

Muito bom !!! parabens …

obrigado por compartilhar.

#4

Muito bom… Parabéns. Que venham mais dicas como essa.

#5

Valeu John,

Que essa seja a primeira de muitas outras dicas.

#6

Muito bom!!!

#7

Complementando, se quiser adicionar no css um código para estilizar a barra de rolagem:

                /* Largura da barra de rolagem */
		::-webkit-scrollbar {
			width: 10px;
		}

		/* Fundo da barra de rolagem */
		::-webkit-scrollbar-track-piece {
			background-color: #EEE;
			border-left: 1px solid #CCC
		}

		/* Cor do indicador de rolagem */
		::-webkit-scrollbar-thumb:vertical,
		::-webkit-scrollbar-thumb:horizontal {
			background-color: #BAC0C4
		}

		/* Cor do indicador de rolagem - ao passar o mouse */
		::-webkit-scrollbar-thumb:vertical:hover,
		::-webkit-scrollbar-thumb:horizontal:hover {
			background-color: #717171
		}
#8

Maravilha Rodrigo!!! Muito bom !!!

#9

Muito bom, continuem assim, exemplos de alto nível.

#10

Exatamente o que procurava,

Parabéns e obrigado John e Rodrigo!

#11

John L. Santos,

Show de bola…

apliquei aqui… muito boa sua dica…

Valeu…

#12

Prezados,

Devido a atualização do componente jstree que o menu-árvore utiliza, segue o código atualizado para quem estiver utilizando na versão 9:

?>
    <style>
        #css3menut{width:220px;}
        .jstree-container-ul jstree-no-dots jstree-wholerow-ul{width:215px;}
        .scMenuTTable{background-color:#fff !important;}
        .scMenuTItems{
            font-weight: bold;
            padding: 0px 10px 0px 10px;
            color:#fff !important;
        }
        .scMenuTSubItems {
            font-weight: normal !important;
            padding: 0px 10px 0px 10px;
            color:#333 !important;
        }
        .jstree-default .jstree-anchor{padding:11px;}
        .jstree-default .jstree-node {margin-left:0px !important;}
        .jstree-default .jstree-wholerow {
            height:30px !important;
            padding:23px;
        }
        .jstree-default>.jstree-no-dots .jstree-open>.jstree-ocl {margin-top:11.8px;}
        .jstree-default>.jstree-no-dots .jstree-closed>.jstree-ocl {margin-top:11.8px;}
        .jstree-wholerow-ul .jstree-wholerow{background-color:#34495E !important;border-right:1px solid #D8D8D8}
        .jstree-children .jstree-wholerow {
            background-color:#fff;
            border-width:1px !important;
            border-color:#D8D8D8 !important;
            border-style:solid !important;
        }
        .jstree-children .jstree-wholerow-hovered {background-color:#415972 !important;}
        .scMenuTItems > .jstree-wholerow {background-color:#fff !important;}
        .scMenuTItems > .jstree-wholerow-hovered {background-color:#CAE1FF !important;}
    </style>
<?php

Nota: Se for criada rolagem, aumente a Largura do menu nas configurações da aplicação.

#13

Ótimo, John!!! Obrigado por compartilhar!!

#14

Novamente obrigado John, estou utilizando este modelo, ficou show d+.

#15

Boa noite,
John L. Santos, poderia me ajudar?
O menu ficou legal mas a primeira vez que o menu é executado as letras dos submenus vem da mesma cor do fundo, mas na codificação esta definido como preto. Mas depois que clica ele volta ao normal. Poderia me ajudar.
Obrigado desde já.

#16

Acabei de implementar… excelente alternativa enquanto não temos nada nativo na ferramenta.

#17

Acabei voltando a usar o modelo padrão do JSTREE, porém tinha o problema da quebra de linha, então pesquisei e achei este código útil, a quem se interessar para quebrar as linhas:

.jstree-default a { 
    white-space:normal !important; height: auto; 
}
.jstree-anchor {
    height: auto !important;
}
.jstree-default li > ins { 
    vertical-align:top; 
}
.jstree-leaf {
    height: auto;
}
.jstree-leaf a{
    height: auto !important;
}

Fonte: https://stackoverflow.com/questions/24746781/how-do-i-get-a-jstree-node-to-display-long-possibly-multiline-content

1 Curtida
#18

Muito bom mesmo, agradeço muito por compartilhar.

#19

Perfeito, já estou utilizando!

Alguém poderia me orientar se é possível alterar a cor do item do menu que tem o link para a aplicação? Pois estas não consigo alterar a cor da fonte.

Agradeço desde já.