GitHub-Proxy/ESP3D
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/luc-github/ESP3D.git synced 2025-08-14 18:05:58 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

add custom slider using javascript

Browse Source
This commit is contained in:
luc lebosse 2016-07-21 16:13:50 +02:00
parent 445d7b7a5e
commit 79300f40ab
1 changed files with 101 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
UI/mousediv.html Normal file
View File

@ -0,0 +1,101 @@
<html>
<head>
</head>
<body>
<style>
.sliderthumb{
position : absolute;
cursor : pointer;
}
</style>
<script>
var offset = 0;
var isDown = false;
var active_control = null;
document.addEventListener('mouseup', function() {
isDown = false;
}, true);
function movethumb(pos)
{
var p = pos + offset;
var rangewidth=0;
var minpos =0;
var maxpos = 0;
if (active_control.hasAttribute('customrange')){
var r = document.getElementById(active_control.getAttribute('customrange')).getBoundingClientRect();
rangewidth = r.right - r.left;
minpos = r.left;
maxpos = r.right;
}
var r2 = active_control.getBoundingClientRect();
if ( p >maxpos - (r2.right-r2.left)) p = maxpos - (r2.right-r2.left);
if ( p <minpos) p =minpos ;
active_control.style.left = p+ 'px';
if (active_control.hasAttribute('render')){
document.getElementById(active_control.getAttribute('render')).value =Math.round(p-minpos) ;
}
}
document.addEventListener('mousemove', function(event) {
event.preventDefault();
if (isDown) {
movethumb(event.clientX);
}
}, true);
function rangeclicked(event,element)
{
if (element.hasAttribute('customthumb')){
active_control = document.getElementById(element.getAttribute('customthumb'));
offset = 0;
movethumb(event.clientX);
}
}
function initthumb( element)
{
element.addEventListener('mousedown', function(e) {
isDown = true;
offset = element.offsetLeft - e.clientX;
active_control = this;
}, true);
if (element.hasAttribute('bgimage')){
element.innerHTML = element.getAttribute('bgimage');
}
if (element.hasAttribute('customrange')){
var r = document.getElementById(element.getAttribute('customrange')).getBoundingClientRect();
element.style.top = r.top;
element.style.left = r.left;
}
}
function initrange( element)
{
if (element.hasAttribute('bgimage')){
element.innerHTML = element.getAttribute('bgimage');
}
}
</script>
<table border=1>
<tr>
<td><div id='range1' onclick ="rangeclicked(event,this);"bgimage="<svg width='310' height='10' viewbox='0 0 310 10'><rect width='310' height='10' style='fill:rgb(255,0,255);stroke-width:3;stroke:rgb(0,0,0)' />" customthumb='thumb1'></div>
<div id='thumb1' class='sliderthumb' render='v1' bgimage="<svg width='10' height='10' viewbox='0 0 10 10'><circle cx='5' cy='5' r='5'/></svg>" customrange='range1'></div>
</td><td><input id='v1' type='number' value='0'/></td></tr>
<tr>
<td><div id='range2' onclick ="rangeclicked(event,this);" bgimage="<svg width='310' height='10' viewbox='0 0 310 10'><rect width='310' height='10' style='fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)' />" customthumb='thumb2'></div>
<div id='thumb2' class='sliderthumb' render='v2' bgimage="<svg width='10' height='10' viewbox='0 0 10 10'><circle cx='5' cy='5' r='5'/></svg>" customrange='range2'></div>
</td><td><input id='v2' type='number' value='0'/></td></tr>
</table>
<script>
initrange( range1);
initrange( range2);
initthumb( thumb1);
initthumb( thumb2);
</script>
</body>
</html>