Ver Mensaje Individual
  #38 (permalink)  
Antiguo 25/08/2014, 06:09
Avatar de IsaBelM
IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años, 4 meses
Puntos: 1012
Respuesta: [APORTE] efectos sin jquery

Select con Imágenes ----> compatibilidad : todos los navegadores modernos. no incluido ie8

Si se quiere compatibilidad con ie8, hay que descomentar la segunda función initEmularSelect() y comentar la primera, ya que no acepta el método forEach()

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">

* {
    margin: 0;
    border: none;
    position: relative;
}



body {
    width: 100%;
    height: 100%;
    font-size: 100%;
}




form {
    width: 50%;
    margin: 0 auto;
    text-align: center;
}




div.placeholder_cont {
    width: 90%;
    height: 3.6em;
    margin: 2em auto;
    background-color: rgb(255, 255, 255);
    font: 1em Verdana;
    border-radius: .5em;
    border: .2em solid rgb(204, 204, 204);
    background-clip: padding-box;
    text-indent: 2%;
}




div.placeholder_cont > span.placeholder_txt {
    height: 100%;
    line-height: 3.6em; /* mismo tamaño que "height" de placeholder_cont*/
    color: rgb(190, 190, 190);
    text-shadow: 0 0 0;
    display: block;
    text-align: left;
}



div.placeholder_cont > span.placeholder_txt > strong {
    color: rgb(0, 0, 0);
}



div.placeholder_cont > img {
    width: 1.48%;
    float: right;
    top: 46%;
    right: 3%;
}




div.placeholder_cont > input {
    display: none;
}



ul.opciones {
    left: -.16em;
    visibility: hidden;
    list-style-type: none;
    width: 99.9%;
    height: auto;
    padding: 0;
    background-color: rgb(255, 255, 255);
    text-align: left;
    border-width: 0 .2em .2em .2em;
    border-style: solid;
    border-color: rgb(204, 204, 204);
    border-bottom-right-radius: 0.5em;
    border-bottom-left-radius: 0.5em;
    z-index: 100;
}



ul.opciones > li.defecto {
    height: 1.7em;
    padding-top: 1em;
    border-bottom: 0.1em inset rgb(207, 202, 202);
    color: rgb(190, 190, 190);
    text-shadow: 0 0 0;
}



li.scrollerLateral {
    height: 11.7em;
    padding: .3em 0;
    color: rgb(255, 255, 255);
    border-top: 1px inset rgb(204, 204, 204);
}



li.scrollerLateral > div.scrollbarLatera {
    position: absolute;
    top: .3em;
    left: 97.8%;
    width: 1.8%;
    display: inline;
    z-index: 100;
}


li.scrollerLateral > div.scrollbarLatera > div.carrilLatera {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background-color: rgb(80, 69, 71);
    border-radius: 1em;
    border: .1em solid rgb(158, 158, 158);
}



li.scrollerLateral > div.scrollbarLatera > div.carrilLatera > div.barraLatera {
    position: absolute;
    left: .1em;
    top: 1px;
    width: 82%;
    height: 0;
    background-color: rgb(206, 206, 214);
    border-radius: 1em;
}



li.scrollerLateral > div.scrollbarLatera > div.carrilLatera > div.barraLatera:hover {
    cursor: auto;
}



div.lista {
    width: 100%;
    height: 100%;
    overflow: hidden;
}



div.valorLista {
    position: absolute;
    width: 100%;
    height: auto;
}



div.valorLista > ul {
    height: 100%;
    overflow: hidden;
    list-style-type: none;
    padding: 0;
}




div.valorLista > ul > li {
    padding: .2em 0;
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    cursor:pointer;
    text-indent: 2%;
    white-space: nowrap;
}


div.valorLista > ul > li:first-child {
    padding: .9em 0;
}

div.valorLista > ul > li > img {
    width: 6.5%;
    vertical-align: middle;
    margin-right: 2%;
}



div.valorLista > ul > li:hover {
    color: rgb(255, 102, 0);
}


@media screen and (max-width: 1024px) {

    body {
        font-size: 80%;
    }

}


@media screen and (max-width: 860px) {

    body {
        font-size: 62.5%;
    }
}


@media screen and (max-width: 650px) {

    body {
        font-size: 50%;
    }
}
</style>
<script type="text/javascript">
var lib = {

    EventoIE8 : function(elemento, nomevento, fnc) {

        if (elemento.addEventListener) {

                elemento.addEventListener(nomevento, fnc, false);

            } else if (elemento.attachEvent) {

                elemento.attachEvent('on' + nomevento, fnc);
        }
    },


    EventoEliminarIE8 : function(elemento, nomevento, fnc) {

        if (elemento.removeEventListener) {

                elemento.removeEventListener(nomevento, fnc, false);

            } else if (elemento.detachEvent) {

                elemento.detachEvent('on' + nomevento, fnc);
        }
    },


    cssComputado : function(obj, styleProp, psElem) {

        if (obj == null) { return 0; }

        if (window.getComputedStyle) {

            var pseudoElem = psElem || null;
            var valor = window.getComputedStyle(obj, pseudoElem)[styleProp];

        } else if (obj.currentStyle) {

            var valor = (/(em|%)/.test(obj.currentStyle[styleProp])) ? lib.cssComputadoIE8Pixel(obj, styleProp) : obj.currentStyle[styleProp];
        }

        return valor;
    },



    cssComputadoIE8Pixel : function(elem, prop) {

        var value = elem.currentStyle[prop] || 0;
        var Copy = elem.style.left;
        var runtimeCopy = elem.runtimeStyle.left;

        elem.runtimeStyle.left = elem.currentStyle.left;
        elem.style.left = (prop === 'fontSize') ? '1em' : value;
        value = elem.style.pixelLeft + 'px';

        elem.style.left = Copy;
        elem.runtimeStyle.left = runtimeCopy;

        return value;
    },



    EventoCancelar: function(evt) {

    var ev = evt || window.event;

        if (ev.preventDefault) {

            ev.preventDefault();

        } else {

            ev.returnValue = false;
        }
    },



    EventoParar: function(evt) { 

    var ev = evt || window.event;

        if (ev.stopPropagation) {

            ev.stopPropagation();

        } else {

            ev.cancelBubble = true;
        } 
    }

}




var EmularSelect = {

    desplegarOpc: [],
    recogerOpc: null,
    prevObj: null,
    prevOpc: null,



    initEmularSelect: function() {

        Array.prototype.forEach.call(document.querySelectorAll('.placeholder_cont'), function(obj, i) {

            var opciones = obj.querySelector('.opciones');
            var opcionesLista = obj.querySelector('.opcionesLista');

            lib.EventoIE8(obj, 'click', EmularSelect.desplegarOpc[i] = function(event) {EmularSelect.MuestraOpciones(event, this, opciones, i);});

            Array.prototype.forEach.call(opcionesLista.getElementsByTagName('LI'), function(op, n) {

               lib.EventoIE8(op, 'mousedown', function(event) {EmularSelect.Pegar(event, this, opciones, n);});
            });

            scrollDiv.initscrollDiv(i);

        });

/* FUNCIÓN COMENTADA
       for (var i = 0, obj = document.querySelectorAll('.placeholder_cont'); i < obj.length; i++) {

            (function(i) {

                var opciones = obj[i].querySelector('.opciones');
                var opcionesLista = obj[i].querySelector('.opcionesLista');

                lib.EventoIE8(obj[i], 'click', EmularSelect.desplegarOpc[i] = function(event) {EmularSelect.MuestraOpciones(event, this, opciones, i);});
 
                for (var n = 0, op = opcionesLista.getElementsByTagName('LI'); n < op.length; n++) {

                    (function(n) {

                        lib.EventoIE8(op[n], 'mousedown', function(event) {EmularSelect.Pegar(event, this, opciones, n);});
                    })(n);

                }

                scrollDiv.initscrollDiv(i);

            })(i);
        }
*/
    },



    MuestraOpciones: function(evt, obj, opciones, indiceObjeto) {

        lib.EventoCancelar(evt);
        lib.EventoParar(evt);

        lib.EventoEliminarIE8(document, 'click', EmularSelect.recogerOpc);
        lib.EventoIE8(document, 'click', EmularSelect.recogerOpc = function() {EmularSelect.Cerrar(opciones);});

        opciones.style.visibility = 'visible';
        opciones.parentNode.getElementsByTagName('IMG')[0].src = 'fh.gif';

        if (EmularSelect.prevObj != null && EmularSelect.prevOpc != opciones) {

            EmularSelect.prevOpc.style.visibility = 'hidden';
            EmularSelect.prevOpc.parentNode.getElementsByTagName('IMG')[0].src = 'fv.gif';
        }

        EmularSelect.prevObj = obj;
        EmularSelect.prevOpc = opciones;
    },




    Pegar: function(evt, _this, opciones, indiceOpcion) {

        lib.EventoEliminarIE8(document, 'click', EmularSelect.recogerOpc);

        if (indiceOpcion == 0) {

            opciones.parentNode.getElementsByTagName('INPUT')[0].value = '';
            opciones.parentNode.getElementsByTagName('SPAN')[0].textContent = _this.textContent;

        } else {

            opciones.parentNode.getElementsByTagName('INPUT')[0].value = _this.textContent;
            opciones.parentNode.getElementsByTagName('SPAN')[0].innerHTML =  '<strong>' + _this.textContent + '</strong>';
        }

        EmularSelect.Cerrar(opciones);
    },




    Cerrar: function(opciones) {

        lib.EventoEliminarIE8(document, 'click', EmularSelect.recogerOpc);

        opciones.style.visibility = 'hidden';
        opciones.parentNode.getElementsByTagName('IMG')[0].src = 'fv.gif';
    },
}
continua en el siguiente post
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}

Última edición por IsaBelM; 21/09/2014 a las 07:57