Hola de nuevo :
Me quedé pensando en eso de "generar" una barra solamente con el navegador.
Tomando el formato originalmente posteado por
radge quise hacer algo en HTML y CSS, aunque obviamente tuve que usar un poco de JS.
Funcionan en
IE y
FF, aunque no se ven exactemente iguales.
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<html>
<head> <title> BOTÓN DESLIZANTE.</title>
<script type="text/javascript">
//BARRA 1
var delta=0;
var eco,Gi,Gt;
function sinSeleccion(){
document.getElementById("Grad").onselectstart=new Function ("return false");
}
function Arrastra(N){
clearTimeout(eco);
Gt="G"+N;
if(delta==1){
for(i=1;i<11;i++){
Gi="G"+i;
document.getElementById(Gi).innerHTML="|"};
document.getElementById(Gt).innerHTML="<div class=BtnI></div><div class=Field></div><div class=BtnD></div><br>|";
document.getElementById("Valor").value=N};
}
function Sale(){
eco=setTimeout("delta=0",0.1)
}
function Inicia(N){
delta=1;
Arrastra(N);
}
//FIN BARRA 1
//BARRA 2
function despl(T){
valor=T.scrollLeft;
document.getElementById("muestra").value=Math.floor(valor/30);
}
//FIN BARRA 2
</script>
<style type="text/css">
#grad {border:4px inset; border-color:#cccccc; cursor:default}
#grad td{width:21px; height:30px; text-align:center; vertical-align:bottom; font-weight:900; font-size:12px; border:0}
#grad #G0 , #grad #G11{font-size:0; width:10px!important;}
.BtnI{width:10px; height:20px; border:solid 5px #333333; border-left-color:#cccccc; border-bottom-color:#cccccc; font-size:0; display:inline}
.BtnD{width:10px; height:20px; border:solid 5px #333333; border-right-color:#cccccc; border-bottom-color:#cccccc; font-size:0;; display:inline}
.Field{width:1px; height:20px; font-size:0;; display:inline}
#grad #Pista{border-width:4px 10px 0; border-style:solid; background-color:#333333; height:8px}
#Valor , #muestra{font-size:22px; text-align:center}
</style>
</head>
<body onload=sinSeleccion()>
<h2>Botón deslizante sin imagen.</h2>
<center>
<table unselectable="on" id=Grad bgcolor=#cccccc cellpadding=0 cellspacing=0 onmouseout="Sale()" onmouseup="delta=0">
<tr><td colspan=12 id=Pista></td></tr>
<tr>
<td onmouseover="Arrastra(1)" onmousedown="Inicia(1);" id=G0></td>
<td onmouseover="Arrastra(1)" onmousedown="Inicia(1);" id=G1><div class=BtnI></div><div class=Field></div><div class=BtnD></div><br>|</td>
<td onmouseover="Arrastra(2)" onmousedown="Inicia(2);" id=G2>|</td>
<td onmouseover="Arrastra(3)" onmousedown="Inicia(3);" id=G3>|</td>
<td onmouseover="Arrastra(4)" onmousedown="Inicia(4);" id=G4>|</td>
<td onmouseover="Arrastra(5)" onmousedown="Inicia(5);" id=G5>|</td>
<td onmouseover="Arrastra(6)" onmousedown="Inicia(6);" id=G6>|</td>
<td onmouseover="Arrastra(7)" onmousedown="Inicia(7);" id=G7>|</td>
<td onmouseover="Arrastra(8)" onmousedown="Inicia(8);" id=G8>|</td>
<td onmouseover="Arrastra(9)" onmousedown="Inicia(9);" id=G9>|</td>
<td onmouseover="Arrastra(10)" onmousedown="Inicia(10);" id=G10>|</td>
<td onmouseover="Arrastra(10)" onmousedown="Inicia(10);" id=G11></td>
</tr>
</table>
<p>
<input size=2 id=Valor>
</p>
</center>
<hr>
<h2>Botón deslizante con barra de desplazamiento.</h2>
<center>
<div style="overflow:auto; height:50px; width:200px" onscroll="despl(this)">
<div style="width:3200; height:1px; font-size:1px; overflow:hidden; background:transparent"></div>
</div>
<p>
<input id="muestra" size=3>
</center>
</body>
</html>
Lo que tenía en mente era crear una función del tipo
Código:
<script>slideBar("color","tamaño","cantidad_grados","nombre_variable")</script>
para la primera, y que la "dibuje" el navegador; pero quedará para más adelante.
saludos
furoya