mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-04-30 10:54:44 +00:00
pretty rough, but here's a functional attempt at rounded-corner switches
This commit is contained in:
scottjehl
parent
69f446d945
commit
71763d3dfa
2 changed files with 47 additions and 26 deletions
|
|
@ -7,15 +7,26 @@ label.ui-slider { display: block; }
|
|||
input.ui-slider-input { display: inline-block; width: 40px; }
|
||||
select.ui-slider-switch { display: none; }
|
||||
div.ui-slider { position: relative; display: inline-block; overflow: visible; height: 15px; padding: 0; margin: 0 2% 0 15px; top: 4px; width: 66%; }
|
||||
div.ui-slider-switch { height: 32px; overflow: hidden; margin-left: 0; }
|
||||
div.ui-slider-inneroffset { margin-left: 50%; position: absolute; top: 1px; height: 100%; width: 50%; }
|
||||
a.ui-slider-handle { position: absolute; top: 50%; width: 24px; height: 24px; margin-top: -13px; margin-left: -13px; }
|
||||
div.ui-slider-switch a.ui-slider-handle { width: 101%; height: 32px; margin-top: -18px; margin-left: -101%; }
|
||||
span.ui-slider-label { width: 101%; position: absolute; text-align: center; height: 36px; line-height: 36px; top: 0; margin: -1px 0; }
|
||||
span.ui-slider-label-a { left: -126%; padding-left: 25%; margin-left: -2px }
|
||||
span.ui-slider-label-b { right: -126%; padding-right: 25%; margin-right: -2px }
|
||||
a.ui-slider-handle-snapping { -webkit-transition: left 100ms linear; }
|
||||
div.ui-slider-handle { position: absolute; top: 50%; }
|
||||
a.ui-slider-handle-btn { position: absolute; z-index: 10; top: 50%; width: 24px; height: 24px; margin-top: -13px; margin-left: -13px; }
|
||||
|
||||
@media screen and (min-width: 480px){
|
||||
label.ui-slider { display: inline-block; width: 20%; margin: 0 2% 0 0; }
|
||||
div.ui-slider { width: 45%; }
|
||||
}
|
||||
}
|
||||
|
||||
div.ui-slider-switch { height: 32px; overflow: hidden; margin-left: 0; }
|
||||
div.ui-slider-inneroffset { margin-left: 50%; position: absolute; top: 1px; height: 100%; width: 50%; }
|
||||
div.ui-slider-handle-snapping { -webkit-transition: left 100ms linear; }
|
||||
div.ui-slider-labelbg { position: absolute; top:0; margin: 0; border-width: 0; }
|
||||
div.ui-slider-switch div.ui-slider-labelbg-a { width: 60%; height: 100%; left: 0; }
|
||||
div.ui-slider-switch div.ui-slider-labelbg-b { width: 60%; height: 100%; right: 0; }
|
||||
.ui-slider-switch-a div.ui-slider-labelbg-a, .ui-slider-switch-b div.ui-slider-labelbg-b { z-index: 1; }
|
||||
.ui-slider-switch-a div.ui-slider-labelbg-b, .ui-slider-switch-b div.ui-slider-labelbg-a { z-index: 10; }
|
||||
|
||||
|
||||
div.ui-slider-switch div.ui-slider-handle { width: 100%; z-index: 20; }
|
||||
div.ui-slider-switch a.ui-slider-handle-btn { width: 100%; height: 32px; margin-top: -18px; margin-left: -100%; }
|
||||
span.ui-slider-label { width: 100%; position: absolute;height: 32px; font-size: 16px; text-align: center; margin: -18px 0; line-height: 2; background: none; border-color: transparent; }
|
||||
span.ui-slider-label-a { left: -200%; margin-right: -2px }
|
||||
span.ui-slider-label-b { right: 0; margin-left: -2px }
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ $.fn.slider = function(options){
|
|||
return this.each(function(){
|
||||
var control = $(this),
|
||||
cType = control[0].nodeName.toLowerCase(),
|
||||
sliderClass = (cType == 'select') ? 'ui-slider-switch' : 'ui-btn-corner-all',
|
||||
selectClass = (cType == 'select') ? 'ui-slider-switch' : '',
|
||||
controlID = control.attr('id'),
|
||||
labelID = controlID + '-label',
|
||||
label = $('[for='+ controlID +']').attr('id',labelID),
|
||||
|
|
@ -18,11 +18,10 @@ $.fn.slider = function(options){
|
|||
max = (cType == 'input') ? parseFloat(control.attr('max')) : control.find('option').length-1,
|
||||
percent = val / (max - min) * 100,
|
||||
snappedPercent = percent,
|
||||
slider = $('<div class="ui-slider '+ sliderClass +' ui-bar-c" role="application"></div>'),
|
||||
cornershadows = (cType == 'select') ? false : true,
|
||||
handle = $('<a href="#" class="ui-slider-handle" data-theme="c"></a>')
|
||||
slider = $('<div class="ui-slider '+ selectClass +' ui-bar-c ui-btn-corner-all" role="application"></div>'),
|
||||
handle = $('<a href="#" class="ui-slider-handle-btn"></a>')
|
||||
.appendTo(slider)
|
||||
.buttonMarkup({corners: cornershadows, shadow: cornershadows})
|
||||
.buttonMarkup({corners: true, theme: 'c', shadow: true})
|
||||
.attr({
|
||||
'role': 'slider',
|
||||
'aria-valuemin': min,
|
||||
|
|
@ -32,6 +31,7 @@ $.fn.slider = function(options){
|
|||
'title': val,
|
||||
'aria-labelledby': labelID
|
||||
}),
|
||||
handleWrapper = handle.wrap('<div class="ui-slider-handle"></div>').parent(),
|
||||
dragging = false;
|
||||
|
||||
if(cType == 'select'){
|
||||
|
|
@ -40,8 +40,10 @@ $.fn.slider = function(options){
|
|||
|
||||
control.find('option').each(function(i){
|
||||
var side = (i==0) ?'b':'a',
|
||||
theme = (i==0) ?'c':'b'
|
||||
$('<span class="ui-slider-label ui-slider-label-'+ side +' ui-btn-down-'+ theme +'">'+$(this).text()+'</span>').appendTo(handle);
|
||||
corners = (i==0) ? 'right' :'left',
|
||||
theme = (i==0) ?'c':'b';
|
||||
$('<div class="ui-slider-labelbg ui-slider-labelbg-'+ side +' ui-btn-down-'+ theme +' ui-btn-corner-'+ corners+'"></div>').prependTo(slider);
|
||||
$('<span class="ui-slider-label ui-slider-label-'+ side +' ui-btn-down-'+ theme +' ui-btn-corner-'+ corners+'" role="image">'+$(this).text()+'</span>').prependTo(handleWrapper);
|
||||
});
|
||||
|
||||
}
|
||||
|
|
@ -51,9 +53,6 @@ $.fn.slider = function(options){
|
|||
control.val(val);
|
||||
}
|
||||
else {
|
||||
if(control[0].selectedIndex !== val){
|
||||
slider.toggleClass('ui-btn-down-b ui-btn-down-c');
|
||||
}
|
||||
control[0].selectedIndex = val;
|
||||
}
|
||||
}
|
||||
|
|
@ -77,25 +76,36 @@ $.fn.slider = function(options){
|
|||
var newval = Math.round( (percent/100) * max );
|
||||
if( newval < min ) { newval = min; }
|
||||
if( newval > max ) { newval = max; }
|
||||
//flip the stack of the bg colors
|
||||
if(percent > 60 && cType == 'select'){
|
||||
|
||||
}
|
||||
snappedPercent = Math.round( newval / max * 100 );
|
||||
handle
|
||||
.css('left', percent + '%')
|
||||
.attr({
|
||||
handleWrapper.css('left', percent + '%');
|
||||
handle.attr({
|
||||
'aria-valuenow': (cType == 'input') ? newval : control.find('option').eq(newval).attr('value'),
|
||||
'aria-valuetext': (cType == 'input') ? newval : control.find('option').eq(newval).text(),
|
||||
'title': newval
|
||||
});
|
||||
|
||||
updateSwitchClass(newval);
|
||||
updateControl(newval);
|
||||
}
|
||||
|
||||
function updateSwitchClass(val){
|
||||
if(cType == 'input'){return;}
|
||||
if(val == 0){ slider.addClass('ui-slider-switch-a').removeClass('ui-slider-switch-b'); }
|
||||
else { slider.addClass('ui-slider-switch-b').removeClass('ui-slider-switch-a'); }
|
||||
}
|
||||
|
||||
updateSwitchClass(val);
|
||||
|
||||
function updateSnap(){
|
||||
if(cType == 'select'){
|
||||
handle
|
||||
handleWrapper
|
||||
.addClass('ui-slider-handle-snapping')
|
||||
.css('left', snappedPercent + '%')
|
||||
.animationComplete(function(){
|
||||
handle.removeClass('ui-slider-handle-snapping');
|
||||
handleWrapper.removeClass('ui-slider-handle-snapping');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -135,7 +145,7 @@ $.fn.slider = function(options){
|
|||
})
|
||||
.insertAfter(control);
|
||||
|
||||
handle
|
||||
handleWrapper
|
||||
.css('left', percent + '%')
|
||||
.bind('click', function(e){ return false; });
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue