PC SOFT
DEPOT EN LIGNE
POUR WINDEVWEBDEV ET WINDEV MOBILE

Menu Dinamico alimentado por tabelas de dados e gerado usando controle Html interagindo no WINDEV, WEBDEV e WINDEV Mobile
Publié par Boller
dans la catégorie Productivité
Nouveautés



Description
Menu Dinamico alimentado por tabelas de dados e gerado usando controle Html interagindo no WINDEV, WEBDEV e WINDEV Mobile

Ou seja, se a pessoa dominar html, css e js faz coisas incriveis e consegue interagir no wx!!!!

Conforme prometi essa semana, eu e o Paulo fizemos um projeto WINDEV, mas que a tecnica pode ser extendida para o WEBDEV e para o WINDEV Mobile, onde vc coloca um controle Html e esse controle vc pode por qualquer tipo de controle( Table, Menu, Looper, Combo, Treeview, Carrosel,... qualquer coisa que vc ache bonito na internet) e interagir com eventos de mouse e responsividade e criação e carga de dados dinamicamente. Fiz um video curto de no max 40 min onde explico de forma bem organizada como foi feito o projeto que esta na versao 29. Dentro do repositorio tera o exemplo com o PDF com os codigos prontos, só seguir o video e copiar os dados. Espero que com essa ação possamos criar novos controles diferentes e gerir esses exemplos juntos, sozinho eu nao consigo, é necessario voces ajudarem para termos esses controles nossos. Bom espero que sirva esse exemplo para dar novas ideias para os seus projetos, sucesso e ótimo final de semana.


COM ESSE EXEMPLO VOCE TEM A LIBERDADE DE CRIAÇÃO DE QUALQUER CONTROLE PARA AS SUAS APLICAÇÕES

VOCE PODE CRIAR MENUS, TABLES, LOOPERS, TREEVIEWS, COMBOS DIFERENTES E MAIS COMPLETOS A TECNICA É A MESMA

NA PASTA EXE TEM O PROJETO COMPILADO PARA TESTES COM TODAS AS DLLS

VIDEO NO YOUTUBE
https://youtu.be/I4xTr0dCz8g


REQUISITO

UM FORM
UM CONTROLE WEB
ROTINAS WLANGUAGE COM HTML, CSS, JS USANDO O EXECUTE WL.NOME DA FUNCAO

DENTRO DO ZIP TEM O PDF COM TODO O CODIGO FONTE USADO NESSE EXEMPLO

BONS ESTUDOS


CODIGO

// Summary: <specify the procedure action>
// Syntax:
// Menu_Html ()
//
// Parameters:
// None
// Return value:
// None
//
// Example:
// <Specify a usage example>
//
PROCEDURE Menu_Html()

smeuhtml_cab, smeuhtml_itens, smeuhtml_rodape is string

smeuhtml_cab =[
<!DOCTYPE html>
<html lang="pt" >
<head>
<meta charset="UTF-8">
<title>i9sistemas</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='//fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

<style>
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

body {
background: #2d2c41;
font-family: 'Open Sans', Arial, Helvetica, Sans-serif, Verdana, Tahoma;
}

ul {
list-style-type: none;
}

a {
color: #b63b4d;
text-decoration: none;
}

/** =======================
* Contenedor Principal
===========================*/
h1 {
color: #FFF;
font-size: 24px;
font-weight: 400;
text-align: center;
margin-top: 80px;
}

h1 a {
color: #c12c42;
font-size: 16px;
}

.accordion {
width: 100%;
max-width: 360px;
margin: 30px auto 20px;
background: #FFF;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

.accordion .link {
cursor: pointer;
display: block;
padding: 15px 15px 15px 42px;
color: #4D4D4D;
font-size: 14px;
font-weight: 700;
border-bottom: 1px solid #CCC;
position: relative;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}

.accordion li:last-child .link {
border-bottom: 0;
}

.accordion li i {
position: absolute;
top: 16px;
left: 12px;
font-size: 18px;
color: #595959;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}

.accordion li i.fa-chevron-down {
right: 12px;
left: auto;
font-size: 16px;
}

.accordion li.open .link {
color: #b63b4d;
}

.accordion li.open i {
color: #b63b4d;
}
.accordion li.open i.fa-chevron-down {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}

.accordion li.default .submenu {display: block;}
/**
* Submenu
-----------------------------*/
.submenu {
display: none;
background: #444359;
font-size: 14px;
}

.submenu li {
border-bottom: 1px solid #4b4a5e;
}

.submenu a {
display: block;
text-decoration: none;
color: #d9d9d9;
padding: 12px;
padding-left: 42px;
-webkit-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}

.submenu a:hover {
background: #b63b4d;
color: #FFF;
}
</style>
</head>
<body>

<h1>Menu Html Dinamico<br><a href="https://wxsolucoes.com.br">Wx Soluções</a></h1>
<!-- Contenedor -->
<ul id="accordion" class="accordion">
]


//<li><div class="link"><i class="fa fa-globe"></i>Posicionamiento web<i class="fa fa-chevron-down"></i></div>
//<ul class="submenu">
//<li><a onclick="WL.Execute('rot_WINDEV','Outros buscarores');">Outros buscadores</a></li>
//</ul>
//</li>


FOR EACH MenuXpTaskHeaders

smeuhtml_itens += [
<li><div class="link"><i class="fa fa-globe"></i>TASKHEADER_TITLE<i class="fa fa-chevron-down"></i></div>
<ul class="submenu">
]

smeuhtml_itens = Replace(smeuhtml_itens,"TASKHEADER_TITLE",MenuXpTaskHeaders.TaskHeader_Title,IgnoreCase)

FOR EACH MenuXpTaskItens where TaskHeader_UUID = MenuXpTaskHeaders.TaskHeader_UUID

smeuhtml_itens += [
<li><a onclick="WL.Execute('menu_rot_abrir','TASKITENS_TITLE');">TASKITENS_TITLE</a></li>
]

smeuhtml_itens = Replace(smeuhtml_itens,"TASKITENS_TITLE",MenuXpTaskItens.TaskItem_Title,IgnoreCase)

END

smeuhtml_itens += [
</ul>
</li>
]


END

smeuhtml_itens += [
</ul>
]


smeuhtml_rodape = [
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script>
$(function() {
var Accordion = function(el, multiple) {
this.el = el || {};
this.multiple = multiple || false;

// Variables privadas
var links = this.el.find('.link');
// Evento
links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown)
}

Accordion.prototype.dropdown = function(e) {
var $el = e.data.el;
$this = $(this),
$next = $this.next();

$next.slideToggle();
$this.parent().toggleClass('open');

if (!e.data.multiple) {
$el.find('.submenu').not($next).slideUp().parent().removeClass('open');
};
}

var accordion = new Accordion($('#accordion'), false);
});
</script>

</body>
</html>

]

HTML_MENU_01 = StringToUTF8(smeuhtml_cab) + StringToUTF8(smeuhtml_itens) + StringToUTF8(smeuhtml_rodape)




//------------------------------------------

// Summary: <specify the procedure action>
// Syntax:
//menu_rot_abrir (<param_v>)
//
// Parameters:
// param_v:
// Example:
// <Specify a usage example>
//
PROCEDURE menu_rot_abrir(param_v)

//info(param_v)

EDT_OpMenu = param_v

SWITCH Upper(param_v)
//CONTABIL
CASE "LIVRO RAZAO"

Open(WIN_Janela,"LIVRO RAZAO")

CASE "LIVROS CONTABEIS"

Open(WIN_Janela,"LIVROS CONTABEIS")

CASE "RAZONETES"

Open(WIN_Janela,"RAZONETES")

//FINANCEIRO
CASE "LIVRO CAIXA"

Open(WIN_Janela,"LIVRO CAIXA")

CASE "BANCOS"

Open(WIN_Janela,"BANCOS")

CASE "INVESTIMENTOS"

Open(WIN_Janela,"INVESTIMENTOS")

//FISCAIS
CASE "EMITIR NFE"

Open(WIN_Janela,"EMITIR NFE")

CASE "GERAR DOCUMENTOS FISCAIS"

Open(WIN_Janela,"GERAR DOCUMENTOS FISCAIS")

//ALMOXARIFADO
CASE "LIBERA SAIDA MATERIAL"

Open(WIN_Janela,"LIBERAR SAIDA DE MATERIAL")

CASE "ENTRADA DE ESTOQUE"

Open(WIN_Janela,"ENTRADA DE ESTOQUE")

//ESTOQUE
CASE "PRODUTOS"

Open(WIN_Janela,"PRODUTOS")

CASE "GRUPOS"

Open(WIN_Janela,"GRUPOS")

CASE "FAMILIAS"

Open(WIN_Janela,"FAMILIAS")

//VENDAS

CASE "CLIENTES"

Open(WIN_Janela,"CLIENTES")

CASE "PEDIDOS"

Open(WIN_Janela,"PEDIDOS")

CASE "PEDIDOS CANCELADOS"

Open(WIN_Janela,"PEDIDOS CANCELADOS")

CASE "ORDEM DE COMPRA"

Open(WIN_Janela,"ORDEM DE COMPRA")

CASE "TASK HEADER MENU"

Open(WIN_Task_Headers)

CASE "TASK ITENS SUB MENU"

Open(WIN_Task_Itens)

OTHER CASE

END

/// SE CRIOU ALGO PARECIDO ENCAMINHE PARA POR AQUI NO REPOSITORIO DE EXEMPLOS E VAMOS EVOLUINDO OS PROJETOS PARA LAGO MAIS COMPLETO E CUSTOMIZAVEL.

MEU WHATSAPP
+55 41 99949 1800

adriano@wxsolucoes.com.br


Illustrations, copies d'écran
none
none
Avis des utilisateurs
(Pour noter la ressource, cliquez sur Ecrire un avis)
Boller
Exemplo Menu com 3 níveis

<!DOCTYPE html>
<html lang="pt" >
<head>
<meta charset="UTF-8">
<title>i9sistemas</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='//fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

<style>
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

body {
background: #2d2c41;
font-family: 'Open Sans', Arial, Helvetica, Sans-serif, Verdana, Tahoma;
}

ul {
list-style-type: none;
}

a {
color: #b63b4d;
text-decoration: none;
}

/** =======================
* Contenedor Principal
===========================*/
h1 {
color: #FFF;
font-size: 24px;
font-weight: 400;
text-align: center;
margin-top: 80px;
}

h1 a {
color: #c12c42;
font-size: 16px;
}

.accordion {
width: 100%;
max-width: 360px;
margin: 30px auto 20px;
background: #FFF;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

.accordion .link {
cursor: pointer;
display: block;
padding: 15px 15px 15px 42px;
color: #4D4D4D;
font-size: 14px;
font-weight: 700;
border-bottom: 1px solid #CCC;
position: relative;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}

.accordion li:last-child .link {
border-bottom: 0;
}

.accordion li i {
position: absolute;
top: 16px;
left: 12px;
font-size: 18px;
color: #595959;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}

.accordion li i.fa-chevron-down {
right: 12px;
left: auto;
font-size: 16px;
}

.accordion li.open .link {
color: #77B4F5; /* #b63b4d; cor titulo menu azul */
}

.accordion li.open i {
color: #b63b4d;
}
.accordion li.open i.fa-chevron-down {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}

.accordion li.default .submenu {display: block;}

/**----------------------------
* Submenu Nivel 1
-----------------------------*/

.submenu1 {
display: none;
background: #444359;
font-size: 14px;
}

.submenu1 li {
border-bottom: 1px solid #4b4a5e;
}

.submenu1 a {
display: block;
text-decoration: none;
color: #d9d9d9;
padding: 12px;
padding-left: 30px; /* AQUI O ALINHAMENTO A ESQUERDA */
-webkit-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}

.submenu1 a:hover {
background: #b63b4d;
color: #FFF;
}


/**----------------------------
* Submenu Nivel 2
-----------------------------*/

.submenu2 {
display: none;
background: #444359;
font-size: 14px;
}

.submenu2 li {
border-bottom: 1px solid #4b4a5e;
}

.submenu2 a {
display: block;
text-decoration: none;
color: #d9d9d9;
padding: 12px;
padding-left: 60px; /* AQUI O ALINHAMENTO A ESQUERDA */
-webkit-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}

.submenu2 a:hover {
background: #b63b4d;
color: #FFF;
}

/**----------------------------
* Submenu Nivel 3
-----------------------------*/

.submenu3 {
display: none;
background: #444359;
font-size: 14px;
}

.submenu3 li {
border-bottom: 1px solid #4b4a5e;
}

.submenu3 a {
display: block;
text-decoration: none;
color: #d9d9d9;
padding: 12px;
padding-left: 90px; /* AQUI O ALINHAMENTO A ESQUERDA */
-webkit-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}

.submenu3 a:hover {
background: #b63b4d;
color: #FFF;
}

</style>
</head>
<body>

<h1><a href="http://wxsolucoes.com.br">Menu by Boller</a></h1>
<!-- Contenedor -->
<ul id="accordion" class="accordion">

<li>
<div class="link"><i class="fa fa-paint-brush"></i>MENU NIVEL 1<i class="fa fa-chevron-down"></i></div>
<ul class="submenu1">
<li><a href="#">Html sem evento</a></li>
<li><a href="#">Css sem evento</a></li>
<li><a href="#">JavaScript sem evento</a></li>
<li><a onclick="WL.Execute('rot_windev','Html');">Html</a></li>
<li><a onclick="WL.Execute('rot_windev','Css');">Css</a></li>
<li><a onclick="WL.Execute('rot_windev','JavaScript');">JavaScript</a></li>

<li>
<div class="link"><i class="fa fa-paint-brush"></i>MENU NIVEL 2<i class="fa fa-chevron-down"></i></div>
<ul class="submenu2">
<li><a href="#">Html sem evento</a></li>
<li><a href="#">Css sem evento</a></li>
<li><a href="#">JavaScript sem evento</a></li>
<li><a onclick="WL.Execute('rot_windev','Html');">Html</a></li>
<li><a onclick="WL.Execute('rot_windev','Css');">Css</a></li>
<li><a onclick="WL.Execute('rot_windev','JavaScript');">JavaScript</a></li>

<li>
<div class="link"><i class="fa fa-paint-brush"></i>MENU NIVEL 3<i class="fa fa-chevron-down"></i></div>
<ul class="submenu3">
<li><a href="#">Html sem evento</a></li>
<li><a href="#">Css sem evento</a></li>
<li><a href="#">JavaScript sem evento</a></li>
<li><a onclick="WL.Execute('rot_windev','Html');">Html</a></li>
<li><a onclick="WL.Execute('rot_windev','Css');">Css</a></li>
<li><a onclick="WL.Execute('rot_windev','JavaScript');">JavaScript</a></li>
</ul>
</li>

</ul>
</li>
</ul>
</li>



<li>
<div class="link"><i class="fa fa-paint-brush"></i>MENU NIVEL 11<i class="fa fa-chevron-down"></i></div>
<ul class="submenu1">
<li><a href="#">Html sem evento</a></li>
<li><a href="#">Css sem evento</a></li>
<li><a href="#">JavaScript sem evento</a></li>
<li><a onclick="WL.Execute('rot_windev','Html');">Html</a></li>
<li><a onclick="WL.Execute('rot_windev','Css');">Css</a></li>
<li><a onclick="WL.Execute('rot_windev','JavaScript');">JavaScript</a></li>

<li>
<div class="link"><i class="fa fa-paint-brush"></i>MENU NIVEL 12<i class="fa fa-chevron-down"></i></div>
<ul class="submenu2">
<li><a href="#">Html sem evento</a></li>
<li><a href="#">Css sem evento</a></li>
<li><a href="#">JavaScript sem evento</a></li>
<li><a onclick="WL.Execute('rot_windev','Html');">Html</a></li>
<li><a onclick="WL.Execute('rot_windev','Css');">Css</a></li>
<li><a onclick="WL.Execute('rot_windev','JavaScript');">JavaScript</a></li>

<li>
<div class="link"><i class="fa fa-paint-brush"></i>MENU NIVEL 13<i class="fa fa-chevron-down"></i></div>
<ul class="submenu3">
<li><a href="#">Html sem evento</a></li>
<li><a href="#">Css sem evento</a></li>
<li><a href="#">JavaScript sem evento</a></li>
<li><a onclick="WL.Execute('rot_windev','Html');">Html</a></li>
<li><a onclick="WL.Execute('rot_windev','Css');">Css</a></li>
<li><a onclick="WL.Execute('rot_windev','JavaScript');">JavaScript</a></li>
</ul>
</li>

</ul>
</li>
</ul>
</li>

</ul>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script>
$(function() {
var Accordion = function(el, multiple) {
this.el = el || {};
this.multiple = multiple || false;

// Variables privadas
var links = this.el.find('.link');
// Evento
links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown)
}

Accordion.prototype.dropdown = function(e) {
var $el = e.data.el;
$this = $(this),
$next = $this.next();

$next.slideToggle();
$this.parent().toggleClass('open');

if (!e.data.multiple) {
$el.find('.submenu').not($next).slideUp().parent().removeClass('open');
};
}

var accordion = new Accordion($('#accordion'), false);
});
</script>

</body>
</html>
A PROPOS
EVALUATION :
51(1)
TELECHARGEMENTS :
64
PUBLIÉE :
04 février 2024
VERSION :
29
CONCERNE :
WINDEV, WEBDEV, WINDEV Mobile
Version minimale : 29
TAILLE :
116,2 Mo