]> source.dussan.org Git - jquery-ui.git/commitdiff
projects / jquery-ui.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: de612c0)
a couple tests to demonstrate how handles can potentially split a value
authorScott Jehl <scott@scottjehl.com>
Wed, 18 Feb 2009 16:06:43 +0000 (16:06 +0000)
committerScott Jehl <scott@scottjehl.com>
Wed, 18 Feb 2009 16:06:43 +0000 (16:06 +0000)
tests/visual/slider/slider_horizontal_range_collision.html [new file with mode: 0644] patch | blob
tests/visual/slider/slider_vertical_range_collision.html [new file with mode: 0644] patch | blob

diff --git a/tests/visual/slider/slider_horizontal_range_collision.html b/tests/visual/slider/slider_horizontal_range_collision.html
new file mode 100644 (file)
index 0000000..4751c28
--- /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 (file)
index 0000000..9195f7c
--- /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>
The official jQuery user interface library: https://github.com/jquery/jquery-ui