custom range picker for graphs browser. (thanks to Michael Hsu).

git-svn-id: http://www.observium.org/svn/observer/trunk@2896 61d68cd4-352d-0410-923a-c4978735b2b8
2024-10-07 16:52:45 +00:00 · 2012-03-16 10:35:12 +00:00
parent e291e8de4d
commit 34c4793265
20 changed files with 2002 additions and 9 deletions
--- a/html/js/jquery-ui-sliderAccess.js
+++ b/html/js/jquery-ui-sliderAccess.js
@ -0,0 +1,85 @@
+/*
+ * 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);