Changeset 5060 for trunk/ui/tests/slider.html

Timestamp:

03/17/08 15:02:33 (10 months ago)

Author:

joern.zaefferer

Message:

ui.slider: fixed ranges to never overlap (first handle is always smaller smaller then second handle); refactored drag and moveTo to reuse computations; code formatting cleanup

Files:

• trunk/ui/tests/slider.html (modified) (3 diffs)

trunk/ui/tests/slider.html

@@ -39 +39 @@
 
 
+.zoom { position: relative }
+
+.handle{
+    position: absolute; 
+    height: 5px;
+    width: 21px;
+    margin-left: -3px;
+    background-color: #6EA8FE;
+    border: solid 1px #000;
+    cursor: pointer;
+    font-size: 1px;
+}
+
+.slider{
+    background: url(images/zoom_bar.png);
+    height: 137px;
+    width: 18px;
+}
+
 
 </style>
@@ -65 +84 @@
 <div id='slider2' style="position: absolute; top: 0px; right: 0px; margin: 20px; height: 400px; width: 20px; background: #ccc;">
     <div class='ui-slider-handle' style='height: 20px; background: #888;'></div>    
+</div>
+
+<div class="zoom">
+    <img src="images/zoom_plus.png" height="16" width="18" class="theme_backgroundColor" /><br/>
+    <div class="slider"><div class="handle"></div></div><br/>
+    <img src="images/zoom_minus.png" height="15" width="18" class="theme_backgroundColor" style="position: absolute; top: 160px;" />
 </div>
     
@@ -113 +138 @@
     
     $(".range").rangeSlider();
+    
+     $(".slider").slider({
+        handle: '.handle',
+        steps: 10,
+        startValue: 70
+    });
+    $(".zoom img:first").click(function(){
+        $(".slider").slider("moveTo", "-=10" );
+    });
+    $(".zoom img:last").click(function(){
+        $(".slider").slider("moveTo", "+=10");
+    });
 
 });