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.
89 lines
3.8 KiB
89 lines
3.8 KiB
/*
|
|
* 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') }
|
|
})
|
|
.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);
|