Jump to content
  • Revista PROGRAMAR: Já está disponível a edição #60 da revista programar. Faz já o download aqui!

carcleo

Abrir ul para cima

Recommended Posts

carcleo

Bom, criei um plugin de uma ul que preenche suas li's com os options de algum select.

Tudo OK.

Mas de repente estou com 4 problemas para resolver e dependo da ajuda de vocês.

À principio, esse select pode ser visto em http://www.hotplateprensas.com.br/estilos/.

1) De uma forma geral, qualquer select, quando clicado, caso dê para abir suas options na vertical e para baixo, beleza, é a prioridade. No entando, quando é o caso em que o select está no fim da página, nesse cado, as options abrem para o alto aparecendo acima dos elementos html que estão em cima dela. O que eu preciso fazer é exatamente esse comportamento quando abrir a ul que está substituindo o select. Como fazer?

2) Se notarem bem no select, perceberam que quando abre o overflow scroll dele, dá para notar que existe um buraco entre o final da li e o inicio do scroll e dá para ver os elementos sobrescritos que estão abaixo por essa brecha. Como corrigir isso?

3) Quando abro a ul, aparece o scrool. Note que a ul abre como efeito de slideDown(), slideUp(). Será que existe uma forma de adicionar esse plugin também ao scroll?

4) O scrool, não aparece quando fecho a ul. Está certo, pois coloquei overflow: hidden. Mas Gostaria de fazer da mesma forma que a ul se retrai com efeito, o scroll também se retraisse da mesma forma. Será que trem jeito?

HTML

    <div class="selectOptions">
      <select required>
        <option value="1">Um</option>
        <option value="2">Dois</option>
        <option value="3">Três</option>
        <option value="4">Quatro</option>
        <option value="5">Cinco</option>
        <option value="6">Seis</option>
        <option value="7">Sete</option>
        <option value="8">Oito</option>
      </select>
      <label class="selecionada"></label>
      <ul>
      </ul>
    </div>

CSS

    @charset "utf-8";
    /* CSS Document */
    .selectOptions {
        display:block;
        position:relative;
        width:200px;
        height:35px;    
    }
    .selectOptions select {
        display:none;
    }
    .selectOptions .selecionada {
        display:block;
        
    }
    .selectOptions .selecionada:after {
        display: block;
        position: absolute;
        content: "";
        top: 1px;
        right: 1px;
        width: 33px;
        height: 33px;
        background-image: url(../_imgs/setaBaixo.jpg);
    }
    .selectOptions .selecionada.setaBaixo:after {
        background-image: url(../_imgs/setaBaixo.jpg);
    }
    .selectOptions .selecionada.setaCima:after {
        background-image: url(../_imgs/setaCima.jpg);
    }
    
    .selectOptions ul {
        display:none;
        width:100%;
    }
    .selectOptions ul li{
        cursor:pointer;
    }
    
    .selectOptions ul li,
    .selectOptions .selecionada {
        position:relative;
        width:94%;
        height:34px;
        line-height:34px;    
        padding:0 3% 0 3%; 
        border-bottom: rgb(200,200,200) 1px solid;
        background-color:rgb(240,240,240);
    }
    
    .selectOptions  ul li:hover,
    .selectOptions  .selecionada {
        background-color: rgb(200,200,200);
    }

jQuery

    $(document).ready(function(e) {
      
      // entrega o primeiro elemento da select option à div .selecionada
      $(".selectOptions .selecionada").html($(".selectOptions select > option:first-child").html());
    
      /*popula as li's*/
      $(".selectOptions select > option").each(function() {
          //Não exibe a primeira li pois esta já está sendo exibida na .selecionada
          if($(this).is(':first-child')) $(".selectOptions ul").append("<li value='"+this.value+"' style='display:none;'>"+this.text+"</li>");      
          else $(".selectOptions ul").append("<li style='display:block;' value='"+this.value+"'>"+this.text+"</li>");
      });
    
      function exibeSelectUl () {
          
          $(".selectOptions ul > li").each(function() {
              
              if($.trim($(this).text()) === $.trim($(".selectOptions .selecionada").html())) 
                   $(this).css("display","none", "important");
              else   
                   $(this).css("display","block","important");
    
          });
          
           $(".selectOptions ul").css("display","block");
          
      }
    
      contador=0;
      
       $(".selectOptions .selecionada").click(function(e) {
    
          exibeSelectUl();
                
          quantasLis = $(".selectOptions ul li").length;
          
          if(contador % 2 == 0) {                    
              
              $(".selectOptions .selecionada").addClass("setaCima").removeClass("setaBaixo");
              $(".selectOptions ul li").css("display","none").slideDown(400); 
    
              if(quantasLis > 4) {        
                  $(".selectOptions ul").css('height', '175px');
                  $(".selectOptions ul").css("overflow-y", "scroll");
              } else {
                  $(".selectOptions ul").css('height', 'auto');
                  $(".selectOptions ul").css("overflow-y", "auto");
              }
              
          } else {    
          
              $(".selectOptions .selecionada").addClass("setaBaixo").removeClass("setaCima");
              $(".selectOptions ul li").slideUp(400, function(){
                  $(".selectOptions ul").css("overflow-y", "hidden");
              });
          }
    
          contador++;
          
          e.stopPropagation();
          
      });    
     
      // ao clicar em qualquer coissa, fecha a ul caso ela esteja aberta
      $(document).on('click',function(e){
          if(
               $(".selectOptions ul").css("overflow-y") == "auto" ||
               $(".selectOptions ul").css("overflow-y") == "scroll") {
                   $(".selectOptions .selecionada").trigger("click");
          }
      });
    
    /*ai clicar na li, busca correspondência na select option e o checa (marca)*/
     //$(".selectOptions .selectOption ul li:not(:eq(0))").on( 'click',function(evt){
     $( '.selectOptions ul li' ).on( 'click', function( evt ){ 
         /*Joga a li selecionada a label*/
         $(".selectOptions .selecionada").html($(this).html());
         /*Joga a li selecionada ao topo da ul*/
         $($(this).closest('ul')).prepend($(this)); 
          // Armazena nome do maos que quer selecionar
          var li = $(this).attr("value");
          // Guarda em opcao o elemento que retornar do filtro que vai testar entre as
          // options possíveis
          var opcao = $('.selectOptions select option').filter(function() {
              // testa entre as options qual delas tem o mesmo conteúdo que o desejado
              return $(this).attr('value') === li;
          });
    
          exibeSelectUl();
          
          // Redefine o atributo do elemento encontrado pra selecionado.
          opcao.attr('selected', true);                 
             
     });
    
    });

 

Share this post


Link to post
Share on other sites
JakeBass

com um timeout o scroll fica melhor

if(quantasLis > 4) {        
	$(".selectOptions ul").css('height', '175px');
	setTimeout(function() {
		$(".selectOptions ul").css("overflow-y", "scroll");
	}, 400);
}

 

Share this post


Link to post
Share on other sites
carcleo

Então, @JackeBass.

Valeu pelo retorno. mas não é bem isso que eu preciso.

Na verdade o que eu preciso é que o efeito slideDown(), fosse aplicado também à scroolBar da UL para que tanto as li's quanto a scroolBar, abrissem juntas no slideDown().

Edited by carcleo

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

×

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.