30% OFF para compra e renovaÇÃo »

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

John L. Santos

  • Bug Tracker Team
  • Administrator
  • Expert
  • *****
  • Mensagens: 714
    • 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 Padilha

  • Expert
  • *****
  • Mensagens: 1366
  • .....
    • 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: 712
    • 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: 1055
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 9

Kleyber

  • Expert
  • *****
  • Mensagens: 3116
    • TK Informídia
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

megh

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

megh

  • Visitante
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: 3116
    • TK Informídia
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

paulomarcelo

  • Expert
  • *****
  • Mensagens: 664
    • 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.

Antonio jrace1

  • Intermediário
  • ***
  • Mensagens: 146
    • 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: 639
  • 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...


John L. Santos

  • Bug Tracker Team
  • Administrator
  • Expert
  • *****
  • Mensagens: 714
    • Email
Re:Alterando Layout do Menu Árvore Através de Evento
« Responder #11 Online: Maio 12, 2017, 09:30:23 am »
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:

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:#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.
« Última modificação: Maio 12, 2017, 09:53:03 am por John L. Santos »
John L. Santos
NetMake - Soluções em Informática

Kleyber

  • Expert
  • *****
  • Mensagens: 3116
    • TK Informídia
Re:Alterando Layout do Menu Árvore Através de Evento
« Responder #12 Online: Maio 12, 2017, 09:33:11 am »
Ótimo, John!!! Obrigado por compartilhar!!
Kleyber Derick

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

Antonio jrace1

  • Intermediário
  • ***
  • Mensagens: 146
    • Email
Re:Alterando Layout do Menu Árvore Através de Evento
« Responder #13 Online: Maio 12, 2017, 10:07:32 am »
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:

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:#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.

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

adriano_php

  • Novato
  • *
  • Mensagens: 3
Re:Alterando Layout do Menu Árvore Através de Evento
« Responder #14 Online: Junho 16, 2018, 09:13:54 pm »
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á.