Autor Tópico: Alterando Layout do Menu Árvore Através de Evento  (Lida 1473 vezes)

John L. Santos

  • Bug Tracker Team
  • Administrator
  • Expert
  • *****
  • Mensagens: 595
    • Email
Alterando Layout do Menu Árvore Através de Evento
« Online: Maio 28, 2015, 05:57:53 pm »
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.

Código: [Selecionar]

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


2. Nas configurações gerais do menu utilize desta forma:
- Largura do Menu: 230
- Expandir Itens: Sim
- Ocultar as linhas pontilhadas de menu: Sim

3. Nos subitens utilizados na configuração de itens, informe a label da seguinte forma:

Sintaxe:<span class="scMenuTSubItems">label</span>

Ex.:
<span class="scMenuTSubItems">Painel de Privilégios</span>
<span class="scMenuTSubItems">Listar Usuários</span>
<span class="scMenuTSubItems">Novo Usuário</span>
<span class="scMenuTSubItems">Listar Departamentos</span>
<span class="scMenuTSubItems">Novo Departamento</span>
<span class="scMenuTSubItems">Alterar Senha</span>



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

« Última modificação: Julho 17, 2015, 10:02:58 am por John L. Santos »
John L. Santos
NetMake - Soluções em Informática

Willian Fernando

  • Expert
  • *****
  • Mensagens: 1154
  • .....
    • Email
Re:Alterando layout do menu-árvore através de evento
« Responder #1 Online: Maio 28, 2015, 06:23:13 pm »
oh, ahi simm, e desses tipo de exemplo que precisamos :)

pessanha

  • Expert
  • *****
  • Mensagens: 643
    • Email
Re:Alterando layout do menu árvore através de evento
« Responder #2 Online: Maio 28, 2015, 07:32:17 pm »
Muito bom !!! parabens .....


obrigado por compartilhar.

Celso R.

  • Expert
  • *****
  • Mensagens: 941
Re:Alterando layout do menu árvore através de evento
« Responder #3 Online: Maio 28, 2015, 08:56:56 pm »
Muito bom.... Parabéns. Que venham mais dicas como essa.
Celso R.
________________________________
SC - V 8

Kleyber

  • Expert
  • *****
  • Mensagens: 2239
    • Email
Re:Alterando layout do menu árvore através de evento
« Responder #4 Online: Maio 29, 2015, 08:41:13 am »
Valeu John,

Que essa seja a primeira de muitas outras dicas.
Kleyber Derick

ITIL® V3 Foundation Certified
Analista de Sistemas
São Luís - Maranhão
www.tkinformidia.net

Rodrigo Goulart Padovezzi

  • Expert
  • *****
  • Mensagens: 1045
    • Email
Re:Alterando layout do menu árvore através de evento
« Responder #5 Online: Maio 29, 2015, 09:49:56 am »
Muito bom!!!!!

Rodrigo Goulart Padovezzi

  • Expert
  • *****
  • Mensagens: 1045
    • Email
Re:Alterando layout do menu árvore através de evento
« Responder #6 Online: Maio 29, 2015, 10:28:42 am »
Complementando, se quiser adicionar no css um código para estilizar a barra de rolagem:
Código: [Selecionar]
                /* 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
}

Kleyber

  • Expert
  • *****
  • Mensagens: 2239
    • Email
Re:Alterando layout do menu árvore através de evento
« Responder #7 Online: Maio 29, 2015, 03:03:18 pm »
Maravilha Rodrigo!!! Muito bom !!!
Kleyber Derick

ITIL® V3 Foundation Certified
Analista de Sistemas
São Luís - Maranhão
www.tkinformidia.net

paulomarcelo

  • Expert
  • *****
  • Mensagens: 638
    • Email
Re:Alterando layout do menu árvore através de evento
« Responder #8 Online: Maio 29, 2015, 10:31:34 pm »
Muito bom, continuem assim, exemplos de alto nível.

jrace1

  • Iniciante
  • **
  • Mensagens: 60
    • Email
Re:Alterando Layout do Menu Árvore Através de Evento
« Responder #9 Online: Março 30, 2016, 10:10:05 am »
Exatamente o que procurava,

Parabéns e obrigado John e Rodrigo!
« Última modificação: Março 30, 2016, 11:14:29 am por jrace1 »

Régis Matos

  • Global Moderator
  • Expert
  • *****
  • Mensagens: 632
  • Se a porta não se abrir, construa uma.
    • Email
Re:Alterando Layout do Menu Árvore Através de Evento
« Responder #10 Online: Abril 09, 2016, 03:05:48 pm »
John L. Santos,

Show de bola...


apliquei aqui... muito boa sua dica...

Valeu...