Ir para conteúdo
Alysson Abech

Como listar eventos com link no Jquery UI datepicker

Recommended Posts

Gostaria de saber como posso listar os eventos setados no datepicker, que quando ao passar o mouse em cima dos mesmos , eles mudassem o hover ou algo assim diretamente no calendário.

 

Código atual:

codepen.io/abech/pen/VrWOLR

 

Imagem de exemplo do código atual

 

Capturar.PNG

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora


  • Conteúdo Similar

    • Por quimera
      Direto ao ponto, tenho o seguinte código seletor (por que o programa é "dinâmico" demias quanto ao nome dos inputs)
      var inpt = $("div[peid='Form.area']").find("input[type=text]"); //só que preciso de uma expressão para pegar dinâmicamente o "peid" do mesmo que muda com frequencia //Somente o "Form." muda com frequencia var inpt = $("div[peid='PRECISO_QUE_ESTE_SEJA_DINÂMICO.microArea']").find("input[type=text]"); //A dias ainda não encontrei solução  
      Consegui assim que postei, rsrs
      Resolvido assim:
      var inpt = $("div[peid*='.area']").find("input[type=text]");  
    • Por Rogerio Pancini
      Bom dia pessoal.
       
      Eu fui, fazendo, acertando, até conseguir finalizar um auto cálculo em Jquery, que ficou funcionando corretamente.
      Fiz em um formulário de outra página.
      Porém, fui usar o mesmo script em uma nova página, conferindo sempre nomes, classes e afins.
      Mesmo batendo tudo, neste novo formulário, o auto cálculo não funciona.
      Já revirei tudo, mas não consigo encontrar porque ele não funciona.
       
      Pela primeira vez usei o JSFiddle (aqui), mas segue também escrito o que fiz até agora:
       
      <script src="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/jquery/jquery.min.js"></script> <script type="text/javascript" src="https://plentz.github.io/jquery-maskmoney/javascripts/jquery.maskMoney.min.js"></script> <form name="pedido" id="pedido" method="post" enctype="multipart/form-data" action=""> <div class="row"> <div class="form-group col-md-6"> <input type="text" name="nome" class="form-control" id="nome" placeholder="Nome" tabindex="1"/> </div> <div class="form-group col-md-6"> <input type="text" name="sobrenome" class="form-control" id="sobrenome" placeholder="Sobrenome" tabindex="2"/> </div> <div class="form-group col-md-6"> <input type="text" name="telefone" class="form-control telefone" id="telefone" placeholder="Telefone/ Celular" maxlength="15" tabindex="3"> </div> <div class="form-group col-md-6"> <input type="text" name="email" class="form-control" id="email" placeholder="E-mail" tabindex="4"/> </div> <div class="form-group col-md-6"> <div class="form_select_config"> <select name="estado" tabindex="5" style="background-color: #FFFFFF;"> <option value="">Selecione o estado</option> <option value="01">Acre</option><option value="02">Alagoas</option><option value="04">Amapá</option><option value="03">Amazonas</option><option value="05">Bahia</option><option value="06">Ceará</option><option value="07">Distrito Federal</option><option value="08">Espírito Santo</option><option value="09">Goiás</option><option value="10">Maranhão</option><option value="13">Mato Grosso</option><option value="12">Mato Grosso do Sul</option><option value="11">Minas Gerais</option><option value="14">Pará</option><option value="15">Paraíba</option><option value="18">Paraná</option><option value="16">Pernambuco</option><option value="17">Piauí</option><option value="19">Rio de Janeiro</option><option value="20">Rio Grande do Norte</option><option value="23">Rio Grande do Sul</option><option value="21">Rondônia</option><option value="22">Roraima</option><option value="24">Santa Catarina</option><option value="26">São Paulo</option><option value="25">Sergipe</option><option value="27">Tocantins</option> </select> </div> </div> <div class="form-group col-md-6"> <div class="form_select_config"> <select name="cidade" tabindex="6"> <option value="" selected="selected" disabled="disabled">Escolha um estado primeiro</option> </select> </div> </div> <div class="form-group col-md-12"> <textarea class="form-control" rows="5" name="mensagem" id="mensagem" placeholder="Mensagem" tabindex="7"></textarea> </div> <div class="clear"></div> <div class="form-group col-md-12"> <div class="linha_topo_orc"> <div class="row"> <div class="nome_desktop"> <p class="exp" style="text-align: center;">Selecione</p> </div> <div class="nome_smartphone text-center-mobile"> <div class="col-md-12"> <div class="col-md-2"> <p class="exp">&nbsp;</p> </div> <div class="col-md-2"> <p class="exp">Espécie</p> </div> <div class="col-xs-6 col-sm-2 col-md-2"> <p class="exp">Quant.</p> </div> <div class="col-xs-6 col-sm-2 col-md-2"> <p class="exp">Tamanho</p> </div> <div class="col-xs-6 col-sm-2 col-md-2"> <p class="exp">Preço</p> </div> <div class="col-xs-6 col-sm-2 col-md-2"> <p class="exp">Total</p> </div> </div> </div> </div> </div> <!-- <label for="id_item_up[]" generated="true" class="error" style="display:none;"></label> --> <div class="linha_orc"> <div class="row"> <div style="visibility: hidden; height: 1px;"> <input name="id_item_up[33]" id="id_item_up[33]" class="checkbox-custom" type="checkbox" value="33" style="width:50%;" tabindex="18" checked> </div> <div class="col-md-2"> <img src="/projetos/centraldopeixe/images/especies/orc/4a42e1b24720547d3082481bccb02ad5.jpg" style="margin-top: 15%;"> </div> <div class="col-md-2 no_padding"> <div class="nome_smartphone"> <div style="font-size: 16px; text-align: center; height: 100% !important; padding: 16px 8px !important; font-size: 20px !important; font-family: 'WorkSans-Bold' !important;">Tilápia</div> </div> <div class="nome_desktop"> <p class="nome_esp input_esp">Tilápia</p> </div> </div> <div class="col-xs-6 col-sm-2 col-md-2"> <input type="text" name="quantidade[33]" id="quantidade[33]" class="form-control input_qtde qtde_orc" placeholder="Quant."/> </div> <div class="col-xs-6 col-sm-2 col-md-2"> <div class="form_select_config fs_pedido"> <select name="tamanho[33]" id="tamanho[33]" class="s_pedido"> <option value="" selected="selected" disabled="disabled">Tamanho</option> <option value="Alevino">Alevino</option> <option value="Juvenil">Juvenil</option> <option value="Adulto">Adulto</option> </select> </div> </div> <div class="col-xs-6 col-sm-2 col-md-2"> <input type="text" name="preco[33]" id="preco[33]" value="" class="form-control input_qtde real valor_orc" placeholder="Preço"/> </div> <div class="col-xs-6 col-sm-2 col-md-2"> <input type="text" name="total[33]" id="total[33]" class="form-control input_qtde valor_total_orc" placeholder="Total"/> </div> <div style="visibility: hidden; height: 1px;"> <input name="id_item_up[7]" id="id_item_up[7]" class="checkbox-custom" type="checkbox" value="7" style="width:50%;" tabindex="18" checked> </div> <div class="col-md-2"> <img src="/projetos/centraldopeixe/images/especies/orc/23996772607f968bd784686d66c1348a.jpg" style="margin-top: 15%;"> </div> <div class="col-md-2 no_padding"> <div class="nome_smartphone"> <div style="font-size: 16px; text-align: center; height: 100% !important; padding: 16px 8px !important; font-size: 20px !important; font-family: 'WorkSans-Bold' !important;">Black Bass</div> </div> <div class="nome_desktop"> <p class="nome_esp input_esp">Black Bass</p> </div> </div> <div class="col-xs-6 col-sm-2 col-md-2"> <input type="text" name="quantidade[7]" id="quantidade[7]" class="form-control input_qtde qtde_orc" placeholder="Quant."/> </div> <div class="col-xs-6 col-sm-2 col-md-2"> <div class="form_select_config fs_pedido"> <select name="tamanho[7]" id="tamanho[7]" class="s_pedido"> <option value="" selected="selected" disabled="disabled">Tamanho</option> <option value="Alevino">Alevino</option> <option value="Juvenil">Juvenil</option> <option value="Adulto">Adulto</option> </select> </div> </div> <div class="col-xs-6 col-sm-2 col-md-2"> <input type="text" name="preco[7]" id="preco[7]" value="" class="form-control input_qtde real valor_orc" placeholder="Preço"/> </div> <div class="col-xs-6 col-sm-2 col-md-2"> <input type="text" name="total[7]" id="total[7]" class="form-control input_qtde valor_total_orc" placeholder="Total"/> </div> <div style="visibility: hidden; height: 1px;"> <input name="id_item_up[8]" id="id_item_up[8]" class="checkbox-custom" type="checkbox" value="8" style="width:50%;" tabindex="18" checked> </div> <div class="col-md-2"> <img src="/projetos/centraldopeixe/images/especies/orc/d7aff9de2ff60eade6cb39a35b1dec75.jpg" style="margin-top: 15%;"> </div> <div class="col-md-2 no_padding"> <div class="nome_smartphone"> <div style="font-size: 16px; text-align: center; height: 100% !important; padding: 16px 8px !important; font-size: 20px !important; font-family: 'WorkSans-Bold' !important;">Cachara</div> </div> <div class="nome_desktop"> <p class="nome_esp input_esp">Cachara</p> </div> </div> <div class="col-xs-6 col-sm-2 col-md-2"> <input type="text" name="quantidade[8]" id="quantidade[8]" class="form-control input_qtde qtde_orc" placeholder="Quant."/> </div> <div class="col-xs-6 col-sm-2 col-md-2"> <div class="form_select_config fs_pedido"> <select name="tamanho[8]" id="tamanho[8]" class="s_pedido"> <option value="" selected="selected" disabled="disabled">Tamanho</option> <option value="Alevino">Alevino</option> <option value="Juvenil">Juvenil</option> <option value="Adulto">Adulto</option> </select> </div> </div> <div class="col-xs-6 col-sm-2 col-md-2"> <input type="text" name="preco[8]" id="preco[8]" value="" class="form-control input_qtde real valor_orc" placeholder="Preço"/> </div> <div class="col-xs-6 col-sm-2 col-md-2"> <input type="text" name="total[8]" id="total[8]" class="form-control input_qtde valor_total_orc" placeholder="Total"/> </div> </div> </div> <div class="linha_orc"> <div class="row"> <div class="col-md-12"> <div style="visibility: hidden; height: 1px;"> </div> <div class="col-md-2"> </div> <div class="col-md-2"> </div> <div class="col-md-2"> </div> <div class="col-md-2"> </div> <div class="col-md-2"> <div class="fundo_cinza"> <div style="font-size: 16px; text-align: center; height: 100% !important; padding: 16px 8px !important; font-size: 20px !important; font-family: 'WorkSans-Bold' !important; color: #0C3052; margin-top: 24px;">Total</div> </div> </div> <div class="col-md-2"> <input type="text" name="total" id="total" class="form-control input_qtde" style="background-color: #c0c0c0;" placeholder="Total"/> </div> </div> </div> </div> </div> <div class="clear"></div> <div class="row"> <div class="col-md-4"> <div class="form-group"> <input type="reset" title="Limpar" value="Limpar" id="btn_limpar" name="limpar" class="btn_limpar"> </div> </div> <div class="col-md-4"></div> <div class="col-md-4"> <div class="form-group"> <input type="submit" title="Enviar" value="Enviar" id="btn_submit" name="enviar" id="enviar"> </div> </div> </div> <div class="row"> <div class="col-md-4"></div> <div class="col-md-4"> <div class="form-group"> <input type="submit" title="Imprimir" value="Imprimir" id="btn_submit" name="imprimir" id="imprimir"> </div> </div> <div class="col-md-4"></div> </div> </div> </form> .pedido_desktop, .nome_desktop { display: block; } .pedido_smartphone, .nome_smartphone { display: none; } @media (min-width: 992px) and (max-width: 1199px) {} @media (min-width: 769px) and (max-width: 991px) {} @media (min-width: 481px) and (max-width: 768px) { .pedido_desktop, .nome_desktop { display: none; } .pedido_smartphone, .nome_smartphone { display: block; } } @media only screen and (max-width: 480px) { .pedido_desktop, .nome_desktop { display: none; } .pedido_smartphone, .nome_smartphone { display: block; } } $(".real").maskMoney({ prefix: 'R$ ', thousands: '.', decimal: ',', affixesStay: true }); function rePlace(i) { return parseFloat(i.replace(/[^\d.,]/g, "").replace('.', '').replace(',', '.')); } Number.prototype.formataReal = function(c, d, t) { var n = this, c = isNaN(c = Math.abs(c)) ? 2 : c, d = d == undefined ? "," : d, t = t == undefined ? "." : t, s = n < 0 ? "-" : "", i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "", j = (j = i.length) > 3 ? j % 3 : 0; return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : ""); }; //any time the amount changes $(document).ready(function() { $('.qtde_orc, .valor_orc').change(function(e) { var valor_total_orc = 0; var $row = $(this).parent(); var valor_orc = rePlace($row.find('.valor_orc').val()); var qtde_orc = $row.find('.qtde_orc').val(); valor_total_orc = parseFloat(valor_orc * qtde_orc); //update the row total $row.find('.valor_total_orc').val('R$ ' + (valor_total_orc).formataReal(2, ',', '.')); var total_geral = 0; $('.valor_total_orc').each(function() { //Get the value var tg = rePlace($(this).val()); //if it's a number add it to the total if (IsNumeric(tg)) { total_geral += parseFloat(tg); } }); $('.total_geral').val('R$ ' + (total_geral).formataReal(2, ',', '.')); }); }); function IsNumeric(input) { return !isNaN(parseFloat(input)) && isFinite(input); Se alguém puder dar uma luz de onde pode estar o problema, eu agradeço.
       
      O replace dá erro "Uncaught TypeError: Cannot read property 'replace' of undefined".
      Se eu remover o replace e der um alert no qtde_orc, ele retorna undefined.
      Só a formatação muda aqui.
    • Por Thales Henrique
      Pessoal, bom dia! 
       
      Estou com um problema aqui pra atualizar uma div de 1 em 1 segundo!
      Estou criando um painel que as informações vem via socket, e quando chega um status diferente da aplicação ele não joga na tela por não ter essa atualização automática! 
       
      Segue script que estou tentando usar pra tentar atualizar a div de 1 em 1 segundo: 
       
      <script>
         var auto_refresh = setInterval(
         function()
      {
         var status = $("#extensions").val();
         $('#extensions').load('/admin/mesa', {status:status});
      }, 1000);
      </script>
       
      E no "inspecionar" do chrome ele me devolve o erro 500 (internal error). 
       
      Não sei se essa é a maneira certa pra se trabalhar com isso em rotas! 
       
      Obrigado desde já! 
       
    • Por pedro.hso
      Ola, sou iniciante na programação, mas estou desenvolvendo um sistema de gerenciamento, onde tenho que dar entrada de notas, ou seja estas notas necessitam de mais produtos eventualmente, e queria adicionar dinamicamente estes campos, realizando o clone row , no entanto consigo duplicar mas nao carrega as minhas funções de options.
      <div id="main" class="container-fluid"> <form action="des_geral.php" method="post"> <div class="row"> <div class="col-xs-3"> <label for="campo2">Data</label> <input type="date" class="form-control" id="data" name="data" > </div> <div class="col-xs-3 "> <label for="campo5">Nº Nota Fiscal</label> <input type="number" class="form-control" min="1" id="nf" name="nf" > </div> <div class="col-xs-6"> <label for="campo1">Fornecedor</label> <div class="bs-docs-example no-code"> <select name="fornecedor" id="fornecedor" class="form-control" placeholder="Comece a digitar..."> <option></option> <?php $dados=mysql_query("SELECT * from cad_fornecedor"); while($row = mysql_fetch_assoc($dados)) { echo "<option value='".$row["id"]."'>".$row["nome"]."</option>"; } ?> </select></div> </div> </div> <div class="row"> <div class="col-xs-12"> <table border="0" cellpadding="0" cellspacing="0"> <thead> <tr> <th>Produto</th> <th>Quantidade</th> <th>Unidade</th> <th>Valor Uni.(R$)</th> <th>Valor total(R$)</th> <th class="actions">Ações</th> </tr> </thead> <tbody id="tabela"> <tr id="linha" class="row_0"> <td ><select style="width: 300px" name="produto" id="produto" onChange="retorna('1','1');" class="form-control" placeholder="Comece a digitar"> <option></option> <?php $dados=mysql_query("SELECT * FROM cad_produtos"); while($row = mysql_fetch_assoc($dados)) { echo "<option value='".$row["id"]."'>".$row["nome"]."</option>"; } ?> </select> </td> <td><input type="number" class="form-control" style="width: 100px" oninput="calculate('linha')" min="1" id="qtd" name="qtd" ></td> <td><input class="form-control" style="width: 100px" value="" name="unidade" id="unidade" readonly></td> <td><input type="text" class="form-control" style="width: 150px" oninput="calculate('linha')" min="0" step="0.01" id="vuni" name="vuni" ></td> <td><input type="text" class="form-control" style="width: 150px" readonly min="0" step="0.01" id="vtot" name="vtot" ></td> <td><a id="add" onClick="addRow('tabela')" class="btn btn-success btn-xs" href="#">Mais Campos</a><a id="remover" class="btn btn-danger btn-xs" href="#">Remover</a></td> </tr> </tbody> </table> <table style="width: 900px"><tbody> <tr> <th style="width: 300px">Total</th> <th style="width: 100px"></th> <th style="width: 100px"></th> <th style="width: 150px"></th> <th style="width: 150px"></th> <th style="width: 100px"></th> </tr> </tbody></table> </div> </div> </div> <hr /> <div id="actions" class="row"> <div class="col-md-12"> <button id="salvar_des" name="salvar_des" type="submit" class="btn btn-primary">Salvar</button> <a href="des_geral.php" class="btn btn-default">Cancelar</a> </div> </div> </form> </div> function addRow(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; if (rowCount < 5) { // limit the user from creating fields more than your limits var row = table.insertRow(rowCount); var colCount = table.rows[0].cells.length; row.id = 'row_'+rowCount; for (var i = 0; i < colCount; i++) { var newcell = row.insertCell(i); newcell.outerHTML = table.rows[0].cells[i].outerHTML; } $.getJSON('des_processa.php?search=',{op: 10, ajax: 'true'}, function(j){ var options = '<option></option>'; for (var i = 0; i < j.length; i++) { options += '<option value="' + j[i].id_produto + '">' + j[i].produto + '</option>'; } $('#produto').last().html(options); }); var listitems= row.getElementsByTagName("input") for (i=0; i<listitems.length; i++) { listitems[i].setAttribute("oninput", "calculate('"+row.id+"')"); } } else { alert("Maximum Passenger per ticket is 4."); } } function deleteRow(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; for (var i = 0; i < rowCount; i++) { var row = table.rows[i]; var chkbox = row.cells[0].childNodes[0]; if (null !== chkbox && true === chkbox.checked) { if (rowCount <= 1) { // limit the user from removing all the fields alert("Cannot Remove all the Passenger."); break; } table.deleteRow(i); rowCount--; i--; } } } function calculate(elementID,num) { var mainRow = document.getElementById(elementID); var myBox1 = mainRow.querySelectorAll('[name=qtd[0]]')[0].value; var myBox2 = num; var total = mainRow.querySelectorAll('[name=vtot[0]]')[0]; var myResult1 = myBox1 * myBox2; total.value = myResult1; $("#vuni")[0].maskMoney({thousands:'.', decimal:',', affixesStay: false}); $("#vtot")[0].maskMoney({thousands:'.', decimal:',', affixesStay: false}); } Agradeço se alguem puder me ajudar, Obrigado!
    • Por Rogerio Pancini
      Boa noite pessoal.
       
      Há dois dias estou montando uma tela de soma, em Jquery.
      Fui tirando todos os bugs, mas agora não sei mais o que fazer.
      A soma tem hora que falha e o total geral, não soma nem a porrete.
       
      Segue o que fiz até agora.
       
      <script src="https://www.agenciamove.com.br/briefing/js/jquery-2.1.3.min.js"></script> <script type="text/javascript" src="https://plentz.github.io/jquery-maskmoney/javascripts/jquery.maskMoney.min.js"></script> <div class="row"> <div class="col-xs-12 col-sm-2 col-md-3 titulo_ferramenta"> Canais online </div> <div class="col-xs-12 col-sm-2 col-md-2 titulo_ferramenta"> Verba diária </div> <div class="col-xs-12 col-sm-2 col-md-2 titulo_ferramenta"> Período de vericulação mensal </div> <div class="col-xs-12 col-sm-2 col-md-2 titulo_ferramenta"> Verba mensal </div> <div class="col-xs-12 col-sm-2 col-md-3 titulo_ferramenta"> Estimativa de alcance mensal </div> </div> <div class="row"> <div class="col-xs-12 col-sm-3 col-md-3 canais_titulo"> Google Adwords </div> <div class="col-xs-12 col-sm-2 col-md-2"> <input name="vd_ga" id="vd_ga" class="real input_geral" type="text" /> </div> <div class="col-xs-12 col-sm-2 col-md-2"> <input name="pvm_ga" id="pvm_ga" class="input_geral_2" type="text" /><span class="canais_titulo"> dias</span> </div> <div class="col-xs-12 col-sm-2 col-md-2"> <input name="vm_ga" id="vm_ga" class="real input_geral" type="text" readonly /> </div> <div class="col-xs-12 col-sm-2 col-md-3"> <input name="eam_ga" id="eam_ga" class="input_geral_2" type="text" readonly /><span class="canais_titulo"> Cliques</span> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-2 col-md-3 canais_titulo"> Facebook visita site </div> <div class="col-xs-12 col-sm-2 col-md-2"> <input name="vd_fvs" id="vd_fvs" class="real input_geral" type="text" /> </div> <div class="col-xs-12 col-sm-2 col-md-2"> <input name="pvm_fvs" id="pvm_fvs" class="input_geral_2" type="text" /><span class="canais_titulo"> dias</span> </div> <div class="col-xs-12 col-sm-2 col-md-2"> <input name="vm_fvs" id="vm_fvs" class="real input_geral" type="text" readonly /> </div> <div class="col-xs-12 col-sm-2 col-md-3"> <input name="eam_fvs" id="eam_fvs" class="input_geral_2" type="text" readonly /><span class="canais_titulo"> Cliques</span> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-2 col-md-3 canais_titulo"> Facebook curtida na página </div> <div class="col-xs-12 col-sm-2 col-md-2"> <input name="vd_fcp" id="vd_fcp" class="real input_geral" type="text" /> </div> <div class="col-xs-12 col-sm-2 col-md-2"> <input name="pvm_fcp" id="pvm_fcp" class="input_geral_2" type="text" /><span class="canais_titulo"> dias</span> </div> <div class="col-xs-12 col-sm-2 col-md-2"> <input name="vm_fcp" id="vm_fcp" class="real input_geral" type="text" readonly /> </div> <div class="col-xs-12 col-sm-2 col-md-3"> <input name="eam_fcp" id="eam_fcp" class="input_geral_2" type="text" readonly /><span class="canais_titulo"> Cliques</span> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-2 col-md-3 canais_titulo"> Instagram seguidores </div> <div class="col-xs-12 col-sm-2 col-md-2"> <input name="vd_is" id="vd_is" class="real input_geral" type="text" /> </div> <div class="col-xs-12 col-sm-2 col-md-2"> <input name="pvm_is" id="pvm_is" class="input_geral_2" type="text" /><span class="canais_titulo"> dias</span> </div> <div class="col-xs-12 col-sm-2 col-md-2"> <input name="vm_is" id="vm_is" class="real input_geral" type="text" readonly /> </div> <div class="col-xs-12 col-sm-2 col-md-3"> <input name="eam_is" id="eam_is" class="input_geral_2" type="text" readonly /><span class="canais_titulo"> Cliques</span> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-2 col-md-3"></div> <div class="col-xs-12 col-sm-4 col-md-4 canais_titulo text-right"> Valor total verba mês </div> <div class="col-xs-12 col-sm-2 col-md-2"> <input name="total_1" id="total_1" class="real input_geral" type="text" readonly /> </div> <div class="col-xs-12 col-sm-2 col-md-3"></div> </div> <hr /> <div class="titulo_pag_ferramenta">Já na ferramenta de impulsionamentos, basta colocar o valor diário e a quantidade de posts que deseja estar postando mensalmente:</div> <hr /> <div class="row"> <div class="col-xs-12 col-sm-2 col-md-2 titulo_ferramenta"> Canais online </div> <div class="col-xs-12 col-sm-2 col-md-2 titulo_ferramenta"> Verba diária </div> <div class="col-xs-12 col-sm-2 col-md-2 titulo_ferramenta"> Quantidade de posts mês </div> <div class="col-xs-12 col-sm-2 col-md-2 titulo_ferramenta"> Verba mensal </div> <div class="col-xs-12 col-sm-2 col-md-2 titulo_ferramenta"> Estimativa de alcance por post </div> <div class="col-xs-12 col-sm-2 col-md-2 titulo_ferramenta"> Estimativa de alcance total de posts mês </div> </div> <div class="row"> <div class="col-xs-12 col-sm-2 col-md-2 canais_titulo"> Facebook impulsionamento de posts </div> <div class="col-xs-12 col-sm-2 col-md-2"> <input name="vd_fip" id="vd_fip" class="real input_geral" type="text" /> </div> <div class="col-xs-12 col-sm-2 col-md-2"> <input name="qpm_fip" id="qpm_fip" class="input_geral" type="text" /> </div> <div class="col-xs-12 col-sm-2 col-md-2"> <input name="vm_fip" id="vm_fip" class="real input_geral" type="text" readonly /> </div> <div class="col-xs-12 col-sm-2 col-md-2"> <input name="eap_fip" id="eap_fip" class="input_geral" type="text" readonly /> </div> <div class="col-xs-12 col-sm-2 col-md-2"> <input name="eatpm_fip" id="eatpm_fip" class="input_geral" type="text" readonly /> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-2 col-md-2 canais_titulo"> Instagram impulsionamento de posts </div> <div class="col-xs-12 col-sm-2 col-md-2"> <input name="vd_iip" id="vd_iip" class="real input_geral" type="text" /> </div> <div class="col-xs-12 col-sm-2 col-md-2"> <input name="qpm_iip" id="qpm_iip" class="input_geral" type="text" /> </div> <div class="col-xs-12 col-sm-2 col-md-2"> <input name="vm_iip" id="vm_iip" class="real input_geral" type="text" readonly /> </div> <div class="col-xs-12 col-sm-2 col-md-2"> <input name="eap_iip" id="eap_iip" class="input_geral" type="text" readonly /> </div> <div class="col-xs-12 col-sm-2 col-md-2"> <input name="eatpm_iip" id="eatpm_iip" class="input_geral" type="text" readonly /> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-2 col-md-2"> </div> <div class="col-xs-12 col-sm-4 col-md-4 canais_titulo text-right"> Valor total verba mês </div> <div class="col-xs-12 col-sm-2 col-md-2"> <input name="total_2" id="total_2" class="real input_geral" type="text" readonly /> </div> <div class="col-xs-12 col-sm-2 col-md-2"> </div> <div class="col-xs-12 col-sm-2 col-md-2"> </div> </div> <hr /> <div class="row"> <div class="col-xs-12 col-sm-2 col-md-2"> </div> <div class="col-xs-12 col-sm-2 col-md-2"> </div> <div class="col-xs-12 col-sm-2 col-md-2"> </div> <div class="col-xs-12 col-sm-4 col-md-4 canais_titulo text-right"> Geral </div> <div class="col-xs-12 col-sm-2 col-md-2"> <input name="total_geral" id="total_geral" class="real input_geral" type="text" readonly /> </div> </div> <script type="text/javascript">$(".real").maskMoney({prefix:'R$ ', thousands:'.', decimal:',', affixesStay: true});</script> <script type="text/javascript"> $(document).ready(function(){ var formato = { minimumFractionDigits: 2 , style: 'currency', currency: 'BRL' } /****** Cálculos Google Adwords ******/ $('#vd_ga').on('blur',function(){ var vd_ga = $('#vd_ga').val().replace("R$ ","").replace('.','').replace(',', '.'); var pvm_ga = $('#pvm_ga').val(); //$('#vm_ga').val(vd_ga * pvm_ga); $("#vm_ga").val((vd_ga * pvm_ga).toLocaleString('pt-BR', formato)); $('#eam_ga').val(vd_ga * pvm_ga); }); $('#pvm_ga').on('blur',function(){ var vd_ga = $('#vd_ga').val().replace("R$ ","").replace('.','').replace(',', '.'); var pvm_ga = $('#pvm_ga').val(); $('#vm_ga').val((vd_ga * pvm_ga).toLocaleString('pt-BR', formato)); $('#eam_ga').val(vd_ga * pvm_ga); }); /****** Cálculos Google Adwords ******/ /****** Cálculos Facebook visita site ******/ $('#vd_fvs').on('blur',function(){ //var vd_fvs = $('#vd_fvs').val().replace(',', '.'); var vd_fvs = $('#vd_fvs').val().replace("R$ ","").replace('.','').replace(',', '.'); var pvm_fvs = $('#pvm_fvs').val(); $('#vm_fvs').val((vd_fvs * pvm_fvs).toLocaleString('pt-BR', formato)); $('#eam_fvs').val(vd_fvs * pvm_fvs); }); $('#pvm_fvs').on('blur',function(){ //var vd_fvs = $('#vd_fvs').val().replace(',', '.'); var vd_fvs = $('#vd_fvs').val().replace("R$ ","").replace('.','').replace(',', '.'); var pvm_fvs = $('#pvm_fvs').val(); $('#vm_fvs').val((vd_fvs * pvm_fvs).toLocaleString('pt-BR', formato)); $('#eam_fvs').val(vd_fvs * pvm_fvs); }); /****** Cálculos Facebook visita site ******/ /****** Cálculos Facebook curtida na página ******/ $('#vd_fcp').on('blur',function(){ var vd_fcp = $('#vd_fcp').val().replace("R$ ","").replace('.','').replace(',', '.'); var pvm_fcp = $('#pvm_fcp').val(); $('#vm_fcp').val((vd_fcp * pvm_fcp).toLocaleString('pt-BR', formato)); $('#eam_fcp').val(vd_fcp * pvm_fcp); }); $('#pvm_fcp').on('blur',function(){ var vd_fcp = $('#vd_fcp').val().replace("R$ ","").replace('.','').replace(',', '.'); var pvm_fcp = $('#pvm_fcp').val(); $('#vm_fcp').val((vd_fcp * pvm_fcp).toLocaleString('pt-BR', formato)); $('#eam_fcp').val(vd_fcp * pvm_fcp); }); /****** Cálculos Facebook curtida na página ******/ /****** Cálculos Instagram seguidores ******/ $('#vd_is').on('blur',function(){ var vd_is = $('#vd_is').val().replace("R$ ","").replace('.','').replace(',', '.'); var pvm_is = $('#pvm_is').val(); $('#vm_is').val((vd_is * pvm_is).toLocaleString('pt-BR', formato)); $('#eam_is').val(vd_is * pvm_is); }); $('#pvm_is').on('blur',function(){ var vd_is = $('#vd_is').val().replace("R$ ","").replace('.','').replace(',', '.'); var pvm_is = $('#pvm_is').val(); $('#vm_is').val((vd_is * pvm_is).toLocaleString('pt-BR', formato)); $('#eam_is').val(vd_is * pvm_is); }); /****** Cálculos Instagram seguidores ******/ /****** Cálculo total 1 ******/ $('#vd_ga, #pvm_ga, #vd_fvs, #pvm_fvs, #vd_fcp, #pvm_fcp, #vd_is, #pvm_is').on('input', function(){ var vm_ga = parseFloat($("#vm_ga").val().replace("R$ ","").replace('.','').replace(',', '.')) || 0; var vm_fvs = parseFloat($("#vm_fvs").val().replace("R$ ","").replace('.','').replace(',', '.')) || 0; var vm_fcp = parseFloat($("#vm_fcp").val().replace("R$ ","").replace('.','').replace(',', '.')) || 0; var vm_is = parseFloat($("#vm_is").val().replace("R$ ","").replace('.','').replace(',', '.')) || 0; var total_1 = vm_ga + vm_fvs + vm_fcp + vm_is; //if(!isNaN(total_1)) $('#total_1').val(total_1); //if(!isNaN(total_1)) $("#total_1").val(total_1.toLocaleString('pt-BR', formato)); if(!isNaN(total_1)) $('#total_1').val((total_1).toLocaleString('pt-BR', formato)); }); /****** Cálculo total 1 ******/ /*********************************************************************************************/ /****** Cálculos Facebook impulsionamento de posts ******/ $('#vd_fip').on('blur',function(){ var vd_fip = $('#vd_fip').val().replace("R$ ","").replace('.','').replace(',', '.'); var qpm_fip = $('#qpm_fip').val(); $('#vm_fip').val((vd_fip * qpm_fip).toLocaleString('pt-BR', formato)); $('#eap_fip').val(vd_fip * 75); var eap_fip = $('#eap_fip').val(); $('#eatpm_fip').val(qpm_fip * eap_fip); }); $('#qpm_fip').on('blur',function(){ var vd_fip = $('#vd_fip').val().replace("R$ ","").replace('.','').replace(',', '.'); var qpm_fip = $('#qpm_fip').val(); $('#vm_fip').val((vd_fip * qpm_fip).toLocaleString('pt-BR', formato)); $('#eap_fip').val(vd_fip * 75); var eap_fip = $('#eap_fip').val(); $('#eatpm_fip').val(qpm_fip * eap_fip); }); /****** Cálculos Facebook impulsionamento de posts ******/ /****** Cálculos Instagram impulsionamento de posts ******/ $('#vd_iip').on('blur',function(){ var vd_iip = $('#vd_iip').val().replace("R$ ","").replace('.','').replace(',', '.'); var qpm_iip = $('#qpm_iip').val(); $('#vm_iip').val((vd_iip * qpm_iip).toLocaleString('pt-BR', formato)); $('#eap_iip').val(vd_iip * 75); var eap_iip = $('#eap_iip').val(); $('#eatpm_iip').val(qpm_iip * eap_iip); }); $('#qpm_iip').on('blur',function(){ var vd_iip = $('#vd_iip').val().replace("R$ ","").replace('.','').replace(',', '.'); var qpm_iip = $('#qpm_iip').val(); $('#vm_iip').val((vd_iip * qpm_iip).toLocaleString('pt-BR', formato)); $('#eap_iip').val(vd_iip * 75); var eap_iip = $('#eap_iip').val(); $('#eatpm_iip').val(qpm_iip * eap_iip); }); /****** Cálculos Instagram impulsionamento de posts ******/ /****** Cálculo total 2 ******/ $('#vd_fip, #qpm_fip, #vd_iip, #qpm_iip').on('input', function(){ var vm_fip = parseFloat($("#vm_fip").val().replace("R$ ","").replace('.','').replace(',', '.')) || 0; var vm_iip = parseFloat($("#vm_iip").val().replace("R$ ","").replace('.','').replace(',', '.')) || 0; var total_2 = vm_fip + vm_iip; //if(!isNaN(total_2)) $('#total_2').val(total_2); //if(!isNaN(total_2)) $("#total_2").val(total_2.toLocaleString('pt-BR', formato)); if(!isNaN(total_2)) $('#total_2').val((total_2).toLocaleString('pt-BR', formato)); }); /****** Cálculo total 2 ******/ /****** Cálculo totais ******/ $('#vd_ga, #pvm_ga, #vd_fvs, #pvm_fvs, #vd_fcp, #pvm_fcp, #vd_is, #pvm_is, #vd_fip, #qpm_fip, #vd_iip, #qpm_iip').on('input', function(){ var total_1 = parseFloat($("#total_1").val().replace("R$ ","").replace('.','').replace(',', '.')) || 0; var total_2 = parseFloat($("#total_2").val().replace("R$ ","").replace('.','').replace(',', '.')) || 0; var total_geral = total_1 + total_2; //if(!isNaN(total_geral)) $('#total_geral').val(total_geral); //if(!isNaN(total_geral)) $("#total_geral").val(total_geral.toLocaleString('pt-BR', formato)); if(!isNaN(total_geral)) $('#total_geral').val((total_geral).toLocaleString('pt-BR', formato)); }); /****** Cálculo totais ******/ }); </script> Falta só a maldita soma para finalizar a tela.
      Eu me viro em PHP, mas em Jquery eu apanho demais ainda.
       
      Se alguém puder me dar alguma luz, eu agradeço.
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

Este projeto é mantido e patrocinado pelas empresas:
Hospedado por: