alpaca
Version:
Alpaca provides the easiest and fastest way to generate interactive forms for the web and mobile devices. It runs simply as HTML5 or more elaborately using Bootstrap, jQuery Mobile or jQuery UI. Alpaca uses Handlebars to process JSON schema and provide
91 lines (79 loc) • 3.08 kB
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') }
})
.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);