221 lines
6.3 KiB
JavaScript
221 lines
6.3 KiB
JavaScript
![]() |
/*!
|
|||
|
* jQuery "stepper" Plugin
|
|||
|
* version 0.0.1
|
|||
|
* @requires jQuery v1.3.2 or later
|
|||
|
* @requires jCanvas
|
|||
|
*
|
|||
|
* Authored 2011-06-11 Scott Lahteine (thinkyhead.com)
|
|||
|
*
|
|||
|
* A very simple numerical stepper.
|
|||
|
* TODO: place arrows based on div size, make 50/50 width
|
|||
|
*
|
|||
|
* Usage example:
|
|||
|
*
|
|||
|
* $('#mydiv').jstepper({
|
|||
|
* min: 1,
|
|||
|
* max: 4,
|
|||
|
* val: 1,
|
|||
|
* arrowWidth: 15,
|
|||
|
* arrowHeight: '22px',
|
|||
|
* color: '#FFF',
|
|||
|
* acolor: '#F70',
|
|||
|
* hcolor: '#FF0',
|
|||
|
* id: 'select-me',
|
|||
|
* stepperClass: 'inner',
|
|||
|
* textStyle: {width:'1.5em',fontSize:'20px',textAlign:'center'},
|
|||
|
* onChange: function(v) { },
|
|||
|
* });
|
|||
|
*
|
|||
|
*/
|
|||
|
;(function($) {
|
|||
|
var un = 'undefined';
|
|||
|
|
|||
|
$.jstepperArrows = [
|
|||
|
{ name:'prev', poly:[[1.0,0],[0,0.5],[1.0,1.0]] },
|
|||
|
{ name:'next', poly:[[0,0],[1.0,0.5],[0,1.0]] }
|
|||
|
];
|
|||
|
|
|||
|
$.fn.jstepper = function(args) {
|
|||
|
|
|||
|
return this.each(function() {
|
|||
|
|
|||
|
var defaults = {
|
|||
|
min: 1,
|
|||
|
max: null,
|
|||
|
val: null,
|
|||
|
active: true,
|
|||
|
placeholder: null,
|
|||
|
arrowWidth: 0,
|
|||
|
arrowHeight: 0,
|
|||
|
color: '#FFF',
|
|||
|
hcolor: '#FF0',
|
|||
|
acolor: '#F80',
|
|||
|
id: '',
|
|||
|
stepperClass: '',
|
|||
|
textStyle: '',
|
|||
|
onChange: (function(v){ if (typeof console.log !== 'undefined') console.log("val="+v); })
|
|||
|
};
|
|||
|
|
|||
|
args = $.extend(defaults, args || {});
|
|||
|
|
|||
|
var min = args.min * 1,
|
|||
|
max = (args.max !== null) ? args.max * 1 : min,
|
|||
|
span = max - min + 1,
|
|||
|
val = (args.val !== null) ? args.val * 1 : min,
|
|||
|
active = !args.disabled,
|
|||
|
placeholder = args.placeholder,
|
|||
|
arrowWidth = 1 * args.arrowWidth.toString().replace(/px/,''),
|
|||
|
arrowHeight = 1 * args.arrowHeight.toString().replace(/px/,''),
|
|||
|
color = args.color,
|
|||
|
hcolor = args.hcolor,
|
|||
|
acolor = args.acolor,
|
|||
|
$prev = $('<a href="#prev" style="cursor:w-resize;"><canvas/></a>'),
|
|||
|
$marq = $('<div class="number"/>').css({float:'left',textAlign:'center'}),
|
|||
|
$next = $('<a href="#next" style="cursor:e-resize;"><canvas/></a>'),
|
|||
|
arrow = [ $prev.find('canvas')[0], $next.find('canvas')[0] ],
|
|||
|
$stepper = $('<span class="jstepper"/>').append($prev).append($marq).append($next).append('<div style="clear:both;"/>'),
|
|||
|
onChange = args.onChange;
|
|||
|
|
|||
|
if (args.id) $stepper[0].id = args.id;
|
|||
|
if (args.stepperClass) $stepper.addClass(args.stepperClass);
|
|||
|
if (args.textStyle) $marq.css(args.textStyle);
|
|||
|
|
|||
|
// replace a span, but embed elsewhere
|
|||
|
if (this.tagName == 'SPAN') {
|
|||
|
var previd = this.id;
|
|||
|
$(this).replaceWith($stepper);
|
|||
|
if (previd) $stepper.attr('id',previd);
|
|||
|
}
|
|||
|
else {
|
|||
|
$(this).append($stepper);
|
|||
|
}
|
|||
|
|
|||
|
// hook to call functions on this object
|
|||
|
$stepper[0].ui = {
|
|||
|
|
|||
|
refresh: function() {
|
|||
|
this.updateNumber();
|
|||
|
this._drawArrow(0, 1);
|
|||
|
this._drawArrow(1, 1);
|
|||
|
return this;
|
|||
|
},
|
|||
|
|
|||
|
_drawArrow: function(i,state) {
|
|||
|
var $elm = $(arrow[i]),
|
|||
|
desc = $.jstepperArrows[i],
|
|||
|
fillStyle = (state == 2) ? hcolor : (state == 3) ? acolor : color,
|
|||
|
draw = { fillStyle: fillStyle },
|
|||
|
w = $elm.width(), h = $elm.height();
|
|||
|
|
|||
|
if (w <= 0) w = $elm.attr('width');
|
|||
|
if (h <= 0) h = $elm.attr('height');
|
|||
|
|
|||
|
$.each(desc.poly,function(i,v){
|
|||
|
++i;
|
|||
|
draw['x'+i] = v[0] * w;
|
|||
|
draw['y'+i] = v[1] * h;
|
|||
|
});
|
|||
|
$elm.restoreCanvas().clearCanvas().drawLine(draw);
|
|||
|
},
|
|||
|
|
|||
|
updateNumber: function() {
|
|||
|
$marq.html((active || placeholder === null) ? val.toString() : placeholder);
|
|||
|
return this;
|
|||
|
},
|
|||
|
|
|||
|
_doclick: function(i) {
|
|||
|
this.add(i ? 1 : -1);
|
|||
|
this._drawArrow(i, 3);
|
|||
|
var self = this;
|
|||
|
setTimeout(function(){ self._drawArrow(i, 2); }, 50);
|
|||
|
},
|
|||
|
|
|||
|
add: function(x) {
|
|||
|
val = (((val - min) + x + span) % span) + min;
|
|||
|
this.updateNumber();
|
|||
|
this.didChange(val);
|
|||
|
return this;
|
|||
|
},
|
|||
|
|
|||
|
min: function(v) {
|
|||
|
if (typeof v === un) return min;
|
|||
|
this.setRange(v,max);
|
|||
|
return this;
|
|||
|
},
|
|||
|
|
|||
|
max: function(v) {
|
|||
|
if (typeof v === un) return max;
|
|||
|
this.setRange(min,v);
|
|||
|
return this;
|
|||
|
},
|
|||
|
|
|||
|
val: function(v) {
|
|||
|
if (typeof v === un) return val;
|
|||
|
val = (((v - min) + span) % span) + min;
|
|||
|
this.updateNumber();
|
|||
|
return this;
|
|||
|
},
|
|||
|
|
|||
|
setRange: function(lo, hi, ini) {
|
|||
|
if (lo > hi) hi = (lo += hi -= lo) - hi;
|
|||
|
min = lo; max = hi; span = hi - lo + 1;
|
|||
|
if (typeof ini !== un) val = ini;
|
|||
|
if (val < min) val = min;
|
|||
|
if (val > max) val = max;
|
|||
|
this.updateNumber();
|
|||
|
return this;
|
|||
|
},
|
|||
|
|
|||
|
active: function(a) {
|
|||
|
if (typeof a === un) return active;
|
|||
|
(active = a) ? $marq.removeClass('inactive') : $marq.addClass('inactive');
|
|||
|
this.updateNumber();
|
|||
|
return this;
|
|||
|
},
|
|||
|
|
|||
|
disable: function() { this.active(false); return this; },
|
|||
|
enable: function() { this.active(true); return this; },
|
|||
|
|
|||
|
clearPlaceholder: function() {
|
|||
|
this.setPlaceholder(null);
|
|||
|
return this;
|
|||
|
},
|
|||
|
setPlaceholder: function(p) {
|
|||
|
placeholder = p;
|
|||
|
if (!active) this.updateNumber();
|
|||
|
return this;
|
|||
|
},
|
|||
|
|
|||
|
didChange: onChange
|
|||
|
|
|||
|
};
|
|||
|
|
|||
|
// set hover and click for each arrow
|
|||
|
$.each($.jstepperArrows, function(i,desc) {
|
|||
|
var $elm = $(arrow[i]),
|
|||
|
w = arrowWidth ? arrowWidth : $elm.width() ? $elm.width() : 15,
|
|||
|
h = arrowHeight ? arrowHeight : $elm.height() ? $elm.height() : 24;
|
|||
|
$elm[0]._index = i;
|
|||
|
$elm
|
|||
|
.css({float:'left'})
|
|||
|
.attr({width:w,height:h,'class':desc.name})
|
|||
|
.hover(
|
|||
|
function(e) { $stepper[0].ui._drawArrow(e.target._index, 2); },
|
|||
|
function(e) { $stepper[0].ui._drawArrow(e.target._index, 1); }
|
|||
|
)
|
|||
|
.click(function(e){
|
|||
|
$stepper[0].ui._doclick(e.target._index);
|
|||
|
return false;
|
|||
|
});
|
|||
|
});
|
|||
|
|
|||
|
// init the visuals first time
|
|||
|
$stepper[0].ui.refresh();
|
|||
|
|
|||
|
}); // this.each
|
|||
|
|
|||
|
}; // $.fn.jstepper
|
|||
|
|
|||
|
})( jQuery );
|
|||
|
|