92 lines
3 KiB
JavaScript
92 lines
3 KiB
JavaScript
|
/*
|
||
|
|
* jQuery UI Slider Access
|
||
|
|
* By: Trent Richardson [http://trentrichardson.com]
|
||
|
|
* Version 0.3
|
||
|
|
* Last Modified: 10/20/2012
|
||
|
|
*
|
||
|
|
* Copyright 2011 Trent Richardson
|
||
|
|
* Dual licensed under the MIT and GPL licenses.
|
||
|
|
* http://trentrichardson.com/Impromptu/GPL-LICENSE.txt
|
||
|
|
* http://trentrichardson.com/Impromptu/MIT-LICENSE.txt
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
(function($){
|
||
|
|
|
||
|
|
$.fn.extend({
|
||
|
|
sliderAccess: function(options){
|
||
|
|
options = options || {};
|
||
|
|
options.touchonly = options.touchonly !== undefined? options.touchonly : true; // by default only show it if touch device
|
||
|
|
|
||
|
|
if(options.touchonly === true && !("ontouchend" in document)){
|
||
|
|
return $(this);
|
||
|
|
}
|
||
|
|
|
||
|
|
return $(this).each(function(i,obj){
|
||
|
|
var $t = $(this),
|
||
|
|
o = $.extend({},{
|
||
|
|
where: 'after',
|
||
|
|
step: $t.slider('option','step'),
|
||
|
|
upIcon: 'ui-icon-plus',
|
||
|
|
downIcon: 'ui-icon-minus',
|
||
|
|
text: false,
|
||
|
|
upText: '+',
|
||
|
|
downText: '-',
|
||
|
|
buttonset: true,
|
||
|
|
buttonsetTag: 'span',
|
||
|
|
isRTL: false
|
||
|
|
}, options),
|
||
|
|
$buttons = $('<'+ o.buttonsetTag +' class="ui-slider-access">'+
|
||
|
|
'<button data-icon="'+ o.downIcon +'" data-step="'+ (o.isRTL? o.step : o.step*-1) +'">'+ o.downText +'</button>'+
|
||
|
|
'<button data-icon="'+ o.upIcon +'" data-step="'+ (o.isRTL? o.step*-1 : o.step) +'">'+ o.upText +'</button>'+
|
||
|
|
'</'+ o.buttonsetTag +'>');
|
||
|
|
|
||
|
|
$buttons.children('button').each(function(j, jobj){
|
||
|
|
var $jt = $(this);
|
||
|
|
$jt.button({
|
||
|
|
text: o.text,
|
||
|
|
icons: { primary: $jt.data('icon') }
|
||
|
|
})
|
||
|
|
.on('click', function(e){
|
||
|
|
var step = $jt.data('step'),
|
||
|
|
curr = $t.slider('value'),
|
||
|
|
newval = curr += step*1,
|
||
|
|
minval = $t.slider('option','min'),
|
||
|
|
maxval = $t.slider('option','max'),
|
||
|
|
slidee = $t.slider("option", "slide") || function(){},
|
||
|
|
stope = $t.slider("option", "stop") || function(){};
|
||
|
|
|
||
|
|
e.preventDefault();
|
||
|
|
|
||
|
|
if(newval < minval || newval > maxval){
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
$t.slider('value', newval);
|
||
|
|
|
||
|
|
slidee.call($t, null, { value: newval });
|
||
|
|
stope.call($t, null, { value: newval });
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// before or after
|
||
|
|
$t[o.where]($buttons);
|
||
|
|
|
||
|
|
if(o.buttonset){
|
||
|
|
$buttons.removeClass('ui-corner-right').removeClass('ui-corner-left').buttonset();
|
||
|
|
$buttons.eq(0).addClass('ui-corner-left');
|
||
|
|
$buttons.eq(1).addClass('ui-corner-right');
|
||
|
|
}
|
||
|
|
|
||
|
|
// adjust the width so we don't break the original layout
|
||
|
|
var bOuterWidth = $buttons.css({
|
||
|
|
marginLeft: ((o.where === 'after' && !o.isRTL) || (o.where === 'before' && o.isRTL)? 10:0),
|
||
|
|
marginRight: ((o.where === 'before' && !o.isRTL) || (o.where === 'after' && o.isRTL)? 10:0)
|
||
|
|
}).outerWidth(true) + 5;
|
||
|
|
var tOuterWidth = $t.outerWidth(true);
|
||
|
|
$t.css('display','inline-block').width(tOuterWidth-bOuterWidth);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
})(jQuery);
|