You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

215 lines
4.5 KiB

6 days ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. 'use strict';
  2. $(document).ready(function() {
  3. // range slider
  4. $('#ex1').slider({
  5. formatter: function(value) {
  6. return 'Current value: ' + value;
  7. }
  8. });
  9. // With JQuery
  10. $("#ex2").slider({});
  11. //#ex3
  12. var RGBChange = function() {
  13. $('#RGB').css('background', 'rgb(' + r.getValue() + ',' + g.getValue() + ',' + b.getValue() + ')')
  14. };
  15. var r = $('#R').slider()
  16. .on('slide', RGBChange)
  17. .data('slider');
  18. var g = $('#G').slider()
  19. .on('slide', RGBChange)
  20. .data('slider');
  21. var b = $('#B').slider()
  22. .on('slide', RGBChange)
  23. .data('slider');
  24. //#ex4
  25. $("#ex4").slider({
  26. reversed: true
  27. });
  28. //#ex6
  29. $("#ex6").slider();
  30. $("#ex6").on("slide", function(slideEvt) {
  31. $("#ex6SliderVal").text(slideEvt.value);
  32. });
  33. //#8
  34. var slider = new Slider("#ex8", {
  35. tooltip: 'always'
  36. });
  37. //#9
  38. var slider = new Slider("#ex9", {
  39. precision: 2,
  40. value: 8.115 // Slider will instantiate showing 8.12 due to specified precision
  41. });
  42. //#10
  43. var slider = new Slider("#ex10", {});
  44. //#11
  45. var slider = new Slider("#ex11", {
  46. step: 20000,
  47. min: 0,
  48. max: 200000,
  49. tooltip: 'always'
  50. });
  51. //#12
  52. $("#ex12a").slider({ id: "slider12a", min: 0, max: 10, value: 5 });
  53. $("#ex12b").slider({ id: "slider12b", min: 0, max: 10, range: true, value: [3, 7] });
  54. $("#ex12c").slider({ id: "slider12c", min: 0, max: 10, range: true, value: [3, 7] });
  55. //#13
  56. $("#ex13").slider({
  57. ticks: [0, 100, 200, 300, 400],
  58. ticks_labels: ['$0', '$100', '$200', '$300', '$400'],
  59. ticks_snap_bounds: 30
  60. });
  61. //#14
  62. $("#ex14").slider({
  63. ticks: [0, 100, 200, 300, 400],
  64. ticks_positions: [0, 15, 35, 60, 90, 100],
  65. ticks_labels: ['$0', '$100', '$200', '$300', '$400'],
  66. ticks_snap_bounds: 30
  67. });
  68. // #15
  69. $("#ex15").slider({
  70. min: 1000,
  71. max: 10000000,
  72. scale: 'logarithmic',
  73. step: 10
  74. });
  75. //#16
  76. $("#ex16a").slider({ min: 0, max: 10, value: 0, focus: true });
  77. $("#ex16b").slider({ min: 0, max: 10, value: [0, 10], focus: true });
  78. // #ex17
  79. $("#ex17a").slider({
  80. min: 0,
  81. max: 10,
  82. value: 0,
  83. tooltip_position: 'bottom'
  84. });
  85. $("#ex17b").slider({
  86. min: 0,
  87. max: 10,
  88. value: 0,
  89. orientation: 'vertical',
  90. tooltip_position: 'left'
  91. });
  92. // #ex18
  93. $("#ex18a").slider({
  94. min: 0,
  95. max: 10,
  96. value: 5,
  97. labelledby: 'ex18-label-1'
  98. });
  99. $("#ex18b").slider({
  100. min: 0,
  101. max: 10,
  102. value: [3, 6],
  103. labelledby: ['ex18-label-2a', 'ex18-label-2b']
  104. });
  105. //#ex19 no script
  106. //#ex20
  107. $('#ex20a').on('click', function(e) {
  108. $('#ex20a')
  109. .parent()
  110. .find(' >.show-well')
  111. .toggle()
  112. .find('input')
  113. .slider('relayout');
  114. e.preventDefault();
  115. });
  116. //#21 no script
  117. //#22
  118. // With JQuery
  119. $('#ex22').slider({
  120. id: 'slider22',
  121. min: 0,
  122. max: 20,
  123. step: 1,
  124. value: 14,
  125. rangeHighlights: [{ "start": 2, "end": 5 },
  126. { "start": 7, "end": 8 },
  127. { "start": 17, "end": 19 },
  128. { "start": 17, "end": 24 },
  129. { "start": -3, "end": 19 }
  130. ]
  131. });
  132. //#23
  133. $("#ex23").slider({
  134. ticks: [0, 1, 2, 3, 4],
  135. ticks_positions: [0, 30, 60, 70, 90, 100],
  136. ticks_snap_bounds: 200,
  137. formatter: function(value) {
  138. return 'Current value: ' + value;
  139. },
  140. ticks_tooltip: true,
  141. step: 0.01
  142. });
  143. //#ex5
  144. var slider = new Slider('#ex5');
  145. $("#destroyEx5Slider").on('click',function() {
  146. // With JQuery
  147. $("#ex5").slider('destroy');
  148. // Without JQuery
  149. slider.destroy();
  150. });
  151. //#7
  152. var slider = new Slider("#ex7");
  153. $("#ex7-enabled").on('click',function() {
  154. if (this.checked) {
  155. // With JQuery
  156. $("#ex7").slider("enable");
  157. // Without JQuery
  158. slider.enable();
  159. } else {
  160. // With JQuery
  161. $("#ex7").slider("disable");
  162. // Without JQuery
  163. slider.disable();
  164. }
  165. });
  166. });