Учебники

script.aculo.us — создание слайдеров

Январь 12, 2019

Ползунки — это тонкие дорожки с одной или несколькими ручками, которые пользователь может перемещать по дорожке.

Цель ползунка состоит в том, чтобы предоставить альтернативный метод ввода для определения числового значения; ползунок представляет диапазон, а перемещение ручки по дорожке определяет значение в этом диапазоне.

Ползунки могут быть в горизонтальной или вертикальной ориентации. В горизонтальном положении левый конец дорожки обычно представляет собой наименьшее значение, а в вертикальной ориентации нижняя часть слайда обычно является наименьшим значением.

Чтобы использовать возможности слайдера script.aculo.us, вам необходимо загрузить модуль slider.js вместе с модулем prototype.js. Так что ваша минимальная загрузка для script.aculo.us будет выглядеть так — 

<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js?load=slider">< /script>

Создание элемента управления Slider

Как обычно, создание слайдера — это вопрос создания пользовательского объекта на основе нескольких существующих элементов в DOM вашей страницы. Вам понадобятся два элемента, один для ручки и один для дорожки, как показано ниже: 

new Control.Slider(handle, track [ , options ] );

Элементом track обычно является <div>, а элементом handle является <div> или <span> внутри элемента track. Оба могут быть переданы либо по id =, либо по прямым ссылкам DOM, как обычно.

Варианты слайдеров

При создании объекта Slider вы можете использовать один или несколько из следующих параметров.

Sr.No Вариант и описание
1

Ось

Определяет ориентацию элемента управления как горизонтальную или вертикальную . Ориентация по умолчанию горизонтальная .

2

Спектр

Определяет диапазон значений ползунка как экземпляр экземпляра Prototype ObjectRange. По умолчанию от 0 до 1.

3

Ценности

Определяет дискретный набор значений, которые может получить ползунок. Если опущен, все значения в пределах диапазона могут быть установлены.

4

sliderValue

Устанавливает начальное значение ползунка. Если опущено, значение, представленное крайним левым (или самым верхним) краем ползунка, является начальным значением.

5

инвалид

Если true, он создает слайд, который изначально отключен. Очевидно, по умолчанию используется значение false.

6

SetValue

Обновит значение ползунка и, таким образом, переместит ручку ползунка в соответствующую позицию.

7

setDisabled

Устанавливает ползунок в отключенное состояние (disabled = true).

8

setEnabled

Устанавливает ползунок во включенное состояние (disabled = false).

Ось

Определяет ориентацию элемента управления как горизонтальную или вертикальную . Ориентация по умолчанию горизонтальная .

Спектр

Определяет диапазон значений ползунка как экземпляр экземпляра Prototype ObjectRange. По умолчанию от 0 до 1.

Ценности

Определяет дискретный набор значений, которые может получить ползунок. Если опущен, все значения в пределах диапазона могут быть установлены.

sliderValue

Устанавливает начальное значение ползунка. Если опущено, значение, представленное крайним левым (или самым верхним) краем ползунка, является начальным значением.

инвалид

Если true, он создает слайд, который изначально отключен. Очевидно, по умолчанию используется значение false.

SetValue

Обновит значение ползунка и, таким образом, переместит ручку ползунка в соответствующую позицию.

setDisabled

Устанавливает ползунок в отключенное состояние (disabled = true).

setEnabled

Устанавливает ползунок во включенное состояние (disabled = false).

Вы можете предоставить следующие обратные вызовы в параметре options —

Sr.No Вариант и описание
1

onSlide

Вызывается всякий раз, когда ползунок перемещается путем перетаскивания. Вызываемая функция получает значение ползунка в качестве параметра.

2

по изменению

Вызывается всякий раз, когда ползунок завершил перемещение или его значение изменилось через функцию setSlider Value. Вызываемая функция получает значение ползунка в качестве параметра.

onSlide

Вызывается всякий раз, когда ползунок перемещается путем перетаскивания. Вызываемая функция получает значение ползунка в качестве параметра.

по изменению

Вызывается всякий раз, когда ползунок завершил перемещение или его значение изменилось через функцию setSlider Value. Вызываемая функция получает значение ползунка в качестве параметра.

Пример слайдеров

Live Demo 

<html>
   <head>
      <title>Sliders Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js?load = slider" ></script>
		
      <script type = "text/javascript">
         window.onload = function() {
            new Control.Slider('handle1' , 'track1',{
            range: $R(1,100), values: [1,25,50,75,100], sliderValue: 1, onChange: function(v){
               $('changed').innerHTML = 'Changed Value : '+v;
               },

            onSlide: function(v) {
               $('sliding').innerHTML = 'Sliding Value: '+v;
               }
            });
            new Control.Slider('handle2' , 'track2', {
               range: $R(1,100),
               axis:'vertical',
               sliderValue: 1,
               onChange: function(v){
                  $('changed').innerHTML = 'Changed Value : '+v;
               }

               onSlide: function(v) {
                  $('sliding').innerHTML = 'Sliding Value: '+v;
               }
            });
         }
      </script>
		
      <style type = "text/css">
         h1{ font-size: 1.5em; }
			
         .track {
            background-color: #aaa;
            position: relative;
            height: 0.5em; width: 10em;
            cursor: pointer; z-index: 0;
         }
			
         .handle {
            background-color: red;
            position: absolute;
            height: 1em; width: 0.25em; top: -0.25em;
            cursor: move; z-index: 2;
         }
			
         .track.vertical { 
            width: 0.5em; height: 10em; 
         }
			
         .track.vertical .handle {
            width: 1em; height: 0.25em; top: 0; left: -0.25em; 
         }
      </style>
   </head>

   <body>
      <h1>Simple sliders</h1>

      <div id = "track1" class = "track" style = "width: 20em;" >
         <div id = "handle1" class = "handle" style = "width: 0.5em;" ></div>
      </div>

      <p id = "sliding" ></p>
      <p id = "changed" ></p>

      <div id = "track2" class = "track vertical" style = "position: absolute; left: 25em;  top: 3em;" >
         <div id = "handle2" class = "handle" style = "height: 0.5em;" ></div>
      </div>
   </body>
</html>

Обратите внимание:

  • Вы можете изменить изображение слайдера любого слайдера, используя CSS. Используйте свойства CSS background-image: url (track.gif) и background-repeat: no-repeat, чтобы установить изображение слайдера.

  • Значение диапазона можно указать с помощью $ R (minValue, MaxValue). Например, $ R (1, 100).

  • Значение диапазона может быть указано в терминах конкретных значений. Например, значения: [1,25,50,75,100]. В этом случае ползунок получит только те дискретные значения, которые указаны при перемещении ручки.

  • В любое время значение ползунка можно установить под управлением программы, вызвав метод setValue () экземпляра ползунка, например: sliderInstance.setValue (50);

Вы можете изменить изображение слайдера любого слайдера, используя CSS. Используйте свойства CSS background-image: url (track.gif) и background-repeat: no-repeat, чтобы установить изображение слайдера.

Значение диапазона можно указать с помощью $ R (minValue, MaxValue). Например, $ R (1, 100).

Значение диапазона может быть указано в терминах конкретных значений. Например, значения: [1,25,50,75,100]. В этом случае ползунок получит только те дискретные значения, которые указаны при перемещении ручки.

В любое время значение ползунка можно установить под управлением программы, вызвав метод setValue () экземпляра ползунка, например: sliderInstance.setValue (50);

Это даст следующий результат —

38
Share: