02/12/2014, 05:12
|
 | Colaborador | | Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses Puntos: 1012 | |
| Respuesta: [APORTE] efectos sin jquery
Emulando Input Type Range --> compatibilidad: todos los navegadores modernos. no incluido ie8
Código:
<!DOCTYPE html>
<html dir="ltr" lang="es-es">
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
* {
margin: 0;
border: none;
position: relative;
}
body {
width: 100%;
height: 100%;
font-size: 100%;
}
div.contenedorRango {
width: 40%; /* el ancho del range con respecto a su elemento padre */
margin: 2.75em auto;
padding: 0 2em;
background-color: rgb(224, 224, 224);
border: .1em solid rgb(221, 20, 20);
}
div.contenedorRango > div.valorRango {
width: 0;
height: 1.55em;
left: 0;
}
div.contenedorRango > div.valorRango > span.minimo {
float: left;
left: 0;
font: bold .9em Verdana;
color: rgb(68, 68, 62);
}
div.contenedorRango > div.valorRango > span.maximo {
float: right;
right: 0;
font: bold .9em Verdana;
color: rgb(68, 68, 62);
}
div.contenedorRango > div.rango {
width: 100%;
height: auto;
margin-bottom: 1em;
}
div.contenedorRango > div.rango > div.bocadillo {
width: 2.7em;
height: auto;
left: 1.5em; /*19px;*/
top: 0;
margin-bottom: .5em;
background-color: rgb(191, 191, 199);
font: bold 80% Verdana;
color: rgb(68, 68, 62);
border-radius: .2em;
border: 0.1em solid rgb(158, 158, 158);
text-align: center;
z-index: 2;
}
div.contenedorRango > div.rango > div.bocadillo:after {
width: 0;
height: 0;
position: absolute;
bottom: -9px;
left: 50%;
display: block;
content: "";
margin-left: -3px;
overflow: hidden;
border: 4px solid rgba(0, 0, 0, 0);
border-top-color: rgb(158, 158, 158);
}
div.contenedorRango > div.rango > div.scrollbar {
width: 100%;
height: .75em;
}
div.contenedorRango > div.rango > div.scrollbar > div.carril {
width: 100%;
height: .6em;
top: 10%;
background-color: rgb(80, 69, 71);
border-radius: 1em;
}
div.contenedorRango > div.rango > div.scrollbar > div.carril > input.inputTextValue {
display: none;
}
div.contenedorRango > div.rango > div.scrollbar > div.carril > div.barra {
width: 2.45em;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-color: rgb(191, 191, 199);
border-radius: 3em;
z-index: 2;
}
div.contenedorRango > div.rango > div.scrollbar > div.carril > div.barra:hover {
cursor: move;
}
div.contenedorRango > div.rango > div.scrollbar > div.carril > div.progreso {
width: 0;
height: 100%;
background-color: rgb(47, 184, 28);
border-radius: 1em;
}
div.contenedorRango > div.rango > ul.regla {
width: 0;
list-style-type: none;
top: -19px;
padding-left: 0;
overflow: hidden;
color: rgb(224, 224, 224);
}
div.contenedorRango > div.rango > ul.regla > li.num {
width: 0;
height: .25em;
float: left;
left: 0;
top: 0;
text-align: right;
border-left: 1px solid rgb(15, 15, 15);
border-right: 1px solid rgb(15, 15, 15);
}
</style>
<script type="text/javascript">
lib = {
Evento : function(elemento, nomevento, fnc) {
elemento.addEventListener(nomevento, fnc, false);
},
EventoEliminar : function(elemento, nomevento, fnc) {
elemento.removeEventListener(nomevento, fnc, false);
},
cssComputado : function(obj, styleProp) {
if (obj == null) { return 0; }
var valor = window.getComputedStyle(obj, null)[styleProp];
return valor;
},
EventoCancelar : function(evt) {
evt.preventDefault();
},
EventoParar : function(evt) {
evt.stopPropagation();
}
}
var Range = {
reglaVisible : true, // boleano --> true / false
min : [],
max : [],
step : [],
inicia : [],
barW : 0,
trackW : 0,
posInicialBocadillo : 0,
nuevoMin : [],
valorBocata : [],
valorProgreso : 0,
desplazamiento : 0,
desplazamientoBoca : 0,
barraLeft : 0,
barraProgreso : null,
bocata : null,
dividirCarril : [],
anchoCarril : [],
offset1 : {},
offset2 : {},
ofset : 0,
fooDrag : function() {},
initRange : function() {
Range.barW = parseInt(lib.cssComputado(document.querySelector('.barra'), 'width'));
Range.trackW = parseInt(lib.cssComputado(document.querySelector('.carril'), 'width')),
Range.posInicialBocadillo = parseInt(lib.cssComputado(document.querySelector('.bocadillo'), 'left'));
Array.prototype.forEach.call(document.querySelectorAll('.contenedorRango'), function(rango, i) {
Range.min.push(parseInt(rango.querySelector('.inputTextValue').getAttribute('data-min'), 10));
Range.max.push(parseInt(rango.querySelector('.inputTextValue').getAttribute('data-max'), 10));
Range.step.push(parseInt(rango.querySelector('.inputTextValue').getAttribute('data-step'), 10));
Range.inicia.push(parseInt(rango.querySelector('.inputTextValue').getAttribute('data-inicia'), 10));
Range.nuevoMin.push((Range.min[i] == 0) ? 1 : Range.min[i]);
var dividirCar = parseInt((Range.trackW - Range.barW) / (Range.max[i] - Range.nuevoMin[i]), 10);
var anchoCar = (dividirCar * (Range.max[i] - Range.nuevoMin[i]));
Range.dividirCarril.push(parseInt(anchoCar / (Range.max[i] - Range.nuevoMin[i]), 10));
Range.valorBocata.push(Range.inicia[i]-1);
Range.anchoCarril.push(anchoCar);
rango.querySelector('.minimo').textContent = Range.min[i];
rango.querySelector('.maximo').textContent = Range.max[i];
if (Range.reglaVisible) {
var ULregla = document.createElement('UL');
ULregla.setAttribute('class', 'regla');
rango.querySelector('.rango').appendChild(ULregla);
for (var x = Range.step[i], regla = (Range.max[i] - Range.nuevoMin[i]), n = 0; x <= regla; x+=Range.step[i]) {
LIregla = document.createElement('LI');
LIregla.setAttribute('class', 'num');
ULregla.appendChild(LIregla);
rango.querySelectorAll('.num')[n++].style.width = ((Range.dividirCarril[i] * Range.step[i]) - 2) + 'px';
}
rango.querySelector('.regla').style.width = Range.anchoCarril[i] + 'px';
rango.querySelector('.regla').style.paddingLeft = Range.barW + 'px';
}
rango.querySelector('.carril').style.width = (Range.anchoCarril[i] + Range.barW) + 'px';
rango.querySelector('.valorRango').style.width = (Range.anchoCarril[i] + 10) + 'px';
rango.querySelector('.valorRango').style.left = (Range.barW - 10) + 'px';
rango.querySelector('.barra').style.left = (Range.inicia[i] <= 1) ? Range.inicia[i] + 'px' : (Range.dividirCarril[i] * (Range.valorBocata[i] * Range.step[i])) + 'px';
rango.querySelector('.bocadillo').style.left = (Range.inicia[i] <= 1) ? (Range.inicia[i] + Range.posInicialBocadillo) + 'px' : ((Range.dividirCarril[i] * (Range.valorBocata[i] * Range.step[i])) + Range.posInicialBocadillo) + 'px';
rango.querySelector('.bocadillo').textContent = (Range.inicia[i] <= 1) ? Range.nuevoMin[i] : (((Range.inicia[i] * Range.step[i]) + Range.nuevoMin[i]) - Range.step[i]);
rango.querySelector('.progreso').style.width = (Range.inicia[i] <= 1) ? Range.inicia[i] + 'px' : ((Range.dividirCarril[i] * (Range.valorBocata[i] * Range.step[i])) + (Range.posInicialBocadillo / 2)) + 'px';
Range.valorBocata[i] = rango.querySelector('.bocadillo').textContent;
rango.querySelector('.inputTextValue').value = Range.valorBocata[i];
lib.Evento(rango.querySelector('.barra'), 'mousedown', function(event) {Range.scrollRango(event, this, rango, i)});
});
},
continua en el siguiente post |