215 lines
11 KiB
JavaScript
215 lines
11 KiB
JavaScript
(function($) {
|
|
$.fn.extend({
|
|
strackbar: function(options) {
|
|
var settings = $.extend({
|
|
style: 'style1',
|
|
defaultValue: 0,
|
|
sliderHeight: 4,
|
|
sliderWidth: 200,
|
|
trackerHeight: 20,
|
|
trackerWidth: 19,
|
|
minValue: 0,
|
|
maxValue: 10,
|
|
borderWidth: 1,
|
|
animate: true,
|
|
ticks: true,
|
|
labels: true,
|
|
callback: null
|
|
}, options);
|
|
return this.each(function() {
|
|
var mousecaptured = false;
|
|
var mouseDown = false;
|
|
var previousMousePosition = 0;
|
|
var stepValue = parseFloat(settings.sliderWidth / settings.maxValue);
|
|
var currentValue = settings.minValue;
|
|
var sliderLeft = 0;
|
|
var sliderRight = 0;
|
|
var ltop = 0;
|
|
var element = $(this);
|
|
var minvallabel = $('<div></div>').attr('id', 'min-val').css('float', 'left');
|
|
var maxvallabel = $('<div></div>').attr('id', 'max-val').css('float', 'left');
|
|
var wrapper = $('<div></div>').css('float', 'left');
|
|
var contents = $('<div></div>').attr('id', 'jscroll').addClass('jscroller');
|
|
var slider = $('<div></div>').attr('id', 'slider').addClass('slider');
|
|
var selection = $('<div></div>').attr('id', 'inner').html(' ').addClass('inner');
|
|
var ltracker = $('<div></div>').attr('id', 'lgripper').addClass('lgripper');
|
|
if (settings.labels)
|
|
element.append(minvallabel);
|
|
element.append(wrapper);
|
|
wrapper.append(contents);
|
|
contents.append(slider);
|
|
slider.append(selection);
|
|
contents.append(ltracker);
|
|
if (settings.labels)
|
|
element.append(maxvallabel);
|
|
|
|
ltracker.css('height', settings.trackerHeight + 'px').css('width', settings.trackerWidth + 'px').css('left', '0');
|
|
slider.css('width', settings.sliderWidth - (settings.borderWidth * 2)).css('height', settings.sliderHeight);
|
|
slider.css('-moz-border-radius', (settings.sliderHeight) + 'px');
|
|
slider.css('-webkit-border-radius', (settings.sliderHeight) + 'px');
|
|
slider.css('border-radius', (settings.sliderHeight) + 'px');
|
|
slider.css('top', '40%');
|
|
selection.css('-moz-border-radius', (settings.sliderHeight) + 'px');
|
|
selection.css('-webkit-border-radius', (settings.sliderHeight) + 'px');
|
|
selection.css('border-radius', (settings.sliderHeight) + 'px');
|
|
slider.addClass(settings.style);
|
|
selection.addClass(settings.style);
|
|
ltracker.addClass(settings.style);
|
|
contents.addClass(settings.style);
|
|
|
|
//element.css('padding-top', settings.trackerHeight / 2);
|
|
var clear = $('<div></div>');
|
|
clear.css('clear', 'both');
|
|
element.append(clear);
|
|
wrapper.css('width', settings.sliderWidth + 'px');
|
|
//maxvallabel.html(settings.maxValue).css('margin-top', -(settings.trackerHeight / 4) + 'px').css('padding-left', '6px');
|
|
//minvallabel.html(settings.minValue).css('margin-top', -(settings.trackerHeight / 4) + 'px').css('padding-right', '4px');
|
|
maxvallabel.html(settings.maxValue).css('padding-left', '6px'); //.css('margin-top', '-2px');
|
|
minvallabel.html(settings.minValue).css('padding-right', '4px'); //.css('margin-top', '-2px');
|
|
var sliderBottom = settings.sliderHeight;
|
|
sliderLeft = slider.offset().left;
|
|
sliderRight = sliderLeft + settings.sliderWidth;
|
|
ltop = (settings.trackerHeight / 2) - settings.sliderHeight / 2;
|
|
previousMousePosition = sliderLeft;
|
|
|
|
/*generates tick marks */
|
|
var ticks = $("<ul></ul>");
|
|
ticks.css('position', 'absolute');
|
|
var height = slider.get(0).offsetHeight - 4;
|
|
//var height = settings.sliderHeight;
|
|
var sliderBorder = slider.get(0).offsetHeight - settings.sliderHeight;
|
|
ltop -= sliderBorder / 2;
|
|
ticks.css('top', height + 'px')
|
|
ticks.attr('id', 'ticks');
|
|
ticks.addClass('ticks');
|
|
ticks.css('width', settings.sliderWidth + 'px');
|
|
ticks.css('margin-left', stepValue / 2 + 'px');
|
|
ticks.css('margin-top', '0px');
|
|
var totalTicks = settings.sliderWidth / stepValue;
|
|
|
|
for (var count = 0; count < totalTicks; count++) {
|
|
var tick = $('<li><span>|</span></li>');
|
|
tick.css('width', stepValue + 'px');
|
|
ticks.append(tick);
|
|
}
|
|
if (settings.ticks)
|
|
slider.after(ticks);
|
|
ltracker.css('top', -ltop + 'px');
|
|
//set the default position
|
|
if (settings.defaultValue != 0) {
|
|
setPosition(settings.defaultValue * stepValue);
|
|
previousMousePosition = sliderLeft + settings.defaultValue * stepValue;
|
|
if (settings.callback != null)
|
|
settings.callback(settings.defaultValue);
|
|
}
|
|
ltracker.mousedown(function(e) {
|
|
mousecaptured = true;
|
|
previousMousePosition = e.pageX;
|
|
$(this).css('cursor', 'pointer');
|
|
});
|
|
|
|
ltracker.mouseup(function(e) {
|
|
mousecaptured = false;
|
|
$(this).css('cursor', 'default');
|
|
});
|
|
|
|
$(document).mouseup(function() {
|
|
mousecaptured = false;
|
|
$(this).css('cursor', 'default');
|
|
});
|
|
$(document).mousemove(function(e) {
|
|
if (mousecaptured) {
|
|
setTrackerPosition(e.pageX);
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
e.stopImmediatePropagation();
|
|
}
|
|
});
|
|
slider.mouseenter(function(e) { $(this).css('cursor', 'pointer'); });
|
|
slider.mouseout(function(e) { $(this).css('cursor', 'default'); });
|
|
slider.mousedown(function(e) {
|
|
if (!mouseDown) {
|
|
mouseDown = true;
|
|
$(this).css('cursor', 'pointer');
|
|
mousecaptured = false;
|
|
setTrackerPosition(e.pageX);
|
|
}
|
|
});
|
|
|
|
function getpositionvalue(pos) {
|
|
var val = parseInt(pos.replace('px', ''));
|
|
return val;
|
|
}
|
|
function getDragAmount(cursorCurrentPosition, cursorPreviousPosition) {
|
|
var dragAmount = cursorCurrentPosition - cursorPreviousPosition;
|
|
if (cursorPreviousPosition <= 0) {
|
|
dragAmount = cursorCurrentPosition - sliderLeft;
|
|
previousMousePosition = sliderLeft + dragAmount;
|
|
}
|
|
if (cursorPreviousPosition > cursorCurrentPosition)
|
|
dragAmount = cursorPreviousPosition - cursorCurrentPosition;
|
|
|
|
return dragAmount;
|
|
}
|
|
function isForwardDirection(cursorCurrentPosition, cursorPreviousPosition) {
|
|
if (cursorCurrentPosition > cursorPreviousPosition)
|
|
return true;
|
|
else
|
|
return false;
|
|
}
|
|
function validatePosition(position) {
|
|
if (position >= 0 && position <= settings.sliderWidth)
|
|
return true;
|
|
else
|
|
return false;
|
|
}
|
|
function setPosition(position) {
|
|
|
|
if (validatePosition(position)) {
|
|
var selectionWidth = getpositionvalue(ltracker.css('left')) + settings.trackerWidth / 2;
|
|
if (settings.animate && !mousecaptured) {
|
|
ltracker.animate({ 'left': position + 'px' }, 500, function() {
|
|
selectionWidth = getpositionvalue(ltracker.css('left')) + settings.trackerWidth / 2;
|
|
selection.css('width', selectionWidth + 'px');
|
|
mouseDown = false;
|
|
});
|
|
/*settings.animate = false;*/
|
|
}
|
|
else {
|
|
ltracker.css('left', position + 'px');
|
|
selectionWidth = getpositionvalue(ltracker.css('left')) + settings.trackerWidth / 2;
|
|
selection.css('width', selectionWidth + 'px');
|
|
mouseDown = false;
|
|
}
|
|
}
|
|
|
|
}
|
|
function setTrackerPosition(cursorPosition) {
|
|
var dragAmount = getDragAmount(cursorPosition, previousMousePosition);
|
|
var isForward = isForwardDirection(cursorPosition, previousMousePosition);
|
|
|
|
var trackerPosition = getpositionvalue(ltracker.css('left'));
|
|
if (cursorPosition >= sliderLeft && cursorPosition <= (sliderRight - stepValue / 10)) {
|
|
if (trackerPosition >= 0 && trackerPosition <= settings.sliderWidth - stepValue / 10) {
|
|
if (isForward)
|
|
trackerPosition += dragAmount;
|
|
else
|
|
trackerPosition -= dragAmount;
|
|
setPosition(trackerPosition);
|
|
|
|
var newPosition = cursorPosition - sliderLeft;
|
|
var cVal = newPosition / stepValue;
|
|
currentValue = parseInt(cVal);
|
|
if (trackerPosition > (settings.sliderWidth - stepValue) + stepValue / 10) {
|
|
currentValue = parseInt(settings.sliderWidth / stepValue);
|
|
}
|
|
if (settings.callback != null)
|
|
settings.callback(currentValue);
|
|
}
|
|
previousMousePosition = cursorPosition;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
})(jQuery); |