Permalink
Browse files

Added changes from #2381 to work with multiple handles

  • Loading branch information...
1 parent 8131084 commit b4950dc40c45ec466eb0cfced40637233d933e8e @hpbuniat committed Sep 12, 2011
View
4 docs/forms/forms-slider.html
@@ -47,15 +47,15 @@
<p>The slider with a min of 500, max of 5,000 and initial value of 2,500</p>
<div data-role="fieldcontain">
<label for="slider-2">Input slider:</label>
- <input type="range" name="slider-2" id="slider-2" value="2500" min="500" max="5000" />
+ <input type="range" name="slider-2" id="slider-2" value="2500" min="500" max="5000" data-range-theme="b" />
</div>
<p>Sliders also respond to the keyboards shortcuts. To increase the current value the Right Arrow, Up Arrow, and Page Up keys can be used. To decrease the current value the Left Arrow, Down Arrow, and Page Down keys can be used. To move the slider to its minimum or maximum value use the Home and End keys respectively.</p>
<p>An example of a range-slider</p>
<div data-role="fieldcontain">
<label for="slider-3">Input slider:</label>
- <input type="range" name="slider-3" id="slider-3" value="50" min="0" max="100" data-handle-min="10" data-handle-max="15" />
+ <input type="range" name="slider-3" id="slider-3" value="50" min="0" max="100" data-handle-min="10" data-handle-max="55" data-range-theme="b" />
</div>
<h2>Refreshing a slider</h2>
View
2 docs/forms/sliders/index.html
@@ -54,7 +54,7 @@
<p>The slider with a min of 500, max of 5,000 and initial value of 2,500</p>
<div data-role="fieldcontain">
<label for="slider-2">Input slider:</label>
- <input type="range" name="slider-2" id="slider-2" value="2500" min="500" max="5000" />
+ <input type="range" name="slider-2" id="slider-2" value="2500" min="500" max="5000" data-range-theme="b" />
</div>
<p>Sliders also respond to the keyboards shortcuts. To increase the current value the Right Arrow, Up Arrow, and Page Up keys can be used. To decrease the current value the Left Arrow, Down Arrow, and Page Down keys can be used. To move the slider to its minimum or maximum value use the Home and End keys respectively.</p>
View
54 js/jquery.mobile.forms.slider.js
@@ -11,6 +11,7 @@ $.widget( "mobile.slider", $.mobile.widget, {
options: {
theme: null,
trackTheme: null,
+ rangeTheme: null,
disabled: false,
initSelector: "input[type='range'], :jqmData(type='range'), :jqmData(role='slider')",
handleData: ['handle-min', 'handle-max']
@@ -35,7 +36,7 @@ $.widget( "mobile.slider", $.mobile.widget, {
// TODO: Each of these should have comments explain what they're for
var self = this,
- control = this.element,
+ control = this.element,
o = this.options,
@@ -45,8 +46,12 @@ $.widget( "mobile.slider", $.mobile.widget, {
theme = this.options.theme ? o.theme : parentTheme,
+ // theme of the outer track-bar
trackTheme = o.trackTheme ? o.trackTheme : parentTheme,
+ // theme for the part between start & current slider position
+ rangeTheme = this.options.rangeTheme ? this.options.rangeTheme : trackTheme,
+
cTypeIsSelect = control[ 0 ].nodeName.toLowerCase() === "select",
selectClass = ( cTypeIsSelect ) ? "ui-slider-switch" : "",
@@ -63,10 +68,19 @@ $.widget( "mobile.slider", $.mobile.widget, {
step = window.parseFloat( control.attr( "step" ) || 1 ),
+ // the slider-wrapper
slider = $( "<div class='ui-slider " + selectClass + " ui-btn-down-" + trackTheme +
" ui-btn-corner-all' role='application'></div>" ),
+
+ // handle-container
handles = [],
+
+ // the current handle-values
values = self.values(),
+
+ // the track-background-container
+ rangeBar,
+
options;
control.addClass(values.length > 1 ? 'ui-slider-range' : 'ui-slider-single');
@@ -87,14 +101,6 @@ $.widget( "mobile.slider", $.mobile.widget, {
);
});
- $.extend( this, {
- slider: slider,
- handles: handles,
- dragging: false,
- beforeStart: null,
- userModified: false
- });
-
if ( cTypeIsSelect ) {
slider.wrapInner( "<div class='ui-slider-inneroffset'></div>" );
@@ -115,6 +121,19 @@ $.widget( "mobile.slider", $.mobile.widget, {
});
}
+ else if (trackTheme != rangeTheme) {
+ slider.wrapInner( "<div class='ui-slider-range-background ui-btn-down-" + rangeTheme + " ui-btn-corner-all' role='application'></div>" );
+ rangeBar = slider.find('div.ui-slider-range-background');
+ }
+
+ $.extend( this, {
+ slider: slider,
+ handles: handles,
+ rangeBar: rangeBar,
+ dragging: false,
+ beforeStart: null,
+ userModified: false
+ });
label.addClass( "ui-slider" );
@@ -242,7 +261,13 @@ $.widget( "mobile.slider", $.mobile.widget, {
percent,
cTypeIsSelect = control[ 0 ].nodeName.toLowerCase() === "select",
min = !cTypeIsSelect ? parseFloat( control.attr( "min" ) ) : 0,
- max = !cTypeIsSelect ? parseFloat( control.attr( "max" ) ) : control.find( "option" ).length - 1;
+ max = !cTypeIsSelect ? parseFloat( control.attr( "max" ) ) : control.find( "option" ).length - 1,
+
+ // the handle on which the new-value will be applied
+ actHandle,
+
+ // the left-value of the range-theme
+ rangeLeft = 0;
if ( val instanceof jQuery.Event ) {
var data = val,
@@ -283,7 +308,6 @@ $.widget( "mobile.slider", $.mobile.widget, {
newval = max;
}
- var actHandle;
jQuery.each(this.handles, function(i, handle) {
if (typeof actHandle !== 'object' || Math.abs(actHandle.attr('title') - newval) > Math.abs(handle.attr('title') - newval)) {
actHandle = handle;
@@ -298,6 +322,14 @@ $.widget( "mobile.slider", $.mobile.widget, {
});
}
+ if (this.rangeBar) {
+ rangeLeft = (this.handles.length > 1) ? this.handles[0].attr('title') : 0;
+ this.rangeBar.css({
+ 'margin-left': rangeLeft + "%",
+ 'width': (percent-rangeLeft) + "%"
+ });
+ }
+
// add/remove classes for flip toggle switch
if ( cTypeIsSelect ) {
if ( newval === 0 ) {
View
4 tests/unit/slider/index.html
@@ -50,6 +50,10 @@ <h2 id="qunit-userAgent"></h2>
<div data-nstest-role="fieldcontain">
<input type="range" name="two-handles" id="two-handles" value="10" min="0" max="100" step="10" data-handle-min="25" data-handle-max="55" />
</div>
+
+ <div data-nstest-role="fieldcontain">
+ <input type="range" name="range-background" id="range-background" value="25" min="0" max="100" data-nstest-theme="b" data-nstest-track-theme="a" data-nstest-range-theme="c" />
+ </div>
<div data-nstest-role="fieldcontain">
<select name="slider" id="slider-switch" data-nstest-role="slider">
View
11 tests/unit/slider/slider_events.js
@@ -144,6 +144,17 @@
});
});
+ test( "slider with range-background theme should have a inner range-div with corresponding theme and width", function(){
+ var slider = $("#range-background"),
+ backgroundDiv = slider.next().find('.ui-slider-range-background');
+
+ expect(4);
+ same(slider.val(), "25");
+ same((parseInt(100 * parseFloat(backgroundDiv.css('width')) / parseFloat(backgroundDiv.parent().css('width')) ) + '%'), '25%');
+ same(backgroundDiv.css('margin-left'), '0%', "Margin-left should be 0, as there is only one handle");
+ ok(backgroundDiv.hasClass('ui-btn-down-c'), "Background-Track has swatch c");
+ });
+
test( "input type should degrade to number when slider is created", function(){
same($("#range-slider-up").attr( "type" ), "number");
});
View
1 themes/default/jquery.mobile.forms.slider.css 100644 → 100755
@@ -7,6 +7,7 @@ label.ui-slider { display: block; }
input.ui-slider-input { display: inline-block; width: 50px; }
select.ui-slider-switch { display: none; }
div.ui-slider { position: relative; display: inline-block; overflow: visible; height: 15px; padding: 0; margin: 0 2% 0 20px; top: 4px; width: 66%; }
+div.ui-slider-range-background {height:15px; padding:0; margin: 0; border: none}
a.ui-slider-handle { position: absolute; z-index: 10; top: 50%; width: 28px; height: 28px; margin-top: -15px; margin-left: -15px; }
a.ui-slider-handle .ui-btn-inner { padding-left: 0; padding-right: 0; }
@media all and (min-width: 480px){

0 comments on commit b4950dc

Please sign in to comment.