| blob | 0c89dd92a394a7dc590d2e1e7c25f57ca9bb712d |
2 <html>
3 <head>
6 </head>
14 <p>
17 > YAHOO.widget.Slider
19 </p>
20 </div>
27 <h2>
35 </span>
38 - uses
42 </span>
44 </code>
45 </h2>
46 <!-- class tree goes here -->
52 A DragDrop implementation that can be used as a background for a
53 slider. It takes a reference to the thumb instance
54 so it can delegate some of the events to it. The goal is to make the
55 thumb jump to the location on the background when the background is
56 clicked.
57 </div>
64 <code>
65 (
69 id
71 ,
72 sGroup
74 ,
75 oThumb
77 ,
78 sType
79 )
80 </code>
82 <dl>
84 <dd>
85 <code>id
87 </code>
88 The id of the element linked to this instance
89 </dd>
90 <dd>
91 <code>sGroup
93 </code>
94 The group of related DragDrop items
95 </dd>
96 <dd>
97 <code>oThumb
99 </code>
100 The thumb for this slider
101 </dd>
102 <dd>
103 <code>sType
105 </code>
106 The type of slider (horiz, vert, region)
107 </dd>
108 </dl>
111 </div>
112 </div>
113 </div>
114 </div>
121 </h4>
124 Flag that determines if the thumb will animate when moved
125 </div>
126 </div>
131 <hr />
134 </h4>
137 If animation is configured, specifies the length of the animation
138 in seconds.
139 </div>
140 </div>
144 Default Value: 0.2
145 </div>
148 <hr />
151 </h4>
154 Set to false to disable a background click thumb move
155 </div>
156 </div>
161 <hr />
164 </h4>
167 The basline position of the background element, used
168 to determine if the background has moved since the last
169 operation.
170 </div>
171 </div>
176 <hr />
179 </h4>
182 Enables the arrow, home and end keys, defaults to true.
183 </div>
184 </div>
189 <hr />
192 </h4>
195 Overrides the isTarget property in YAHOO.util.DragDrop
196 </div>
197 </div>
202 <hr />
205 </h4>
208 Specifies the number of pixels the arrow keys will move the slider.
209 Default is 25.
210 </div>
211 </div>
216 <hr />
219 </h4>
222 moveComplete is set to true when the slider has moved to its final
223 destination. For animated slider, this value can be checked in
224 the onChange handler to make it possible to execute logic only
225 when the move is complete rather than at all points along the way.
226 Deprecated because this flag is only useful when the background is
227 clicked and the slider is animated. If the user drags the thumb,
228 the flag is updated when the drag is over ... the final onDrag event
229 fires before the mouseup the ends the drag, so the implementer will
230 never see it.
231 </div>
232 </div>
238 </div>
240 <hr />
243 </h4>
246 A YAHOO.widget.SliderThumb instance that we will use to
247 reposition the thumb when the background is clicked
248 </div>
249 </div>
254 <hr />
257 </h4>
260 The center of the slider element is stored so we can
261 place it in the correct position when the background is clicked.
262 </div>
263 </div>
268 <hr />
271 </h4>
274 Adjustment factor for tick animation, the more ticks, the
275 faster the animation (by default)
276 </div>
277 </div>
282 <hr />
285 </h4>
288 The type of the slider (horiz, vert, region)
289 </div>
290 </div>
295 <hr />
298 </h4>
301 By default, animation is available if the animation library is detected.
302 </div>
303 </div>
308 <hr />
311 </div>
312 </div>
317 <code>
344 </code>
345 </div>
346 </div>
348 <h4>Properties inherited from <a href="YAHOO.util.EventProvider.html">YAHOO.util.EventProvider</a>:</h4>
350 <code>
354 </code>
355 </div>
356 </div>
361 <h4>
364 <code>
365 private
368 void
370 (
371 )
372 </code>
375 Returns the next X tick value based on the current coord and the target coord.
376 </div>
381 <dl>
382 <dt>Returns:
383 <code>
384 void
385 </code></dt>
386 <dd></dd>
387 </dl>
389 </div>
391 </div>
392 <hr />
393 <h4>
396 <code>
397 private
400 void
402 (
403 )
404 </code>
407 Returns the next Y tick value based on the current coord and the target coord.
408 </div>
413 <dl>
414 <dt>Returns:
415 <code>
416 void
417 </code></dt>
418 <dd></dd>
419 </dl>
421 </div>
423 </div>
424 <hr />
425 <h4>
428 <code>
429 private
432 void
434 (
435 )
436 </code>
439 Resets the constraints before moving the thumb.
440 </div>
445 <dl>
446 <dt>Returns:
447 <code>
448 void
449 </code></dt>
450 <dd></dd>
451 </dl>
453 </div>
455 </div>
456 <hr />
457 <h4>
460 <code>
461 private
464 void
466 (
467 )
468 </code>
471 Fired when the slider movement ends
472 </div>
477 <dl>
478 <dt>Returns:
479 <code>
480 void
481 </code></dt>
482 <dd></dd>
483 </dl>
485 </div>
487 </div>
488 <hr />
489 <h4>
492 <code>
493 private
496 void
498 (
501 thumbEvent
504 )
505 </code>
508 Fires the change event if the value has been changed. Ignored if we are in
509 the middle of an animation as the event will fire when the animation is
510 complete
511 </div>
515 <dl>
517 <dd>
519 set to true if this event is fired from an event
520 that occurred on the thumb. If it is, the state of the
521 thumb dd object should be correct. Otherwise, the event
522 originated on the background, so the thumb state needs to
523 be refreshed before proceeding.
524 </dd>
525 </dl>
527 <dl>
528 <dt>Returns:
529 <code>
530 void
531 </code></dt>
532 <dd></dd>
533 </dl>
535 </div>
537 </div>
538 <hr />
539 <h4>
542 <code>
543 private
546 void
548 (
549 )
550 </code>
553 Try to focus the element when clicked so we can add
554 accessibility features
555 </div>
560 <dl>
561 <dt>Returns:
562 <code>
563 void
564 </code></dt>
565 <dd></dd>
566 </dl>
568 </div>
570 </div>
571 <hr />
572 <h4>
575 <code>
579 SliderThumb
581 (
582 )
583 </code>
586 Returns a reference to this slider's thumb
587 </div>
592 <dl>
593 <dt>Returns:
594 <code>
595 SliderThumb
596 </code></dt>
598 </dl>
600 </div>
602 </div>
603 <hr />
604 <h4>
607 <code>
611 int
613 (
614 )
615 </code>
618 Returns the slider's thumb offset from the start position
619 </div>
624 <dl>
625 <dt>Returns:
626 <code>
627 int
628 </code></dt>
630 </dl>
632 </div>
634 </div>
635 <hr />
636 <h4>
639 <code>
643 int
645 (
646 )
647 </code>
650 Returns the slider's thumb X offset from the start position
651 </div>
656 <dl>
657 <dt>Returns:
658 <code>
659 int
660 </code></dt>
662 </dl>
664 </div>
666 </div>
667 <hr />
668 <h4>
671 <code>
675 int
677 (
678 )
679 </code>
682 Returns the slider's thumb Y offset from the start position
683 </div>
688 <dl>
689 <dt>Returns:
690 <code>
691 int
692 </code></dt>
694 </dl>
696 </div>
698 </div>
699 <hr />
700 <h4>
703 <code>
707 void
709 (
712 e
715 )
716 </code>
719 Executed when a keydown event happens with the control focused.
720 Updates the slider value and display when the keypress is an
721 arrow key, home, or end as long as enableKeys is set to true.
722 </div>
726 <dl>
728 <dd>
730 the keydown event
731 </dd>
732 </dl>
734 <dl>
735 <dt>Returns:
736 <code>
737 void
738 </code></dt>
739 <dd></dd>
740 </dl>
742 </div>
744 </div>
745 <hr />
746 <h4>
749 <code>
753 void
755 (
758 e
761 )
762 </code>
765 Executed when a keypress event happens with the control focused.
766 Prevents the default behavior for navigation keys. The actual
767 logic for moving the slider thumb in response to a key event
768 happens in handleKeyDown.
769 </div>
773 <dl>
775 <dd>
777 the keypress event
778 </dd>
779 </dl>
781 <dl>
782 <dt>Returns:
783 <code>
784 void
785 </code></dt>
786 <dd></dd>
787 </dl>
789 </div>
791 </div>
792 <hr />
793 <h4>
796 <code>
797 private
800 void
802 (
803 )
804 </code>
807 Internal handler for the slider thumb's onChange event
808 </div>
813 <dl>
814 <dt>Returns:
815 <code>
816 void
817 </code></dt>
818 <dd></dd>
819 </dl>
821 </div>
823 </div>
824 <hr />
825 <h4>
828 <code>
832 void
834 (
837 sType
840 )
841 </code>
844 Initializes the slider. Executed in the constructor
845 </div>
849 <dl>
851 <dd>
853 the type of slider (horiz, vert, region)
854 </dd>
855 </dl>
857 <dl>
858 <dt>Returns:
859 <code>
860 void
861 </code></dt>
862 <dd></dd>
863 </dl>
865 </div>
867 </div>
868 <hr />
869 <h4>
872 <code>
876 void
878 (
881 t
884 )
885 </code>
888 Initializes the slider's thumb. Executed in the constructor.
889 </div>
893 <dl>
895 <dd>
897 the slider thumb
898 </dd>
899 </dl>
901 <dl>
902 <dt>Returns:
903 <code>
904 void
905 </code></dt>
906 <dd></dd>
907 </dl>
909 </div>
911 </div>
912 <hr />
913 <h4>
916 <code>
920 void
922 (
923 )
924 </code>
927 Locks the slider, overrides YAHOO.util.DragDrop
928 </div>
933 <dl>
934 <dt>Returns:
935 <code>
936 void
937 </code></dt>
938 <dd></dd>
939 </dl>
941 </div>
943 </div>
944 <hr />
945 <h4>
948 <code>
949 private
952 void
954 (
957 the
960 )
961 </code>
964 Move the slider one tick mark towards its final coordinate. Used
965 for the animation when tick marks are defined
966 </div>
970 <dl>
972 <dd>
974 destination coordinate
975 </dd>
976 </dl>
978 <dl>
979 <dt>Returns:
980 <code>
981 void
982 </code></dt>
983 <dd></dd>
984 </dl>
986 </div>
988 </div>
989 <hr />
990 <h4>
993 <code>
994 private
997 void
999 (
1002 x
1005 ,
1006 y
1009 ,
1010 skipAnim
1013 )
1014 </code>
1017 Move the associated slider moved to a timeout to try to get around the
1018 mousedown stealing moz does when I move the slider element between the
1019 cursor and the background during the mouseup event
1020 </div>
1024 <dl>
1026 <dd>
1028 the X coordinate of the click
1029 </dd>
1030 <dd>
1032 the Y coordinate of the click
1033 </dd>
1034 <dd>
1036 don't animate if the move happend onDrag
1037 </dd>
1038 </dl>
1040 <dl>
1041 <dt>Returns:
1042 <code>
1043 void
1044 </code></dt>
1045 <dd></dd>
1046 </dl>
1048 </div>
1050 </div>
1051 <hr />
1052 <h4>
1055 <code>
1059 void
1061 (
1062 )
1063 </code>
1066 Executed when the slider element is available
1067 </div>
1072 <dl>
1073 <dt>Returns:
1074 <code>
1075 void
1076 </code></dt>
1077 <dd></dd>
1078 </dl>
1080 </div>
1082 </div>
1083 <hr />
1084 <h4>
1087 <code>
1091 void
1093 (
1096 firstOffset
1099 ,
1100 secondOffset
1103 )
1104 </code>
1107 Event that fires when the value of the slider has changed
1108 </div>
1112 <dl>
1114 <dd>
1116 the number of pixels the thumb has moved
1117 from its start position. Normal horizontal and vertical sliders will only
1118 have the firstOffset. Regions will have both, the first is the horizontal
1119 offset, the second the vertical.
1120 </dd>
1121 <dd>
1123 the y offset for region sliders
1124 </dd>
1125 </dl>
1127 <dl>
1128 <dt>Returns:
1129 <code>
1130 void
1131 </code></dt>
1132 <dd></dd>
1133 </dl>
1137 </div>
1138 </div>
1140 </div>
1141 <hr />
1142 <h4>
1145 <code>
1146 private
1149 void
1151 (
1152 )
1153 </code>
1156 Handles the onDrag event for the slider background
1157 </div>
1162 <dl>
1163 <dt>Returns:
1164 <code>
1165 void
1166 </code></dt>
1167 <dd></dd>
1168 </dl>
1170 </div>
1172 </div>
1173 <hr />
1174 <h4>
1177 <code>
1178 private
1181 void
1183 (
1184 )
1185 </code>
1188 Handles the mousedown event for the slider background
1189 </div>
1194 <dl>
1195 <dt>Returns:
1196 <code>
1197 void
1198 </code></dt>
1199 <dd></dd>
1200 </dl>
1202 </div>
1204 </div>
1205 <hr />
1206 <h4>
1209 <code>
1213 void
1215 (
1216 )
1217 </code>
1220 Event that fires at the end of a slider thumb move
1221 </div>
1226 <dl>
1227 <dt>Returns:
1228 <code>
1229 void
1230 </code></dt>
1231 <dd></dd>
1232 </dl>
1236 </div>
1237 </div>
1239 </div>
1240 <hr />
1241 <h4>
1244 <code>
1248 void
1250 (
1251 )
1252 </code>
1255 Event that fires when the at the beginning of the slider thumb move
1256 </div>
1261 <dl>
1262 <dt>Returns:
1263 <code>
1264 void
1265 </code></dt>
1266 <dd></dd>
1267 </dl>
1271 </div>
1272 </div>
1274 </div>
1275 <hr />
1276 <h4>
1279 <code>
1283 boolean
1285 (
1288 newOffset
1291 ,
1292 newOffset2
1295 ,
1296 skipAnim
1299 ,
1300 force
1303 )
1304 </code>
1307 Provides a way to set the value of the region slider in code.
1308 </div>
1312 <dl>
1314 <dd>
1316 the number of pixels the thumb should be
1317 positioned away from the initial start point (x axis for region)
1318 </dd>
1319 <dd>
1321 the number of pixels the thumb should be
1322 positioned away from the initial start point (y axis for region)
1323 </dd>
1324 <dd>
1326 set to true to disable the animation
1327 for this move action (but not others).
1328 </dd>
1329 <dd>
1331 ignore the locked setting and set value anyway
1332 </dd>
1333 </dl>
1335 <dl>
1336 <dt>Returns:
1337 <code>
1338 boolean
1339 </code></dt>
1341 </dl>
1343 </div>
1345 </div>
1346 <hr />
1347 <h4>
1350 <code>
1354 void
1356 (
1357 )
1358 </code>
1361 Initialization that sets up the value offsets once the elements are ready
1362 </div>
1367 <dl>
1368 <dt>Returns:
1369 <code>
1370 void
1371 </code></dt>
1372 <dd></dd>
1373 </dl>
1375 </div>
1377 </div>
1378 <hr />
1379 <h4>
1382 <code>
1386 void
1388 (
1389 )
1390 </code>
1393 When the thumb is available, we cache the centerpoint of the element so
1394 we can position the element correctly when the background is clicked
1395 </div>
1400 <dl>
1401 <dt>Returns:
1402 <code>
1403 void
1404 </code></dt>
1405 <dd></dd>
1406 </dl>
1408 </div>
1410 </div>
1411 <hr />
1412 <h4>
1415 <code>
1419 boolean
1421 (
1424 newOffset
1427 ,
1428 skipAnim
1431 ,
1432 force
1435 )
1436 </code>
1439 Provides a way to set the value of the slider in code.
1440 </div>
1444 <dl>
1446 <dd>
1448 the number of pixels the thumb should be
1449 positioned away from the initial start point
1450 </dd>
1451 <dd>
1453 set to true to disable the animation
1454 for this move action (but not others).
1455 </dd>
1456 <dd>
1458 ignore the locked setting and set value anyway
1459 </dd>
1460 </dl>
1462 <dl>
1463 <dt>Returns:
1464 <code>
1465 boolean
1466 </code></dt>
1468 </dl>
1470 </div>
1472 </div>
1473 <hr />
1474 <h4>
1477 <code>
1478 private
1481 void
1483 (
1484 )
1485 </code>
1488 Handles mouseup event on the slider background
1489 </div>
1494 <dl>
1495 <dt>Returns:
1496 <code>
1497 void
1498 </code></dt>
1499 <dd></dd>
1500 </dl>
1502 </div>
1504 </div>
1505 <hr />
1506 <h4>
1509 <code>
1513 string
1515 (
1516 )
1517 </code>
1520 Slider toString
1521 </div>
1526 <dl>
1527 <dt>Returns:
1528 <code>
1529 string
1530 </code></dt>
1532 </dl>
1534 </div>
1536 </div>
1537 <hr />
1538 <h4>
1541 <code>
1545 void
1547 (
1548 )
1549 </code>
1552 Unlocks the slider, overrides YAHOO.util.DragDrop
1553 </div>
1558 <dl>
1559 <dt>Returns:
1560 <code>
1561 void
1562 </code></dt>
1563 <dd></dd>
1564 </dl>
1566 </div>
1568 </div>
1569 <hr />
1570 <h4>
1573 <code>
1577 boolean
1579 (
1582 checkPos
1585 )
1586 </code>
1589 Checks the background position element position. If it has moved from the
1590 baseline position, the constraints for the thumb are reset
1591 </div>
1595 <dl>
1597 <dd>
1599 check the position instead of using cached value
1600 </dd>
1601 </dl>
1603 <dl>
1604 <dt>Returns:
1605 <code>
1606 boolean
1607 </code></dt>
1609 </dl>
1611 </div>
1613 </div>
1614 <hr />
1615 <h4>
1618 <code>
1620 static
1622 Slider
1624 (
1627 sBGElId
1630 ,
1631 sHandleElId
1634 ,
1635 iLeft
1638 ,
1639 iRight
1642 ,
1643 iTickSize
1646 )
1647 </code>
1650 Factory method for creating a horizontal slider
1651 </div>
1655 <dl>
1657 <dd>
1659 the id of the slider's background element
1660 </dd>
1661 <dd>
1663 the id of the thumb element
1664 </dd>
1665 <dd>
1667 the number of pixels the element can move left
1668 </dd>
1669 <dd>
1671 the number of pixels the element can move right
1672 </dd>
1673 <dd>
1675 optional parameter for specifying that the element
1676 should move a certain number pixels at a time.
1677 </dd>
1678 </dl>
1680 <dl>
1681 <dt>Returns:
1682 <code>
1683 Slider
1684 </code></dt>
1686 </dl>
1688 </div>
1690 </div>
1691 <hr />
1692 <h4>
1695 <code>
1697 static
1699 Slider
1701 (
1704 sBGElId
1707 ,
1708 sHandleElId
1711 ,
1712 iLeft
1715 ,
1716 iRight
1719 ,
1720 iUp
1723 ,
1724 iDown
1727 ,
1728 iTickSize
1731 )
1732 </code>
1735 Factory method for creating a slider region like the one in the color
1736 picker example
1737 </div>
1741 <dl>
1743 <dd>
1745 the id of the slider's background element
1746 </dd>
1747 <dd>
1749 the id of the thumb element
1750 </dd>
1751 <dd>
1753 the number of pixels the element can move left
1754 </dd>
1755 <dd>
1757 the number of pixels the element can move right
1758 </dd>
1759 <dd>
1761 the number of pixels the element can move up
1762 </dd>
1763 <dd>
1765 the number of pixels the element can move down
1766 </dd>
1767 <dd>
1769 optional parameter for specifying that the element
1770 should move a certain number pixels at a time.
1771 </dd>
1772 </dl>
1774 <dl>
1775 <dt>Returns:
1776 <code>
1777 Slider
1778 </code></dt>
1780 </dl>
1782 </div>
1784 </div>
1785 <hr />
1786 <h4>
1789 <code>
1791 static
1793 Slider
1795 (
1798 sBGElId
1801 ,
1802 sHandleElId
1805 ,
1806 iUp
1809 ,
1810 iDown
1813 ,
1814 iTickSize
1817 )
1818 </code>
1821 Factory method for creating a vertical slider
1822 </div>
1826 <dl>
1828 <dd>
1830 the id of the slider's background element
1831 </dd>
1832 <dd>
1834 the id of the thumb element
1835 </dd>
1836 <dd>
1838 the number of pixels the element can move up
1839 </dd>
1840 <dd>
1842 the number of pixels the element can move down
1843 </dd>
1844 <dd>
1846 optional parameter for specifying that the element
1847 should move a certain number pixels at a time.
1848 </dd>
1849 </dl>
1851 <dl>
1852 <dt>Returns:
1853 <code>
1854 Slider
1855 </code></dt>
1857 </dl>
1859 </div>
1861 </div>
1862 <hr />
1863 </div>
1864 </div>
1869 <code>
1926 </code>
1927 </div>
1928 </div>
1930 <h4>Methods inherited from <a href="YAHOO.util.EventProvider.html">YAHOO.util.EventProvider</a>:</h4>
1932 <code>
1940 </code>
1941 </div>
1942 </div>
1947 <h4>
1950 <code>
1956 (
1959 newOffset|x
1962 ,
1963 y
1966 )
1968 </code>
1971 Event the fires when the value of the control changes. If
1972 the control is animated the event will fire every point
1973 along the way.
1974 </div>
1979 <dl>
1981 <dd>
1983 the new offset for normal sliders, or the new
1984 x offset for region sliders
1985 </dd>
1986 <dd>
1988 the number of pixels the thumb has moved on the y axis
1989 (region sliders only)
1990 </dd>
1991 </dl>
1994 </div>
1996 </div>
1997 <hr />
1998 <h4>
2001 <code>
2007 (
2008 )
2010 </code>
2013 Event that fires at the end of a slider thumb move
2014 </div>
2021 </div>
2023 </div>
2024 <hr />
2025 <h4>
2028 <code>
2034 (
2035 )
2037 </code>
2040 Event that fires at the beginning of a slider thumb move.
2041 </div>
2048 </div>
2050 </div>
2051 <hr />
2052 </div>
2053 </div>
2059 </div>
2060 </div>
2105 </ul>
2106 </div>
2113 </ul>
2114 </div>
2121 </ul>
2122 </div>
2128 <!--<code><boolean></code>-->
2129 </li>
2131 <!--<code><boolean></code>-->
2132 </li>
2134 <!--<code><boolean></code>-->
2135 </li>
2137 <!--<code><boolean></code>-->
2138 </li>
2140 <!--<code><boolean></code>-->
2141 </li>
2143 <!--<code><boolean></code>-->
2144 </li>
2146 <!--<code><boolean></code>-->
2147 </li>
2149 <!--<code><boolean></code>-->
2150 </li>
2152 <!--<code><boolean></code>-->
2153 </li>
2155 <!--<code><boolean></code>-->
2156 </li>
2158 <!--<code><boolean></code>-->
2159 </li>
2161 <!--<code><boolean></code>-->
2162 </li>
2164 <!--<code><boolean></code>-->
2165 </li>
2166 </ul>
2167 </div>
2174 </li>
2177 </li>
2180 </li>
2183 </li>
2186 </li>
2189 </li>
2192 </li>
2195 </li>
2198 </li>
2201 </li>
2204 </li>
2207 </li>
2210 </li>
2213 </li>
2216 </li>
2219 </li>
2222 </li>
2225 </li>
2228 </li>
2231 </li>
2234 </li>
2237 </li>
2240 </li>
2243 </li>
2246 </li>
2249 </li>
2252 </li>
2255 </li>
2258 </li>
2261 </li>
2264 </li>
2267 </li>
2270 </li>
2273 </li>
2276 </li>
2277 </ul>
2278 </div>
2283 <li>
2285 </li>
2286 <li>
2288 </li>
2289 <li>
2291 </li>
2292 </ul>
2293 </div>
2296 </div>
2297 </div>
2298 </div>
2300 <hr />
2302 </div>
2303 </div>
2304 </body>
2305 </html>