Histórico da Página
...
Exemplos: Formulários Pai Filho + Eventos.
Exemplo
| HTML |
|---|
<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width, initial-scale=1">
<title>Aprovacao Desconto</title>
<link rel="stylesheet" href="http://fluig.totvs.com/totvs/css/mobile.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<style>
.ui-slider-switch {
width: 15.8em !important;
}
.ui-slider-label-b {
color: #B22222 !important;
}
.ui-btn-active {
background-color: #006400 !important;
}
.tooltip {
color: #B22222 !important;
font-size: 10px;
text-align: center;
}
</style>
</head>
<body data-theme="c">
<form enctype="" action="" method="post"><input type="hidden" name="statusGo" id='statusAprovadoGo' value="">
<input type="hidden" name="statusGo" id='statusReprovadoGo' value="">
<input type="hidden" name="status" id='statusAprovado' value="">
<input type="hidden" name="status" id='statusReprovado' value="">
<input type="hidden" name="observacoesAprovacaoGo" id='observacoesAprovacaoGo' value="">
<input type="hidden" name="observacoesAprovacao" id='observacoesAprovacao' value="">
<input type="hidden" name="motivoGo" id='motivoGo' value="">
<input type="hidden" name="motivo" id='motivo' value="">
<input type="hidden" id="crmIntegrado" name="crmIntegrado" value="" />
<input type="hidden" id="codigoGos" name="codigoGos" value="" />
<input type="hidden" id="aprovacaoGo" name="aprovacaoGo" value="" />
<input type="hidden" id="diretorAprovador" name="diretorAprovador" value="" />
<input type="hidden" id="goAprovador" name="goAprovador" value="" />
<input type="hidden" id="descricaoCentral" name="descricaoCentral" value=" - T10358/00 - SOBEU ASSOCIACAO BARRAMANSENSE DE ENSINO" />
<input type="hidden" id="observacaoAssunto" name="observacaoAssunto" value="" />
<input type="hidden" name="hdnCarenciaSMS" id="hdnCarenciaSMS" value="">
<input type="hidden" name="hdnUserId" id="hdnUserId" value="">
<input type="hidden" name="hdnUserName" id="hdnUserName" value="">
<input type="hidden" name="hdnTotalDescontoCDU" id="hdnTotalDescontoCDU" value="">
<input type="hidden" name="hdnTotalDescontoSMS" id="hdnTotalDescontoSMS" value="">
<input type="hidden" name="hdnTotalTabelaCdu" id="hdnTotalTabelaCdu" value="">
<input type="hidden" name="hdnTotalTabelaSms" id="hdnTotalTabelaSms" value="">
<input type="hidden" name="totalDescontoCDU" id="totalDescontoCDU" value="">
<input type="hidden" name="totalDescontoSMS" id="totalDescontoSMS" value="">
<div data-role="page">
<div data-role="header" data-position="inline" data-theme="d">
<img src="http://fluig.totvs.com/totvs/images/mobile_logo.png" width="76" height="25" class="ui-btn-left" />
<h1>Aprovacao Descontos</h1>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="propostaId" class="label-form">Proposta</label>
<input type="text" name="propostaId" id="propostaId" readonly class="readonly" width="100%" value="" />
</div>
<div data-role="fieldcontain">
<label for="dataEmissao" class="label-form">Emissao</label>
<input type="text" name="dataEmissao" id="dataEmissao" data-clear-btn="false" readonly class="readonly" width="100%" value="09/12/13" />
</div>
<div data-role="fieldcontain">
<label for="tipoVenda" class="label-form">Cliente</label>
<input type="text" name="nomeCliente" id="nomeCliente" size="50" class="readonly" readonly value="T10358/00 - SOBEU ASSOCIACAO BARRAMANSENSE DE ENSINO" />
</div>
<div data-role="fieldcontain">
<label for="tipoCliente" class="label-form">Tipo Cliente</label>
<input type="text" name="tipoCliente" id="tipoCliente" size="15" class="readonly" readonly value="BASE" />
</div>
<div data-role="fieldcontain">
<label for="tipoVenda" class="label-form">Tipo Venda</label>
<input type="text" name="tipoVenda" id="tipoVenda" size="25" class="readonly" readonly value="Corporativo" />
</div>
<div data-role="fieldcontain">
<label for="nomeExecutivo" class="label-form">Executivo</label>
<input type="text" name="nomeExecutivo" id="nomeExecutivo" size="50" class="readonly" readonly value="T00580-HELIO SERGIO DA SILVA TAVARES HAYDT" />
</div>
<div data-role="fieldcontain">
<label for="nomeUnidade" class="label-form">Unidade</label>
<input type="text" name="nomeUnidade" id="nomeUnidade" size="40" class="readonly" readonly value="TSE106-TOTVS SUL FLUMINENSE">
</div>
<div data-role="fieldcontain">
<label for="nomeGAR" class="label-form">GAR</label>
<input type="text" name="nomeGAR" id="nomeGAR" size="50" class="readonly" readonly value="T10215-GUILHERMO PINHEIRO DE QUEIROZ-GAR">
</div>
<div data-role="fieldcontain">
<label for="nomeDiretor" class="label-form">Diretor</label>
<input type="text" name="nomeDiretor" id="nomeDiretor" size="50" class="readonly" readonly value="T00845-GUILHERMO PINHEIRO DE QUEIROZ - DAR">
</div>
<div data-role="fieldcontain">
<label for="regraDesconto" class="label-form">Regra Desconto</label>
<input type="text" name="regraDesconto" id="regraDesconto" size="60" class="readonly" readonly value=" -">
</div>
<div data-role="fieldcontain">
<label for="nomeResponsavel" class="label-form">Responsavel</label>
<input type="text" name="nomeResponsavel" id="nomeResponsavel" size="50" class="readonly" readonly value=" -">
</div>
<div data-role="fieldcontain">
<label for="condicaoPagamento" class="label-form">Cond. Pag. CDU</label>
<input type="text" name="condicaoPagamento" id="condicaoPagamento" size="25" class="readonly" readonly value="S45 - 45 DIAS SANTAND">
</div>
<p><strong>TOTAIS DESTA PROPOSTA</strong></p>
<div data-role="collapsible" data-collapsed="true">
<h3>CDU</h3>
<p>Tabela: <input type="text" name="totalTabelaCdu" id="totalTabelaCdu" size="15" class="readonly" readonly style="text-align: right ;" value="214.250,36"><br>
Negociado: <input type="text" name="totalNegociadoCdu" id="totalNegociadoCdu" size="15" class="readonly" readonly style="text-align: right ;" value="192.564,31"><br>
Variação:<input type="text" name="variacaoCdu" id="variacaoCdu" size="40" class="readonly" readonly value="DESCONTO DE 10,12%"></p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>SMS</h3>
<p>Tabela: <input type="text" name="totalTabelaSms" id="totalTabelaSms" size="15" class="readonly" readonly style="text-align: right ;" value="5.948,64"><br>
Negociado: <input type="text" name="totalNegociadoSms" id="totalNegociadoSms" size="15" class="readonly" readonly style="text-align: right ;" value="6.905,07"><br>
Variação:<input type="text" name="variacaoSms" id="variacaoSms" size="40" class="readonly" readonly value="OVER DE 16,08%"></p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>SERVIÇOS</h3>
<p>Tabela: <input type="text" name="totalTabelaServicos" id="totalTabelaServicos" size="15" class="readonly" readonly style="text-align: right ;" value="0,00"><br>
Negociado: <input type="text" name="totalNegociadoServicos" id="totalNegociadoServicos" size="15" class="readonly" readonly style="text-align: right ;" value="0,00"><br>
Variação:<input type="text" name="variacaoServicos" id="variacaoServicos" size="40" class="readonly" readonly value=""></p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>OUTROS</h3>
<p>Tabela: <input type="text" name="totalTabelaOutros" id="totalTabelaOutros" size="15" class="readonly" readonly style="text-align: right ;" value="345,25"><br>
Negociado: <input type="text" name="totalNegociadoOutros" id="totalNegociadoOutros" size="15" class="readonly" readonly style="text-align: right ;" value="367,04"><br>
Variação:<input type="text" name="variacaoOutros" id="variacaoOutros" size="40" class="readonly" readonly value="OVER DE 6,31%"></p>
</div>
<div data-role="fieldcontain">
<label for="smsAtual" class="label-form">SMS Atual</label>
<input type="text" name="smsAtual" id="smsAtual" size="15" class="readonly" readonly value="5.312,08" />
</div>
<div data-role="fieldcontain">
<label for="cduCarencia" class="label-form">CDU X Carencia</label>
<input type="text" name="cduCarencia" id="cduCarencia" size="15" class="readonly" readonly value="192.564,31" />
<label class="tooltip">CDU - (SMS X Carencia) + (SMS Atual X Carencia)</label>
</div>
<div data-role="header" data-position="inline" data-theme="d"><h2>Pre-Aprovação</h2></div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<label class="label-form" for="observacoesAprovacao">Situação</label>
<input type="radio" name="_statusGo" id="_statusAprovadoGo" value="1" disabled="disabled"><label for="statusAprovadoGo">Aprovado</label>
<input type="radio" name="_statusGo" id="_statusReprovadoGo" value="2" disabled="disabled"><label for="statusReprovadoGo">Reprovado</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<label class="label-form" for="motivo">Motivo</label>
<span id="_motivoGo"> </span>
</div>
<div data-role="fieldcontain">
<label class="label-form" for="observacoesAprovacao">Observações</label>
<textarea id="_observacoesAprovacaoGo" name="_observacoesAprovacaoGo" rows="6" cols="50" readonly=""></textarea>
</div>
<div data-role="header" data-position="inline" data-theme="d"><h2>Aprovação</h2></div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<label class="label-form" for="observacoesAprovacao">Situação</label>
<input type="radio" name="_status" id="_statusAprovado" value="1" disabled="disabled"><label for="statusAprovado">Aprovado</label>
<input type="radio" name="_status" id="_statusReprovado" value="2" disabled="disabled"><label for="statusReprovado">Reprovado</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<label class="label-form" for="motivo">Motivo</label>
<span id="_motivo"> </span>
</div>
<div data-role="fieldcontain">
<label class="label-form" for="observacoesAprovacao">Observações</label>
<textarea id="_observacoesAprovacao" name="_observacoesAprovacao" rows="6" cols="50" readonly=""></textarea>
</div>
</div>
</div>
</form>
</body>
</html><script src="/ecm_resources/resources/assets/forms/wdkdetail.js"></script><script>WdksetNewId(0);</script><script> var processo = 'null';</script>
|
Abaixo segue um formulário que foi mapeado para o uso em Mobile:
- Formulário Web
- Formulário Mobile
Como podemos ver, o formulário Web tem muitos campos e seu mapeamento pro Mobile deve ser feito com muito cuidado.
Os campos "Dados da proposta" foram mapeados para Mobile, notem que tem campos que não existem no Mobile, dada a compactação dos dados:
O itens que estão em uma tabela foram transformados divididos e transformados em um collapsible do jQueryMobile.
Ao acionar o +, o item é expandido:
Visão Geral
Import HTML Content
Conteúdo das Ferramentas
Tarefas