Jump to content
ndias

criar uma linha com select option

Recommended Posts

alguém sabe como eu faço para criar uma linha igual da imagem anexa para clicar segurando com o botão esquerdo do mouse e arrastar as duas pontas pra esquerda e direita até o valor desejado?

print.jpg

Share this post


Link to post
Share on other sites

obrigado! achei um exemplo simples usando a biblioteca bootstrap-slider versão 9.9.0 e agora to com dificuldade de colocar um evento para chamar uma função que tenho...

 

meu código tá assim:

 

           <input id="ex12c" type="text" />
            <script>
            $("#ex12c").slider({ id: "slider12c", min: 16, max: 36, range: true, value: [19, 23] });
            var sliderC = new Slider("#ex12c", { id: "slider12c", min: 16, max: 36, range: true, value: [19, 23] });   
            </script>

 

se tentar chamar no JQuery assim, não funciona:


            $("#ex12c").change(function(){
                return minhaFunction(this.value);
            }); 

 

se eu colocar direto na input, funciona mas fica num loop infinito:

 

<input id="ex12c" type="text" onchange="minhaFunction(this.value)" />

 

o ideal era chamar a função quando soltasse o range...

 

alguma solução onkeyup?

Share this post


Link to post
Share on other sites
18 horas atrás, ndias disse:

obrigado! achei um exemplo simples usando a biblioteca bootstrap-slider versão 9.9.0 e agora to com dificuldade de colocar um evento para chamar uma função que tenho...

 

meu código tá assim:

 

           <input id="ex12c" type="text" />
            <script>
            $("#ex12c").slider({ id: "slider12c", min: 16, max: 36, range: true, value: [19, 23] });
            var sliderC = new Slider("#ex12c", { id: "slider12c", min: 16, max: 36, range: true, value: [19, 23] });   
            </script>

 

se tentar chamar no JQuery assim, não funciona:


            $("#ex12c").change(function(){
                return minhaFunction(this.value);
            }); 

 

se eu colocar direto na input, funciona mas fica num loop infinito:

 

<input id="ex12c" type="text" onchange="minhaFunction(this.value)" />

 

o ideal era chamar a função quando soltasse o range...

 

alguma solução onkeyup?

 

desisti da biblioteca bootstrap-slider e parti para uma solução polyfill em HTML5.

 

<input type="range" multiple value="10,80" />

 

Veja o JavaScript:

 

(function() {
"use strict";

var supportsMultiple = self.HTMLInputElement && "valueLow" in HTMLInputElement.prototype;

var descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value");

self.multirange = function(input) {
    if (supportsMultiple || input.classList.contains("multirange")) {
        return;
    }

    var value = input.getAttribute("value");
    var values = value === null ? [] : value.split(",");
    var min = +(input.min || 0);
    var max = +(input.max || 100);
    var ghost = input.cloneNode();

    input.classList.add("multirange", "original");
    ghost.classList.add("multirange", "ghost");

    input.value = values[0] || min + (max - min) / 2;
    ghost.value = values[1] || min + (max - min) / 2;

    input.parentNode.insertBefore(ghost, input.nextSibling);

    Object.defineProperty(input, "originalValue", descriptor.get ? descriptor : {
        // Fuck you Safari >:(
        get: function() { return this.value; },
        set: function(v) { this.value = v; }
    });

    Object.defineProperties(input, {
        valueLow: {
            get: function() { return Math.min(this.originalValue, ghost.value); },
            set: function(v) { this.originalValue = v; },
            enumerable: true
        },
        valueHigh: {
            get: function() { return Math.max(this.originalValue, ghost.value); },
            set: function(v) { ghost.value = v; },
            enumerable: true
        }
    });

    if (descriptor.get) {
        // Again, fuck you Safari
        Object.defineProperty(input, "value", {
            get: function() { return this.valueLow + "," + this.valueHigh; },
            set: function(v) {
                var values = v.split(",");
                this.valueLow = values[0];
                this.valueHigh = values[1];
                update();
            },
            enumerable: true
        });
    }

    ghost.oninput = input.oninput.bind(input);

    function update() {
        ghost.style.setProperty("--low", 100 * ((input.valueLow - min) / (max - min)) + 1 + "%");
        ghost.style.setProperty("--high", 100 * ((input.valueHigh - min) / (max - min)) - 1 + "%");
    }

    input.addEventListener("input", update);
    ghost.addEventListener("input", update);

    update();
}

multirange.init = function() {
    [].slice.call(document.querySelectorAll("input[type=range][multiple]:not(.multirange)")).forEach(multirange);
}

if (document.readyState == "loading") {
    document.addEventListener("DOMContentLoaded", multirange.init);
}
else {
    multirange.init();
}

})();

 

 

Meu desafio agora são dois:

1- Ao mover o range, mostrar instantaneamente o valor esquerdo e direito;

2- Após arrastar o range e soltar o botão do mouse, chamar minha função, passando a value esquerda e direita juntas (por ex 10,80). 

Share this post


Link to post
Share on other sites
4 horas atrás, ndias disse:

 

desisti da biblioteca bootstrap-slider e parti para uma solução polyfill em HTML5.

 

<input type="range" multiple value="10,80" />

 

Veja o JavaScript:

 

(function() {
"use strict";

var supportsMultiple = self.HTMLInputElement && "valueLow" in HTMLInputElement.prototype;

var descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value");

self.multirange = function(input) {
    if (supportsMultiple || input.classList.contains("multirange")) {
        return;
    }

    var value = input.getAttribute("value");
    var values = value === null ? [] : value.split(",");
    var min = +(input.min || 0);
    var max = +(input.max || 100);
    var ghost = input.cloneNode();

    input.classList.add("multirange", "original");
    ghost.classList.add("multirange", "ghost");

    input.value = values[0] || min + (max - min) / 2;
    ghost.value = values[1] || min + (max - min) / 2;

    input.parentNode.insertBefore(ghost, input.nextSibling);

    Object.defineProperty(input, "originalValue", descriptor.get ? descriptor : {
        // Fuck you Safari >:(
        get: function() { return this.value; },
        set: function(v) { this.value = v; }
    });

    Object.defineProperties(input, {
        valueLow: {
            get: function() { return Math.min(this.originalValue, ghost.value); },
            set: function(v) { this.originalValue = v; },
            enumerable: true
        },
        valueHigh: {
            get: function() { return Math.max(this.originalValue, ghost.value); },
            set: function(v) { ghost.value = v; },
            enumerable: true
        }
    });

    if (descriptor.get) {
        // Again, fuck you Safari
        Object.defineProperty(input, "value", {
            get: function() { return this.valueLow + "," + this.valueHigh; },
            set: function(v) {
                var values = v.split(",");
                this.valueLow = values[0];
                this.valueHigh = values[1];
                update();
            },
            enumerable: true
        });
    }

    ghost.oninput = input.oninput.bind(input);

    function update() {
        ghost.style.setProperty("--low", 100 * ((input.valueLow - min) / (max - min)) + 1 + "%");
        ghost.style.setProperty("--high", 100 * ((input.valueHigh - min) / (max - min)) - 1 + "%");
    }

    input.addEventListener("input", update);
    ghost.addEventListener("input", update);

    update();
}

multirange.init = function() {
    [].slice.call(document.querySelectorAll("input[type=range][multiple]:not(.multirange)")).forEach(multirange);
}

if (document.readyState == "loading") {
    document.addEventListener("DOMContentLoaded", multirange.init);
}
else {
    multirange.init();
}

})();

 

 

Meu desafio agora são dois:

1- Ao mover o range, mostrar instantaneamente o valor esquerdo e direito;

2- Após arrastar o range e soltar o botão do mouse, chamar minha função, passando a value esquerda e direita juntas (por ex 10,80). 

 

 

Consegui resolver assim:

 

<input type="range" multiple value="10,80" oninput="display.value=value" onchange="minhaFunction(display.value)" /> 

<input type="text" id="display" value="10,80" readonly>

 

Valeu!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By marco tulio sousa
      Boa tarde,
       
      FIz a declaração abaixo e tinha expectativa que o relatório retornado tivesse datas de inicio e termino de afastamento e ferias.
      Afastamentos estão em 1 tabela e férias em outra.
      Erro ORA-000936
      Que devo fazer?
       
       
      SELECT 
      SUBSTR(RHCGED_ALT_SIT_FUN.CODIGO, -6)
      Matric,
      RHCGED_ALT_SIT_FUN.COD_SIT_FUNCIONAL,
      CASE
       WHEN RHCGED_ALT_SIT_FUN.COD_SIT_FUNCIONAL = '1216' THEN 'ATESTADO'
       WHEN RHCGED_ALT_SIT_FUN.COD_SIT_FUNCIONAL = '1211' THEN 'INSS'
       WHEN RHCGED_ALT_SIT_FUN.COD_SIT_FUNCIONAL = '1220' THEN 'INSS'
       WHEN RHCGED_ALT_SIT_FUN.COD_SIT_FUNCIONAL = '1218' THEN 'MATERNID'
       WHEN RHCGED_ALT_SIT_FUN.COD_SIT_FUNCIONAL = '1118' THEN 'MATERNIDADE'
       WHEN RHCGED_ALT_SIT_FUN.COD_SIT_FUNCIONAL = '1318' THEN 'PATERNIDADE'
       WHEN RHCGED_ALT_SIT_FUN.COD_SIT_FUNCIONAL = '1210' THEN 'LIC REMUN'
      END TIPO_AFAST,
      TO_DATE(RHCGED_ALT_SIT_FUN.DATA_INIC_SITUACAO) DT_INIC_AFAST,
      TO_DATE(RHCGED_ALT_SIT_FUN.DATA_FIM_SITUACAO) DT_FIM_AFAST,
      TO_DATE(RHFERI_FERIAS.DT_INI_GOZO) DT_INIC_FERIAS,
      TO_DATE(RHFERI_FERIAS.DT_FIM_GOZO) DT_FIM_FERIAS
       
      FROM CRHH.RHCGED_ALT_SIT_FUN
      INNER JOIN CRHH.RHFERI_FERIAS ON RHCGED_ALT_SIT_FUN.CODIGO = RHFERI_FERIAS.CODIGO_CONTRATO

      WHERE 
      RHCGED_ALT_SIT_FUN.COD_SIT_FUNCIONAL In ('1216','1211','1220','1218','1118','1318','1210')
      AND
      CRHH.RHCGED_ALT_SIT_FUN.CODIGO >=lpad(:texto_1,15,'0')
      AND RHCGED_ALT_SIT_FUN.CODIGO  <=lpad(:texto_2,15,'0')
      ORDER BY RHCGED_ALT_SIT_FUN.DATA_INIC_SITUACAO DESC
    • By Kefatif
      Prezados, boa tarde.
       
      Preciso de ajuda com dois casos...
       
      1) Preciso criar dois botões "habilitar" e "desabilitar".
       
      Onde ao clicar no botão habilitar, ele grave no banco mysql no campo habilitado "S" para habilitado e "N" caso clique no desabilitar.
       
      2) A segundo etapa seria ao carregar a página do input ele habilitar ou não de acordo com a informação do meu banco.
       
      Agradeço desde já a ajuda de todos.
    • By Jack Oliveira
      Ola pessoal  boa noite..
      Vou tentar explicar aqui o meu problema da melhor forma que der, espero que possam entender...
       
      Amigos eu estou tendo um problema em fazer uma atualização 
      Bom quando vou cadastrar da sucesso e é gravado normal no banco de dados ate ai esta ok..
       
      Seria  o seguinte dentro de um form ele gera linhas ou seja + inputs caso seja preciso entende? Usando javascript´s, quando vou atualizar as informações que esta nas tabelas ou seja
      são 3 tabelas 
      tbl_department 
      dep_id
      nome
      news etc....
       
      tbl_department_openning_hour
      hou_id
      titulo
      time
      dep_id  <-- Aqui onde pega o id da tabela tbl_department
       
       
      tbl_department_faq
      faq_id
      titulo
      conteudo
      dep_id  <-- Aqui onde pega tbm o id da tabela tbl_department
       
      Obs: Ele Grava normal no banco de dados, porem quando atualizar que não esta dando certo, e é preciso que seja atualizado todos os input das tabelas tbl_department_faq e tbl_department_openning_hour. Acredito que já entenderam aqui umas das parte que seria preciso.
       
      Bom vou posta uma parte do HTML  do FORM para melhor entender o que seria ok!!, Sei que não tem nada a ver com o PHP, mais como tinha dito apenas para melhor entender..
      <?php $dep_id = get('EditarItem'); $QueryTblDepartment = DBRead('tbl_department','*',"WHERE dep_id = '{$dep_id}'"); if (is_array($QueryTblDepartment)) { foreach ($QueryTblDepartment as $TblDepartment) { ?> <form method="post" action="?Atualizar=<?= $TblDepartment['dep_id']; ?>" enctype="multipart/form-data"> <div class="col-md-6"> <div class="form-group"> <label>Titulo:</label> <input class="form-control" name="dep_name" value="<?= $TblDepartment['dep_name']; ?>" placeholder="Exemplo: Globo City" autocomplete="off" required> </div> </div> <div class="col-md-6"> <div class="form-group"> <label>Telefone:</label> <input class="form-control telefone" name="dep_phone" value="<?= $TblDepartment['dep_phone']; ?>" placeholder="Exemplo: (00) 0000-0000" autocomplete="off"> </div> </div> <div class="col-md-6"> <div class="form-group"> <label>WhatsApp:</label> <input class="form-control whatsapp" name="dep_whatsapp" value="<?= $TblDepartment['dep_whatsapp']; ?>" placeholder="Exemplo: (00) 0.0000-0000" autocomplete="off"> </div> </div> <div class="col-md-6"> <div class="form-group"> <label>Fax:</label> <input class="form-control" name="dep_fax" value="<?= $TblDepartment['dep_fax']; ?>" placeholder="Exemplo: (00) 0000-0000" autocomplete="off"> </div> </div> <div class="form-group"> <label>Seção de FAQ:</label> <table id="fqSection" class="table table-bordered table-striped"> <thead> <tr> <th style="width:50%;">Titulo</th> <th>Contente</th> <th>Ação</th> </tr> </thead> <tbody> <?php //Departamento FAQ $QueryDepartamentoFaq = DBRead('tbl_department_faq','*',"WHERE dep_id='{$dep_id}'"); if (is_array($QueryDepartamentoFaq)) { foreach ($QueryDepartamentoFaq as $Fa) { $arr_fq_id[] = $Fa['fq_id']; $arr_fq_title[] = $Fa['fq_title']; $arr_fq_content[] = $Fa['fq_content']; }} if(isset($arr_fq_title)): for($i=0;$i<count($arr_fq_title);$i++) { ?> <tr> <td> <input autocomplete="off" type="text" class="form-control" style="width:100%" name="fq_title" value="<?= $arr_fq_title[$i]; ?>"> </td> <td> <textarea class="form-control" cols="30" rows="10" style="width:100%;height:50px;" name="fq_content"><?= $arr_fq_content[$i]; ?></textarea> </td> <td> <span class="btn btn-danger btn-xs"><a onclick="DeletarItem(<?= $arr_fq_id[$i]; ?>, 'DeletarFaq');" href="#!" style="color: #fff;">Excluir</a></span> </td> </tr> <?php //}} } endif; ?> </tbody> </table> <!-- Aqui para criar novos input para serem gravado no banco caso seja preciso --> <input type="button" class="btn btn-info btn-small" id="btnAddFaq" value="+ Adicionar linha" style="margin-bottom:10px;"> </div> <center><hr> <button class="btn btn-primary">Atualizar</button> <br><br> </center> </div> </form> <?php } } ?> Bom ai esta apenas um pouco do form tem mais coisa que seria igual o que preciso resolver
       
      Agora a parte do PHP que preciso resolver, vou posta apenas uma parte para poder entender tbm
       
      <?php // Atualizar Item de Departamento if (isset($_GET['Atualizar'])) { $dep_id = get('Atualizar'); $fq_empty = 0; if( !empty($_POST['fq_title']) && !empty($_POST['fq_content']) ) { $fq_empty = 1; foreach ($_POST['fq_title'] as $value) { //Sempre mostra o erro nesta linha $arr1[] = $value; } foreach ($_POST['fq_content'] as $value) { //Sempre mostra o erro nesta linha $arr2[] = $value; } $j=0; for($i=0;$i<count($arr1);$i++) { //Sempre mostra o erro nesta linha if($arr1[$i]=='' && $arr2[$i]=='') {continue;} else { $new_arr1[$j] = $arr1[$i]; $new_arr2[$j] = $arr2[$i]; $j++; } } } $AtualizarDepartment = array( 'dep_name' => post('dep_name'), 'dep_slug' => UrlAmigavel(post('dep_name')), 'dep_detail' => post('dep_detail'), 'dep_address' => post('dep_address'), 'dep_phone' => post('dep_phone'), 'dep_whatsapp' => post('dep_whatsapp'), 'dep_fax' => post('dep_fax'), 'dep_email' => post('dep_email'), 'meta_title' => post('dep_name'), 'meta_keyword' => post('meta_keyword'), 'meta_description' => LimitarTexto(post('dep_detail'),'200','...') ); $QueryTblDepartment = DBUpdate('tbl_department', $AtualizarDepartment, "dep_id = '{$dep_id}'", TRUE); if ($QueryTblDepartment != 0) { Redireciona('?sucesso&Department'); } else { Redireciona('?erro&Department'); } // Atualizar tbl_department_faq if($fq_empty == 1) { for($i=0;$i<count($new_arr1);$i++) { $TblDepartmentFaq = array( 'fq_title' => $new_arr1[$i], 'fq_content' => $new_arr2[$i], 'dep_id' => $dep_id ); $QueryTblDepartmentFaq = DBUpdate('tbl_department_faq', $TblDepartmentFaq, "dep_id = '{$dep_id}'"); } } if ($QueryTblDepartmentFaq != 0) { Redireciona('?sucesso&AtualizarFaq'); } else { Redireciona('?erro&AtualizarFaq'); } // Criar Novo input para tbl_department_faq if($fq_empty == 1) { for($i=0;$i<count($new_arr1);$i++) { $SqlFaq = array( 'fq_title' => $new_arr1[$i], 'fq_content' => $new_arr2[$i], 'dep_id' => $QueryTblDepartment ); $QueryFaq = DBRead('tbl_department_faq', $SqlFaq); } } if ($QueryFaq != 0) { Redireciona('?sucesso&Faq'); } else { Redireciona('?erro&Faq'); } } Neste caso ao mesmo tempo que teria que atualizar a
      tbl_department_faq
      faq_id
      titulo
      conteudo
      dep_id  <-- Aqui onde pega tbm o id da tabela tbl_department
       
      Ele precisa grava caso seja preciso criar nova linha ou seja criar novo input para atualizar junto entende?
       
      Pessoal espero que eu tenha sido bem objetivo aqui para que possam entender....
       
      Desde já agradeço
    • By aw10home
      Quando faço a consulta no phpMyadmim consigo o resultado esperado. Mas pelo visto não estou sabendo fazer direito em PHP. O que estou errando? Porque não consigo fazer a média (prtm) "aparecer"?
      abaixo meu código.
      <?php if (isset($_GET['$id_aluno'])){ $id_aluno = addslashes($_GET['$id_aluno']);} elseif (isset($_GET['id_aluno'])){ $id_aluno = addslashes($_GET['id_aluno']);}//addslashes evita sqlinjection else{ $id_aluno=(""); } $informacao=$con->prepare("SELECT a.id_aluno, a.nome, SUM(((b.prt*5)+(m.prt*3)+(v.prt*2))/10 ) as prtm FROM aluno a inner join avb1 b on a.id_aluno = b.id_aluno inner join avm2 m on a.id_aluno = m.id_aluno inner join avp v on a.id_aluno = v.id_aluno group by a.id_aluno, a.nome WHERE a.id_aluno = $id_usuario"); $informacao->execute(); ?> <!------------> <table class="cBolt"> <tr> <td>Avaliação</td> <td>Bim.</td> <td>Português</td> </tr> <?php while($linha=$informacao->fetch(PDO::FETCH_ASSOC)){ ?> <tr> <td>Média</td> <td>1º</td> <td><?php echo $linha['prtm'];?></td> </tr> <?php } ?> </table>  
    • By osmarindy
      Boa noite Pessoal.
      Estou com o seguinte problema. Tenho duas tabelas principais "tblProjeto" e "tblItensProjeto", tenho que selecionar o projeto (tblProjeto) cujo o item 19 (tblItensProjeto) já esteja concluído (status 5) e que o item 15 (tblItensProjeto) não esteja concluído (status 5) e nem cancelado (status 4).
      Tenho o seguinte código:
      SELECT p.nmProjeto, l.nmLocalidade, f.usuario, r.nmRequisitante, p.dtSolicitacao,p.dtPrevisaoEntrega, s.nmStatus FROM tblProjeto as p inner join tblItensProjeto as i on i.idProjeto = p.idProjeto inner join tblLocalidade as l on l.idLocalidade = p.idLocalidade inner join tblFuncionario as f on f.idFuncionario = p.idFuncionario inner join tblRequisitante as r on r.idRequisitante = p.idRequisitante inner join tblStatusProj as s on s.idStatus = i.idStatus where (i.idAtividade = 19 and i.idStatus= 5 ) and (i.idAtividade = 15 and (i.idStatus <> 5 and i.idStatus <> 4))
      Se executo um  filtro de cada vez (where i.idAtividade = 19 and i.idStatus= 5 ) ou (i.idAtividade = 15 and (i.idStatus <> 5 and i.idStatus <> 4)) eles trazem resultados, mas quando deixo os dois filtros não funciona.
      Possuo 5 projetos que estão com a atividade 19 concluída e atividade 15 pendente. mas, não consigo com esse select trazer a informação. Alguém sabe como posso resolver?
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.