library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

reverted my slider collision changes - will submit as a patch

Browse Source
This commit is contained in:
Scott Jehl 2009-02-18 17:13:37 +00:00
parent f27ea16080
commit 5f1eb4fb73
5 changed files with 0 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
tests/static/slider/slider_horizontal_range_collision.html
View File

@ -1,20 +0,0 @@
<!doctype html>
<html>
<head>
<title>Slider Static Test : Slider horizontal range</title>
<link rel="stylesheet" href="../static.css" type="text/css" />
<link rel="stylesheet" href="../../../themes/base/ui.base.css" type="text/css" />
<link rel="stylesheet" href="../../../themes/base/ui.theme.css" type="text/css" title="ui-theme" />
<script type="text/javascript" src="../../../jquery-1.3.1.js"></script>
<script type="text/javascript" src="../static.js"></script>
</head>
<body>
<div id="slider-horizontal-range" class="ui-slider ui-slider-horizontal ui-slider-horizontal-collision ui-widget ui-widget-content ui-corner-all">
<div class="ui-slider-range ui-widget-header" style="width:0%; left: 75%;"></div>
<a href="#" class="ui-slider-handle ui-state-default ui-corner-left" style="left: 75%;"></a>
<a href="#" class="ui-slider-handle ui-state-default ui-corner-right" style="left: 75%;"></a>
</div>
</body>
</html>

20
tests/static/slider/slider_vertical_range_collision.html
View File

@ -1,20 +0,0 @@
<!doctype html>
<html>
<head>
<title>Slider Static Test : Slider vertical range</title>
<link rel="stylesheet" href="../static.css" type="text/css" />
<link rel="stylesheet" href="../../../themes/base/ui.base.css" type="text/css" />
<link rel="stylesheet" href="../../../themes/base/ui.theme.css" type="text/css" title="ui-theme" />
<script type="text/javascript" src="../../../jquery-1.3.1.js"></script>
<script type="text/javascript" src="../static.js"></script>
</head>
<body>
<div id="slider-vertical-range" class="ui-slider ui-slider-vertical ui-slider-vertical-collision ui-widget ui-widget-content ui-corner-all">
<div class="ui-slider-range ui-widget-header" style="bottom: 75%; height:0%;"></div>
<a href="#" class="ui-slider-handle ui-state-default ui-corner-bottom" style="bottom: 75%;"></a>
<a href="#" class="ui-slider-handle ui-state-default ui-corner-top" style="bottom: 75%;"></a>
</div>
</body>
</html>

57
tests/visual/slider/slider_horizontal_range_collision.html
View File

@ -1,57 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<title>Slider Visual Test : Slider horizontal range with collision</title>
<link rel="stylesheet" href="../visual.css" type="text/css" />
<link rel="stylesheet" href="../../../themes/base/ui.all.css" type="text/css">
<script type="text/javascript" src="../../../jquery-1.3.1.js"></script>
<script type="text/javascript" src="../../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../../ui/ui.slider.js"></script>
<script type="text/javascript">
$(function() {
//this function checks the slider handles and applies classes to make them visually split a value if they're equal
$.fn.checkCollision = function(){
if( $(this).slider('values', 0) == $(this).slider('values', 1) ){
if( $(this).is('.ui-slider-horizontal') ){
$(this).addClass('ui-slider-horizontal-collision');
$('.ui-slider-handle:eq(0)',this).removeClass('ui-corner-all').addClass('ui-corner-left');
$('.ui-slider-handle:eq(1)',this).removeClass('ui-corner-all').addClass('ui-corner-right');
}
else {
$(this).addClass('ui-slider-vertical-collision');
$('.ui-slider-handle:eq(0)',this).removeClass('ui-corner-all').addClass('ui-corner-bottom');
$('.ui-slider-handle:eq(1)',this).removeClass('ui-corner-all').addClass('ui-corner-top');
}
}
else if( $(this).is('.ui-slider-horizontal-collision, .ui-slider-vertical-collision') ) {
if( $(this).is('.ui-slider-horizontal') ){
$(this).removeClass('ui-slider-horizontal-collision');
$('.ui-slider-handle:eq(0)',this).addClass('ui-corner-all').removeClass('ui-corner-left');
$('.ui-slider-handle:eq(1)',this).addClass('ui-corner-all').removeClass('ui-corner-right');
}
else {
$(this).removeClass('ui-slider-vertical-collision');
$('.ui-slider-handle:eq(0)',this).addClass('ui-corner-all').removeClass('ui-corner-bottom');
$('.ui-slider-handle:eq(1)',this).addClass('ui-corner-all').removeClass('ui-corner-top');
}
}
};
$("#slider-horizontal-range").slider({
orientation: 'horizontal',
range: true,
values: [25, 75],
slide: $(this).checkCollision
})
.checkCollision();
});
</script>
</head>
<body>
<div id="slider-horizontal-range"></div>
</body>
</html>

57
tests/visual/slider/slider_vertical_range_collision.html
View File

@ -1,57 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<title>Slider Visual Test : Slider vertical range with collision</title>
<link rel="stylesheet" href="../visual.css" type="text/css" />
<link rel="stylesheet" href="../../../themes/base/ui.all.css" type="text/css">
<script type="text/javascript" src="../../../jquery-1.3.1.js"></script>
<script type="text/javascript" src="../../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../../ui/ui.slider.js"></script>
<script type="text/javascript">
$(function() {
//this function checks the slider handles and applies classes to make them visually split a value if they're equal
$.fn.checkCollision = function(){
if( $(this).slider('values', 0) == $(this).slider('values', 1) ){
if( $(this).is('.ui-slider-horizontal') ){
$(this).addClass('ui-slider-horizontal-collision');
$('.ui-slider-handle:eq(0)',this).removeClass('ui-corner-all').addClass('ui-corner-left');
$('.ui-slider-handle:eq(1)',this).removeClass('ui-corner-all').addClass('ui-corner-right');
}
else {
$(this).addClass('ui-slider-vertical-collision');
$('.ui-slider-handle:eq(0)',this).removeClass('ui-corner-all').addClass('ui-corner-bottom');
$('.ui-slider-handle:eq(1)',this).removeClass('ui-corner-all').addClass('ui-corner-top');
}
}
else if( $(this).is('.ui-slider-horizontal-collision, .ui-slider-vertical-collision') ) {
if( $(this).is('.ui-slider-horizontal') ){
$(this).removeClass('ui-slider-horizontal-collision');
$('.ui-slider-handle:eq(0)',this).addClass('ui-corner-all').removeClass('ui-corner-left');
$('.ui-slider-handle:eq(1)',this).addClass('ui-corner-all').removeClass('ui-corner-right');
}
else {
$(this).removeClass('ui-slider-vertical-collision');
$('.ui-slider-handle:eq(0)',this).addClass('ui-corner-all').removeClass('ui-corner-bottom');
$('.ui-slider-handle:eq(1)',this).addClass('ui-corner-all').removeClass('ui-corner-top');
}
}
};
$("#slider-vertical-range").slider({
orientation: 'vertical',
range: true,
values: [25, 75],
slide: $(this).checkCollision
})
.checkCollision();
});
</script>
</head>
<body>
<div id="slider-vertical-range"></div>
</body>
</html>

4
themes/base/ui.slider.css
View File

@ -6,16 +6,12 @@
.ui-slider-horizontal { height: .8em; }
.ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }
.ui-slider-horizontal-collision .ui-slider-handle { width: .6em; }
.ui-slider-horizontal-collision .ui-corner-right { margin-left:0; border-left: 0; }
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
.ui-slider-horizontal .ui-slider-range-min { left: 0; }
.ui-slider-horizontal .ui-slider-range-max { right: 0; }
.ui-slider-vertical { width: .8em; height: 100px; }
.ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; }
.ui-slider-vertical-collision .ui-slider-handle { height: .6em; }
.ui-slider-vertical-collision .ui-corner-top { margin-bottom:0; border-bottom: 0; }
.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }
.ui-slider-vertical .ui-slider-range-min { bottom: 0; }
.ui-slider-vertical .ui-slider-range-max { top: 0; }