[Pillola] Una SELECT avanzata

[NoR]

Per il mio lavoro mi sono trovato nell'esigenza di mettere dei tooltips sulle OPTION di una SELECT. In generale questa operazione non si può fare, perché le option non sono come A e quindi non gestiscono gli eventi di passaggio del mouse (almeno su Internet Explorer...).
Inoltre, se si da una dimensione alla SELECT, anche la tendina delle OPTION avrà quella dimensione e quindi se la descrizione supera tale lunghezza, sarà impossibile vedere la scelta(su FireFox questo problema non c'è).

Soluzione? Fingere! Sostituiamo la select con una INPUT di testo, dotata di un pulsantino che le consenta di aprire un DIV nascosto che contiene le OPTION.
E' più semplice di quello che sembra...

Vogliamo simulare questo!

<SELECT name="valoreEffettivo" style="width: 100px">
    <OPTION value="pm3_3.7.1">PortMaster 3 with ComOS 3.7.1
    <OPTION value="pm3_3.7">PortMaster 3 with ComOS 3.7
    <OPTION value="pm3_3.5">PortMaster 3 with ComOS 3.5
    <OPTION value="pm2_3.7">PortMaster 2 with ComOS 3.7
    <OPTION value="pm2_3.5">PortMaster 2 with ComOS 3.5
    <OPTION value="IRX_3.7R">IRX with ComOS 3.7R
    <OPTION value="IRX_3.5R">IRX with ComOS 3.5R
</SELECT> 

e lo faremo con questo

    <input id="valoreEffettivo" name="valoreEffettivo" type="hidden" value="" />
    <div id="contenitoreSelect" name="contenitoreSelect" class="select">
        <table cellspacing="0" cellpadding="0" border="0"><tr>
            <td width="99%" valign="center">
                <input readonly id="inputvalore" name="inputvalore" type="text" class="inputvalue" value="">
            </td>
            <td valign="center">
                [url="javascript:open();"][img]selectToolTips/select.gif[/img][/url]
            </td>
        </tr></table>
    </div>
    <div id="divmenu" name="divmenu" class="menu" style="display: none">
        <div style="position: relative">
        [url="javascript:valore('pm3_3.7.1','PortMaster 3 with ComOS 3.7.1');"]<NOBR>PortMaster 3 with ComOS 3.7.1</NOBR>[/url]

        [url="javascript:valore('pm3_3.7','PortMaster 3 with ComOS 3.7');"]<NOBR>PortMaster 3 with ComOS 3.7</NOBR>[/url]

        [url="javascript:valore('pm3_3.5','PortMaster 3 with ComOS 3.5');"]<NOBR>PortMaster 3 with ComOS 3.5</NOBR>[/url]

        [url="javascript:valore('pm2_3.7','PortMaster 2 with ComOS 3.7');"]<NOBR>PortMaster 2 with ComOS 3.7</NOBR>[/url]

        [url="javascript:valore('pm2_3.5','PortMaster 2 with ComOS 3.5');"]<NOBR>PortMaster 2 with ComOS 3.5</NOBR>[/url]

        [url="javascript:valore('IRX_3.7R','IRX with ComOS 3.7R');"]<NOBR>IRX with ComOS 3.7R</NOBR>[/url]

        [url="javascript:valore('IRX_3.5R','IRX with ComOS 3.5R');"]<NOBR>IRX with ComOS 3.5R</NOBR>[/url]

        </div>
    </div> 

Occorreranno queste funzioni JS

    function open() {
        if (divmenu.style.display=="none") {
            divmenu.style.display="";
        } else {
            divmenu.style.display="none";
        }
    }
    function valore(valor, desc) {
        inputvalore.value=desc;
        valoreEffettivo.value=valor;
        divmenu.style.display="none";
    } 

e questo codice CSS

.select {
    font-family:Arial;
    font-size:13px;
    text-align:left;
    font-weight:normal;
    margin:0px;
    vertical-align: top;
    clean: both;
    border: 1px;
    border-color: #7F9DB9;
    border-style: solid;
    overflow: none;
    width:100px; 
    height:10px;
    padding:1px;
}
.menu {
    font-family:Arial;
    font-size:13px;
    text-align:left;
    font-weight:normal;
    margin:0px;
    vertical-align: top;
    clean: both;
    background-color: white;
    border: 1px;
    border-color: black;
    border-style: solid;
    overflow: none;
    padding:2px;
    width:100px; 
    height:100px;
    position: absolute;
    left: expression(document.getElementById("contenitoreSelect").offsetLeft); /* IE5+ only */
    z-index: 30;
}
.inputvalue {
    font-family:Arial;
    font-size:13px;
    text-align:left;
    font-weight:normal;
    margin:0px;
    vertical-align: top;
    border: 0px;
    width:80px; 
}
.linkoption {
    font-family:Arial;
    font-size:13px;
    text-align:left;
    color: black;
    font-weight:normal;
    text-decoration: none;
}

A.linkoption:hover {
    font-family:Arial;
    font-size:13px;
    text-align:left;
    color: white;    
    background-color: #316AC5;
    font-weight:normal;
    text-decoration: none;
} 

Il tutto è funzionate da Internet Explorer 5 in su, ma non funziona per Netscape...
Quindi usate solo se veramente necessario e sempre in abbinamento ad uno script che distingua tra i browser per visualizzare nel caso una semplice SELECT.

Se perfezionate il codice, siete pregati di postare anche qui le modifiche... GRAZIE!

[fcaldera]

Due semplici considerazioni

1) Nella tua soluzione hai eliminato la select e inserito una lista di link (qui avresti dovuto usare una <ul>[*]...). Se il dispositivo che uso non supporta javascript per qualsiasi motivo, non visualizzerò i link e quindi non accederò alle funzionalità della pagina: perchè non utilizzare un approccio meno intrusivo, ad esempio, trasformare al volo la select?

2) se devo utilizzare una select in un form con questa soluzione non riesco più a passare il valore...

Non so se queste limitazioni valgono la presenza di un tooltip.

[fcaldera]

2) se devo utilizzare una select in un form con questa soluzione non riesco più a passare il valore...

ovviamente nel caso di una select multipla

[NoR]

Originariamente inviato da fcaldera
Non so se queste limitazioni valgono la presenza di un tooltip.

Fondamentalmente hai ragione!!!

Come mia attenuante, però, voglio farti notare che
1: si può sempre implementare uno script che "sostituisca" la select nel dom, proprio come hai proposto. La mia resta un esempio di mentalità (sbagliata? ) per risolvere un problema apparentemente senza soluzione
2: il problema che volevo risolvere è che se la widget viene ridotta, non si leggono i dati all'interno: può essere un valido motivo. Nell'esempio infatti la select risulterà inutilizzabile, in quanto la parte che si vede delle descrizioni sono tutte uguali!!!
3: una select siffatta consente di mettere nel div praticamente di tutto: immagini, testo, colori... cosa che invece non è possibile in una select reale.

Purtroppo il problema resta senza una soluzione soddisfacente, soprattutto perché il browser dominante (forse per poco...) non risolve il problema.

Grazie cmq del intervento: era necessario!

[NoR]

Originariamente inviato da fcaldera
ovviamente nel caso di una select multipla

Il caso di una select multipla si può risolvere sostituendo all'input text una input text area in cui accodare i valori e passare al value dell'hidden un array...

Si trova la soluzione: ma come mi hai fatto notare, l'importante è pensare bene se il gioco vale la candela...

[andr3a]

come dice fcaldera la select andrebbe sostituita per un approccio meno itrusivo.

Sarebbe interessante avere una funzione capace di fare questo in automatico ... pardòn, ce ne sono tante in giro, ma sarebbe interessante averne una da discutere su questo forum

I problemi legati alle select sono più di un e ben più drastici di un tooltip, ad esempio in IE < 7 le select sono fastidiosissime perchè non rispettano lo z-index e le soluzioni fanno tutte un pò acqua ad eccezione delle librerie corpose (Ext, dojo, qooxdoo) che rimpiazzano in toto questo componente lasciando la possibilità di interagira con la form pur rispettando lo z-index (fattibile, basta nascondere - fingere - la select e rimpiazzarla via DOM).

Perchè non provi a prendere qualche spunto ed aggiornare questa pillola? sono sicuro diventerà molto interessante.

Grazie a prescindere per l'intenzione