/* * 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">'+ ''+ ''+ ''); $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);