diff options
| author | Scott Jehl <scott@scottjehl.com> | 2009-02-18 16:06:43 +0000 |
|---|---|---|
| committer | Scott Jehl <scott@scottjehl.com> | 2009-02-18 16:06:43 +0000 |
| commit | f27ea160805dc2984191ecb63c2ad6d830ad37f4 (patch) | |
| tree | 5155b96aab32c0ad53ab8576c6d89a03e4d7bdb0 /tests/visual/slider | |
| parent | de612c079c224fabf91ccd886cffa6d73bc19e22 (diff) | |
| download | jquery-ui-f27ea160805dc2984191ecb63c2ad6d830ad37f4.tar.gz jquery-ui-f27ea160805dc2984191ecb63c2ad6d830ad37f4.zip | |
a couple tests to demonstrate how handles can potentially split a value
Diffstat (limited to 'tests/visual/slider')
| -rw-r--r-- | tests/visual/slider/slider_horizontal_range_collision.html | 57 | ||||
| -rw-r--r-- | tests/visual/slider/slider_vertical_range_collision.html | 57 |
2 files changed, 114 insertions, 0 deletions
diff --git a/tests/visual/slider/slider_horizontal_range_collision.html b/tests/visual/slider/slider_horizontal_range_collision.html new file mode 100644 index 000000000..4751c2807 --- /dev/null +++ b/tests/visual/slider/slider_horizontal_range_collision.html @@ -0,0 +1,57 @@ +<!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> diff --git a/tests/visual/slider/slider_vertical_range_collision.html b/tests/visual/slider/slider_vertical_range_collision.html new file mode 100644 index 000000000..9195f7cc1 --- /dev/null +++ b/tests/visual/slider/slider_vertical_range_collision.html @@ -0,0 +1,57 @@ +<!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> |