Javascript - jQuery: simulare comportamento select in una select personalizzata

Forum - Javascript - jQuery: simulare comportamento select in una select personalizzata

Sevenjeak (Normal User)
Pro

Messaggi: 91
Iscritto: 03/01/2012

Postato alle 17:13
Martedì, 07/02/2012

E da ieri che sto provando a simulare, con jQuery, il comportamento di una select, tramite una select personalizzata fatta in css+jQuery.

In poche parole, ho creato una select personalizzata con questo codice:

Codice sorgente - presumibilmente Javascript

<div class="fake-select">
   <div>
      <ul>
        <li onclick="">Primo elemento</li>
        <li onclick="">Secondo elemento</li>
      </ul>
   </div>
</div>

Praticamente, grazie al css il div dentro al primo div fake-select, non viene visualizzato a video grazie i css, ed è posizionato in modo assoluto, in modo da apparire sotto e no dentro al tag padre, che faccio apparire con questo codice jQuery:

Codice sorgente - presumibilmente Plain Text

$(document).ready(function()
   {      
      $("div.fake-select").click(function()
      {
         $(this).children("div").show();
      });
   });

E fin qui tutto ok, il problema e chiudere il div che appare quando si clicca su un'altro elemento, quello che insomma accade in una select normale, non so se mi sono spiegato bene, ma come potrei fare?

Ho già provato, ma purtroppo il codice che non funzionava ora lo cancellato, e non posso postarvelo purtroppo.

P.S.: Ho provato anche con questo codice:

Codice sorgente - presumibilmente Javascript

$(document).ready(function()
   {
     $(this).click(function() {
        var fs = $("div .fake-select");
        
        for (var i = 0; i < fs.lenght; i++)
        {
           if (fs.index(i).children("div").is(":visible")) {
              fs.index(i).children("div").hide();
           }
        }
     } 
       
     $("div.fake-select").click(function()
     {       
       $(this).children("div").css("left", $(this).offset().left);
       $(this).children("div").css("top", $(this).offset().top + $(this).height() + 11);
       $(this).children("div").show();
     });
   });

Ma niente.

Ultima modifica effettuata da Sevenjeak il 09/02/2012 alle 13:44

Bonny (Member)
Expert

Messaggi: 437
Iscritto: 24/04/2009

Postato alle 17:19
Martedì, 07/02/2012

prova con la funzione focusout():
per esempio

Codice sorgente - presumibilmente Plain Text

$(document).ready(function()
       {      
          $("div.fake-select").click(function()
            {
                $(this).children("div").show();
            });
 
          $("div.fake-select").focusout(function()
          {
             $(this).children("div").hide();
          });
       });

Non so se funzionerà però mi sembra una buona idea!

Ultima modifica effettuata da Bonny il 07/02/2012 alle 17:22

Non funziona, ho già provato anche l'evento blur(), che si esegue quando l'elemento non è più attivo, ma non funziona, e credo che non vada neanche bene, nel caso ho più di un fake-select nella pagina? - Sevenjeak - 07/02/12 17:33

Qui http://api.jquery.com/category/events/ ci sono tutti gli eventi di jQuery; secondo me petresti usare mouseout(). Per il fatto dei più "fake-select" non dovrebbe esserci problema perchè con il codice di Bonny gestisci in un colpo solo tutti gli elementi con classe "fake-select". - GN - 07/02/12 21:50

Il problema è che non voglio far chiudere il fake-select all'evento mouseout(), ovvero quando il mouse esce fuori dall'elemento, ma quando si clicca su un'altro elemento, che non sia la select selezionato, o provato il codice di Bonny e altri codici, fatti da me, ma nessuno di questi funziona - Sevenjeak - 08/02/12 21:27

GN (Member)
Guru

Messaggi: 772
Iscritto: 30/04/2011

Postato alle 21:48
Mercoledì, 08/02/2012

Potresti chiuderlo al click di qualunque elemento che non sia il fake-select stesso:

Codice sorgente - presumibilmente Plain Text

$(document).ready(function()
  {      
    $("div.fake-select").click(function()
    {
      $(this).children("div").show();
    });
 
  $("div:[class!=fake-select]").click(function()
  {
    $("div.fake-select").children("div").hide();
  });
});

Non ho provato il codice, quindi non ti assicuro che funzioni... comunque prova e fammi sapere!

Non funziona, ho editato il primo post con un mi codice, ma con quello i menu neanche si aprono, praticamente voglio che quel codice mi chiude il fake-slect aperto, se clikki su un qualsiasi elemento, e mi apre il fake-select selezionato, anche se è stato appena chiuso dal codice sopra. - Sevenjeak - 09/02/12 13:47

boh... qui ci sono tutti i selettori, forse ti possono interessare: http://w3schools.com/jquery/jquery_ref_selectors.asp - GN - 10/02/12 18:56

Non so, continuo a provare con diversi codice ma non me ne funziona nessuno, a sto punto non so che fare, eppure il codice da me editato dovrebbe, se si clicca una select aperta, chiuderla e poi riaprirla, visto l'ordine degli istruzioni nel codice, giusto? - Sevenjeak - 10/02/12 22:11

Uhm... secondo me sì però non sono espertissimo di javascript quindi non ti assicuro niente. - GN - 11/02/12 21:23