diff --git a/css/jQuery.mobile.forms.slider.css b/css/jQuery.mobile.forms.slider.css new file mode 100644 index 00000000..a00da40b --- /dev/null +++ b/css/jQuery.mobile.forms.slider.css @@ -0,0 +1,8 @@ +/* +* jQuery Mobile Framework +* Copyright (c) jQuery Project +* Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses. +*/ +input.ui-slider-input { display: inline-block; width: 50px; } +.ui-slider { position: relative; display: inline-block; overflow: visible; height: 15px; padding: 0; margin: 0 2% 0 20px; top: 4px; width: 45%; } +.ui-slider-handle { position: absolute; top: 50%; width: 22px; height: 22px; margin-top: -11px; margin-left: -11px; } \ No newline at end of file diff --git a/css/manifest.php b/css/manifest.php index 8a1e226a..2fae7f30 100644 --- a/css/manifest.php +++ b/css/manifest.php @@ -14,7 +14,8 @@ $elements = array( 'jQuery.mobile.forms.fieldcontain.css', 'jQuery.mobile.forms.select.css', 'jQuery.mobile.forms.textinput.css', - 'jQuery.mobile.listview.css' + 'jQuery.mobile.listview.css', + 'jQuery.mobile.forms.slider.css' ); ?> diff --git a/js/jQuery.mobile.forms.slider.js b/js/jQuery.mobile.forms.slider.js new file mode 100644 index 00000000..6939337b --- /dev/null +++ b/js/jQuery.mobile.forms.slider.js @@ -0,0 +1,70 @@ +/* +* jQuery Mobile Framework : "slider" plugin (based on code from Filament Group,Inc) +* Copyright (c) jQuery Project +* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses. +* Note: Code is in draft form and is subject to change +*/ +(function($){ +$.fn.slider = function(options){ + return $(this).each(function(){ + var input = $(this), + slider = $('
'), + handle = $('').appendTo(slider).buttonMarkup({corners: true}), + dragging = false, + supportTouch = $.support.touch, + touchStartEvent = supportTouch ? "touchstart" : "mousedown", + touchStopEvent = supportTouch ? "touchend" : "mouseup", + touchMoveEvent = supportTouch ? "touchmove" : "mousemove", + val = input.val(), + min = input.attr('min'), + max = input.attr('max'), + percent = val / (max - min) * 100; + + function slideUpdate(event, val){ + if(!val){ + var data = event.originalEvent.touches ? event.originalEvent.touches[ 0 ] : event, + tol = 4; //a slight tolerance helped get to the ends of the slider + if( !dragging + || data.pageX < slider.offset().left - tol + || data.pageX > slider.offset().left + slider.width() + tol ){ + return; + } + percent = Math.round(((data.pageX - slider.offset().left) / slider.width() ) * 100); + if( percent < 0 ){ percent = 0; } + if( percent > 100 ){ percent = 100; } + } + else{ + percent = parseFloat(val) / (max - min) * 100; + } + var newval = Math.round( (percent/100) * max ); + if( newval < min ){ newval = min; } + handle.css('left', percent + '%'); + input.val(newval); + } + + input + .addClass('ui-slider-input') + .keyup(function(e){ + slideUpdate(e, $(this).val() ); + }); + + slider + .css('left', percent + '%') + .bind(touchStartEvent, function(){ + dragging = true; + slideUpdate(event); + return false; + }) + .bind(touchMoveEvent, function(event){ + slideUpdate(event); + return false; + }) + .bind(touchStopEvent, function(){ + dragging = false; + return false; + }) + .insertAfter(input); + }); +}; +})(jQuery); + diff --git a/js/manifest.php b/js/manifest.php index ab155bf1..ee5dfb6b 100644 --- a/js/manifest.php +++ b/js/manifest.php @@ -13,6 +13,7 @@ $elements = array( 'jQuery.mobile.forms.ajaxform.js', 'jQuery.mobile.buttonMarkup.js', 'jQuery.mobile.forms.button.js', + 'jQuery.mobile.forms.slider.js', 'jQuery.mobile.collapsible.js', 'jQuery.mobile.controlGroup.js', 'jQuery.mobile.fieldContain.js',