You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
85 lines
2.7 KiB
85 lines
2.7 KiB
/*
|
|
* jQuery UI Slider Access
|
|
* By: Trent Richardson [http://trentrichardson.com]
|
|
* Version 0.2
|
|
* Last Modified: 12/02/2011
|
|
*
|
|
* 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'
|
|
}, options),
|
|
$buttons = $('<'+ o.buttonsetTag +' class="ui-slider-access">'+
|
|
'<button data-icon="'+ o.downIcon +'" data-step="-'+ o.step +'">'+ o.downText +'</button>'+
|
|
'<button data-icon="'+ o.upIcon +'" data-step="'+ 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') }
|
|
})
|
|
.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');
|
|
|
|
e.preventDefault();
|
|
|
|
if(newval < minval || newval > maxval)
|
|
return;
|
|
|
|
$t.slider('value', newval);
|
|
|
|
$t.slider("option", "slide").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'? 10:0),
|
|
marginRight: (o.where == 'before'? 10:0)
|
|
}).outerWidth(true) + 5;
|
|
var tOuterWidth = $t.outerWidth(true);
|
|
$t.css('display','inline-block').width(tOuterWidth-bOuterWidth);
|
|
});
|
|
}
|
|
});
|
|
|
|
})(jQuery);
|