0

Pessoal estou usando o plugin multiselect do JQuery https://plugins.jquery.com/tag/multiselect/.

Ocorre que ele está me gerando duas dificuldades.

A primeira dificuldade é com CSS: Preciso alterar as cores que ele coloca nas caixas de seleção e nas fontes. Já procurei até onde fica isso e não achei.

inserir a descrição da imagem aqui

A outra dificuldade é com JQuery mesmo. Preciso criar uma função que, ao clicar na primeira opção, ou seja, indiferente, os demais campos são desativados para escolha. E, caso clicado novamente libera os demais campos. Ainda, se algum campo que não seja o indiferente for selecionado, então o indiferente se desabilita. Ou então achar onde eu consigo alterar o texto que aparece na caixa de SELECIONE para cada uma dos select's.

jquery.multiselect.css

.ui-multiselect { padding:2px 0 2px 4px; text-align:left }
.ui-multiselect span.ui-icon { float:right }
.ui-multiselect-single .ui-multiselect-checkboxes input { position:absolute !important; top: auto !important; left:-9999px; }
.ui-multiselect-single .ui-multiselect-checkboxes label { padding:5px !important }

.ui-multiselect-header { margin-bottom:3px; padding:3px 0 3px 4px }
.ui-multiselect-header ul { font-size:0.9em }
.ui-multiselect-header ul li { float:left; padding:0 10px 0 0 }
.ui-multiselect-header a { text-decoration:none }
.ui-multiselect-header a:hover { text-decoration:underline }
.ui-multiselect-header span.ui-icon { float:left }
.ui-multiselect-header li.ui-multiselect-close { float:right; text-align:right; padding-right:0 }

.ui-multiselect-menu { display:none; padding:3px; position:absolute; z-index:10000; text-align: left }
.ui-multiselect-checkboxes { position:relative /* fixes bug in IE6/7 */; overflow-y:scroll }
.ui-multiselect-checkboxes label { cursor:default; display:block; border:1px solid transparent; padding:3px 1px }
.ui-multiselect-checkboxes label input { position:relative; top:1px }
.ui-multiselect-checkboxes li { clear:both; font-size:0.9em; padding-right:3px }
.ui-multiselect-checkboxes li.ui-multiselect-optgroup-label { text-align:center; font-weight:bold; border-bottom:1px solid }
.ui-multiselect-checkboxes li.ui-multiselect-optgroup-label a { display:block; padding:3px; margin:1px 0; text-decoration:none }

/* remove label borders in IE6 because IE6 does not support transparency */
* html .ui-multiselect-checkboxes label { border:none }

HTML:

<div class="buscaImovel"><br />
  <h1 >Pesquise pelo imóvel que deseja</h1>
  QUERO COMPRAR E QUERO VENDER<br />
  <form action="busca.php"  method="post">
    <input type="hidden" id="tipos" name="tipos">
    <input type="hidden" id="bairros" name="bairros">

    <div class="camposBusca">
      <?php  $tiposImoveis = $tiposDao->pesquisaTipos(); ?>
      <label class="labelPequeno">Tipo</label>
      <br />
      <select multiple="multiple" id="tipo" name="tipo[]" size="1" required>
        <option value="Indiferente">Indiferente</option>
        <?php
             if ($tiposImoveis == null) {
                 echo "<option value=''>Não há tipo cadastrado ainda!</option>";
             } else {
               foreach ($tiposImoveis as $tipoImovel) {
                   echo "<option value='".$tipoImovel->getIdTipos()."'>".$tipoImovel->getNome()."</option>";
               }
             }
           ?>
      </select>
    </div>
    <div class="camposBusca">
      <?php  $bairrosImoveis = $imoveisDao->pesquisaBairros("Muriaé"); ?>
      <label class="labelPequeno">Bairro</label>
      <br />
      <select multiple="multiple" id="bairro" name="bairro[]" size="1" required>
        <option value="Indiferente">Indiferente</option>
        <?php
             if ($bairrosImoveis == null) {
                 echo "<option value=''>Não há tipo cadastrado ainda!</option>";
             } else {
               foreach ($bairrosImoveis as $bairrosImovel) {
                   echo "<option value='".$bairrosImovel."'>".$bairrosImovel."</option>";
               }
             }
           ?>
      </select>      
    </div>
    <div class="camposBusca">
      <button>Buscar</button>
    </div>
  </form>
  <div style="height:15px;"></div>
  <div class="alternativaEscolha"> <a href="buscaAvancada.php">
    <label class="labelGrande" style="background-color:#CCC;">Busca Avançada</label>
    </a> </div>
  <div class="alternativaEscolha"> 
    <!--abrir popUp--> 
    <a href="buscaCodigo.php">
    <label class="labelGrande" style="background-color:#CCC;">Busca por Código</label>
    </a> </div>
</div>

JQuery

  $(function(){
      $("#tipo").multiselect();
      $("#bairro").multiselect();
  });

  $("#tipo").multiselect().change(function() {
      $("#tipos").val($("#tipo").multiselect().val());    
  })
  $("#bairro").multiselect().change(function() {
      $("#bairros").val($("#bairro").multiselect().val());    
  })

Até onde deu para ir:

<script type="text/javascript">
  $(document).ready(function(){

    for (i = 0; i < $(".ui-multiselect-checkboxes").length; i++) {  
      $ui = $(".ui-multiselect-checkboxes");
      $indiferente = $ui.find("[title=Indiferente]");
      $indiferente.prop("checked", true);
      $ui.find("input").change(function(){
        if($(this).attr("title") != "Indiferente" && this.checked){
            $indiferente.prop("checked", false); //desmarco indiferente se algum
                                                //outro for selecionado
        }
        if(!$ui.find("input:checked").length){ //se nenhum input estiver marcado
            $indiferente.prop("checked",true); //marco indiferente

        }
      })

      $indiferente.change(function(){                 //quando indiferente mudar
        if(this.checked){                             //se estiver marcado
            $ui.find("input").not("[title=Indiferente]").prop("checked", false);                       
                                                      //desmarco outros
        }           
      })

      $("#ui-multiselect-tipo-option-0").click(); $("#ui-multiselect-bairro-option-0").click();

    }
  })



  $(function(){
      $("#tipo").multiselect();
      $("#bairro").multiselect();
  });


</script>


<script>
$(document).ready(function(e){
  $(".fechar").click(function() {
    $(".buscaCodigo").hide();
    $(".fechar").hide();
  });

  $(".alternativaEscolha").click(function() {
    $(".buscaCodigo").show();
    $(".fechar").show();
  });  

});
</script>

<div class="fechar">
  <img src="_img/btn-close.png" style="width:50px;" />
</div>

<div class="buscaCodigo">
   <form action="busca.php" method="post">

     <input type="hidden" name="acao"  value="buscaCodigo" />

     <label>Código</label><input type="text" class="typeTextMedio" id="codigo"  name="codigo" required />

     <input type="submit">

   </form> 
</div>

<div class="buscaImovel"><br />
  <h1 class="h1Centralizado">Pesquise pelo imóvel que deseja</h1>

  <div class="divBusca">

  <form action="busca.php"  method="post">
    <input type="hidden" name="acao" value="buscaPrincipal">

    <div class="camposBusca">
      <?php  $tiposImoveis = $tiposDao->pesquisaTipos(); ?>
      <label class="labelPequeno">Tipo</label>
      <br />
      <select multiple="multiple" id="tipo" name="tipo[]" size="1" required>
        <option value="Indiferente">Indiferente</option>
        <?php
             if ($tiposImoveis == null) {
                 echo "<option value=''>Não há tipo cadastrado ainda!</option>";
             } else {
               foreach ($tiposImoveis as $tipoImovel) {

                   echo "<option value='".$tipoImovel->getIdTipos()."'>".$tipoImovel->getNome()."</option>";
               }
             }
           ?>
      </select>
    </div>

    <div class="camposBusca">
      <?php  $bairrosImoveis = $imoveisDao->pesquisaBairros("Muriaé"); ?>
      <label class="labelPequeno">Bairro</label>
      <br />
      <select multiple="multiple" id="bairro" name="bairro[]" size="1" required>
        <option value="Indiferente">Indiferente</option>
        <?php
             if ($bairrosImoveis == null) {
                 echo "<option value=''>Não há tipo cadastrado ainda!</option>";
             } else {
               foreach ($bairrosImoveis as $bairrosImovel) {
                   echo "<option value='".$bairrosImovel."'>".$bairrosImovel."</option>";
               }
             }
           ?>
      </select>      
    </div>

    <div class="camposBusca" style="height:55px; width:55px; margin-bottom:0;">
      <input type="submit" style="background-image: url(_img/pesquisar.png); background-repeat:no-repeat; background-size:contain;" value="Pesquisar"  />
    </div>

  </form>
  </div>

  <div style="height:15px;"></div>

  <div class="alternativaEscolha">
    <a href="buscaAvancada.php">
      <label class="labelGrande" style="background-color:#CCC;">Busca Avançada</label>
    </a> 
  </div>

  <div class="alternativaEscolha"> 
    <!--abrir popUp--> 
        <label class="labelGrande" style="background-color:#CCC; color:#FFF">Busca por Código</label> 
  </div>

</div>

<script>
  $("#tipo").multiselect().change(function() {
      $("#tipos").val($("#tipo").multiselect().val());    
  })
  $("#bairro").multiselect().change(function() {
      $("#bairros").val($("#bairro").multiselect().val());    
  })
</script>
2
  • Oi Carlos, você poderia colocar o seu código fonte (css, html e js) aqui para que possamos ver como está sendo customizado o seu select?
    – LF Ziron
    Commented 20/04/2016 às 20:12
  • sim, coloquei. Mas pode ser visto também em dinamicaimoveis.com.br/novo Commented 20/04/2016 às 20:31

1 Resposta 1

1

Para mudar a cor do fundo, você pode adicionar isso ao seu css:

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
     background: blue !important /* escolha a cor que você quiser */
}

E quanto ao caso do indiferente, eu aconselho você a melhorar a identificação dos elementos, mas se você quiser que funcione exatamente da forma como está o seu html, pode usar o seguinte script:

$(document).ready(function(){
  $ui = $(".ui-multiselect-checkboxes").first()
  $indiferente = $ui.find("[title=Indiferente]");
  $ui.find("input").change(function(){
    if($(this).attr("title") != "Indiferente" && this.checked){
        $indiferente.prop("checked", false); //desmarco indiferente se algum
                                            //outro for selecionado
    }
    if(!$ui.find("input:checked").length){ //se nenhum input estiver marcado
        $indiferente.prop("checked",true); //marco indiferente

    }
  })
  $indiferente.change(function(){                 //quando indiferente mudar
    if(this.checked){                             //se estiver marcado
        $ui.find("input").not("[title=Indiferente]").prop("checked", false);                       
                                                  //desmarco outros
    }           
  })
})
17
  • 1
    Bom, sobre o css obrigado, vou separar cada um e dar backgrounds-color diferentes. mas quanto ao JQuery acho que vai ficar mais fácil receber com o php e verificar se existe a opção 'Indiferente'. Se houver, pesquiso de todos, Vai ficar muito extenso adicionar função verificar o contrario também: caso nenhum item esteja selecionado, então o indiferente fica desabilitado. Isso vai ficar muito confuso. Commented 21/04/2016 às 0:33
  • Acabei de fazer uma edição, agora se algum outro checkbox que não seja o "Indiferente" for selecionado, o "Indiferente" é desabilitado
    – LF Ziron
    Commented 21/04/2016 às 1:55
  • Isso vai ficar uma coisa meio que sem lógica. Imagina a cena; Você marcou um que não seja indiferente, nesse momento, indiferente é desabilitado. Ok. Marcou os 'n' próximos não indiferentes. Então, e se você desmarcar todos os não indiferentes marcados, quando desmarcar o ultimo, o indiferente deve ser habilitado novamente. Isso aí parece meio que sem sentido e surreal. Não? Commented 21/04/2016 às 11:49
  • Bem, nem tanto. Para você deixar dessa maneira é só colocar o atributo checked por padrão no input do indiferente. Depende de como você está projetando o sistema, tudo pode ter sentido nesse mundo x) Eu particularmente até gostei do select assim
    – LF Ziron
    Commented 21/04/2016 às 12:23
  • 1
    Na verdade, ficou imensamente melhor do que eu esperava. Agora vou estudar o que você fez para eu aprender isso direito. Muito obrigado. Agora, não querendo abusar da ajuda do amigo, certa vez ví um efeito em um site que não me lembro mais aonde uma div ia aparecendo aos poucos do topo à base dela. Muito bacana. Já ví alguns efeitos na net mas nada igual ao que ví. Você conhece esse efeito? Sabe como eu consigo implementar? Commented 21/04/2016 às 16:01

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .