jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

init

Browse source
This commit is contained in:
Ilya Kantor 2014-10-26 22:10:13 +03:00
parent 06f61d8ce8
commit f301cb744d
2271 changed files with 103162 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

1
02-ui/05-widgets/02-widgets-structure/02-slider-widget/solution/slider-component/.plnkr Executable file
View file

@ -0,0 +1 @@
{"name":"slider-component","plunk":"yOsWKXyShloaVwdeA5Of"}

107
02-ui/05-widgets/02-widgets-structure/02-slider-widget/solution/slider-component/index.html Executable file
View file

@ -0,0 +1,107 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery.min.js"></script>
<style>
.slider {
margin: 5px;
width: 310px;
height: 15px;
border-radius: 5px;
background: #E0E0E0;
background: -moz-linear-gradient(left top, #E0E0E0, #EEEEEE) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, right bottom, from(#E0E0E0), to(#EEEEEE));
background: linear-gradient(left top, #E0E0E0, #EEEEEE);
}
.thumb {
position: relative;
top: -5px;
left: 10px;
width: 10px;
height: 25px;
border-radius: 3px;
background: blue;
cursor: pointer;
}
</style>
</head>
<body>
<div id="slider" class="slider">
<div class="thumb"></div>
</div>
<script>
var slider = new Slider({
elem: $('#slider')
});
function Slider(options) {
var elem = options.elem;
var thumbElem = elem.find('.thumb');
var sliderCoords, thumbCoords, shiftX, shiftY;
elem.on('dragstart', false)
.on('mousedown', '.thumb', onThumbMouseDown);
// ---------------
function onDocumentMouseMove(e) {
moveTo(e.pageX);
}
function onThumbMouseDown(e) {
startDrag(e.pageX, e.pageY);
return false; // disable selection start (cursor change)
}
function onDocumentMouseUp() {
endDrag();
}
// -------------------
function moveTo(pageX) {
// вычесть координату родителя, т.к. position: relative
var newLeft = pageX - shiftX - sliderCoords.left;
// курсор ушёл вне слайдера
if(newLeft < 0) {
newLeft = 0;
}
var rightEdge = elem.width() - thumbElem.width();
if(newLeft > rightEdge) {
newLeft = rightEdge;
}
thumbElem.css('left', newLeft);
}
function startDrag(startPageX, startPageY) {
thumbCoords = thumbElem.offset();
shiftX = startPageX - thumbCoords.left;
shiftY = startPageY - thumbCoords.top;
sliderCoords = elem.offset();
$(document).on({
'mousemove.slider': onDocumentMouseMove,
'mouseup.slider': onDocumentMouseUp
});
}
function endDrag() {
$(document).off('.slider');
}
}
</script>
</body>
</html>