jQuery на русском - slider(options)

Slyweb

Поиск функций jQuery

Характеристика функции

[Function] slider(options)

Плагин позволяет создать бегунок

Сигнатура

slider(options) → jQuery

Описание

jQuery UI Slider плагин превращает выбранные элементы в ползунок (бегунок/передвигаемый индикатор). Плагин поддерживает различные опции – многочисленные бегуноки, определяющие некоторую область. Ползунок может передвигаться с помощью мыши или клавиш вперед, назад, влево, вправо.
Все функции возвращают два аргумента: исходное событие браузера и обработанный ui объект, о котором указано ниже (только если в качестве второго параметра функции вы указали 'ui'):

Пример
Весь код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="jquery-ui-1.7.2.custom.css" 
rel="stylesheet" type="text/css"/>
<script src="jquery-1.3.2.min.js"></script>
<script src="jquery-ui-1.7.2.custom.min.js"></script>  
<script>
  $(document).ready(function(){

$(function() {
		$("#slider").slider();
	});


  });
</script>

</head>
<body class="iframe">


<div class="demo">

<div id="slider"></div>

</div><!-- End demo -->

<div style="display: none;" class="demo-description">

<p>The basic slider is horizontal and has a 
single handle that can be moved with the mouse 
or by using the arrow keys.</p>

</div><!-- End demo-description -->


</body>
</html>


<style>

#slider {margin-top:5%;}

</style>

Параметры

ui.handle

ui.value

Опции

Опция: animate

Опция определяет, двигается ли бегунок плавно, когда поьзователь нажал не на бегунок а на шкалу.

"По умолчанию установлено" false

Создать бегунок с опцией animate.

$('.selector').slider({ animate: true });

Получить или устанвоить опцию animate после запуска.

//получить опцию
var animate = $('.selector').slider('option', 'animate');
//установить опцию
$('.selector').slider('option', 'animate', true);

Опция: animate

Максимальное значение бегунка.

"По умолчанию установлено"100

Создать бегунок с опцией max.

$('.selector').slider({ max: 7 });

Получить или устанвоить опцию max после запуска.

//получить опцию
var max = $('.selector').slider('option', 'max');
//установить опцию
$('.selector').slider('option', 'max', 7);

Опция: min

Минимальное значение бегунка.

"По умолчанию установлено" 0

Создать бегунок с опцией min.

$('.selector').slider({ min: -7 });

Получить или устанвоить опцию min после запуска.

//получить опцию
var min = $('.selector').slider('option', 'min');
//установить опцию
$('.selector').slider('option', 'min', -7);

Опция: orientation

Обычно нет необходимости устанвливать данную опцию, потому что плагин автоматически определяет ориентацию бегунка. Если ориентаиця определена неправильно вы можете устанвоить её в опции как 'horizontal' или 'vertical'.

"По умолчанию установлено" auto

Создать бегунок с опцией orientation.

$('.selector').slider({ orientation: 'vertical' });

Получить или устанвоить опцию orientation после запуска.

//получить опцию
var orientation = $('.selector').slider('option', 'orientation');
//setter
$('.selector').slider('option', 'orientation', 'vertical');

Опция: range

Если устанволено true, бегунок определит, если вы имеете два бегунка и создаст диапозон между ними. Другие доступные значения - 'min' и 'max'. Минимальный диапозон идёт от бегунка, расположенного на минимальном значении промежутка. Максимальный диапозон идёт от бегунка, расположенного на максимальном значении диапозона.

"По умолчанию установлено" false

Создать бегунок с опцией range.

$('.selector').slider({ range: 'min' });

Получить или устанвоить опцию range после запуска.

//получить опцию
var range = $('.selector').slider('option', 'range');
//установить опцию
$('.selector').slider('option', 'range', 'min');

Опция: step

Опция устанавливает размер или сумму каждого промежутка или шага бегунка между минимальным и максимальным значением шкалы. Всё значение диапозона бегунка (max - min) должно быть делимо на количество шагов без остатка.

"По умолчанию установлено"2

Получить или устанвоить опцию step после запуска.

$('.selector').slider({ step: 5 });

Получить или устанвоить опцию range после запуска.

//получить опцию
var step = $('.selector').slider('option', 'step');
//установить опцию
$('.selector').slider('option', 'step', 5);

Опция: value

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

"По умолчанию установлено" : 0

Создать бегунок с опцией value.

$('.selector').slider({ value: 37 });

Получить или устанвоить опцию value после запуска.

//получить опцию
var value = $('.selector').slider('option', 'value');
//установить опцию
$('.selector').slider('option', 'value', 37);

Опция: values

Данныя опция может быть использована для указания множемства бегунков. Если опция range установлена как true, длина 'values' должна быть 2.

"По умолчанию установлено" null

Создать бегунок с опцией values.

$('.selector').slider({ values: [1,5,9] });

Получить или устанвоить опцию values после запуска.

//получить опцию
var values = $('.selector').slider('option', 'values');
//установить опцию
$('.selector').slider('option', 'values', [1,5,9]);

События

Событие: start

Событие возникает, когда пользователь начинает передвигать бегунок.

Уставноить функцию обратного вызова для обработки собутия start как инициализирующую опцию.

$('.selector').slider({
   start: function(event, ui) { ... }
});

Связать событие start с типом: slidestart.


$('.selector').bind('slidestart', function(event, ui) {
  ...
});

Событие: slide

Событие запускается при каждом перемещении курсора на протяжении всей шкалы. Используйте ui.value (single-handled sliders) дял получения значения текущего бегунка, $(..).slider('value', index) для получения значения другого бегунка. Возврат false прекратит перемещение, основанное на ui.value.

Уставноить функцию обратного вызова для обработки собутия slide как инициализирующую опцию.

 $('.selector').slider({
   slide: function(event, ui) { ... }
});

Связать событие slide с типом: slide.

$('.selector').bind('slide', function(event, ui) {
  ...
});

Событие: change

Событие запускается, когда перемещение бегунка завершается, или если значение изменено с помощью внутреннего кода (через опцию value). Опция получает аргументы event и ui. Используйте метод event.orginalEvent для определения изменилось ли значение с помощью мыши, клавиши, или с использвонием внутреннего кода. Используйте ui.value (для шкалы с одним бегунком) для получения текщего значения бегунка, $(this).slider('values', index) для получения значений других бегунков.

Уставноить функцию обратного вызова для обработки события change как инициализирующую опцию.

$('.selector').slider({
   change: function(event, ui) { ... }
});

ССвязать событие change через: slidechange.

$('.selector').bind('slidechange', function(event, ui) {
  ...
});

Событие: stop

Событие запускается, когда пользователь прекращеает передвижеине бегунка

Уставноить функцию обратного вызова для обработки собутия stop как инициализирующую опцию.


$('.selector').slider({
   stop: function(event, ui) { ... }
});

Связать событие stop через: slidestop.


$('.selector').bind('slidestop', function(event, ui) {
  ...
});

Методы

Метод: destroy

.slider( 'destroy' )

Удалить фукнкциональность, созданную данным плагином. Этот метод вернёт элемент к его предшествующему состоянию.

Метод: disable

.slider( 'disable' )

Отключить бегунок.

Метод: enable

.slider('enable')

Включить бегунок.

Метод: option

.slider( 'option' , optionName , [value] )

Получить или устанвоить опцию бегунка. Если значение не указано, функция получает опцию.

Метод: value

.slider( 'value' , [value] )

Получить или устанвоить значение бегунка. Для одного бегунка.

Метод: values

.slider( 'values' , index , [value] )

Получить или устанвоить значение опции бегунка. Для многочисленных бегунков или для диапозона между бегунками.

Тема:

Используемая тема jQuery UI

Плагин jQuery UI Slider использует jQuery UI CSS структуру для придания стиля, включающую цвета и фоновые текстуры. Мы рекомендуем использовать инструмент ThemeRoller для создания и загрузки тем, которые легко встраиваются и поддерживаются. Если нуждается более гдубокий уровень настройки, сущетсвует особый виджет классов ссылающийся на ui.draggable.css лист стилей, который может быть модифицирован. Данный класс подчеркнут жирным ниже.

Образец разметки jQuery UI CSS струтктуры классов

<div class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
   <a style="left: 0%;" class="ui-slider-handle ui-state-default ui-corner-all" href="#"></a>
</div>

Примечание: Данный образец разметки создан посредством плагина slider, это не разметка для того чтобы создать бегунок. Для этого достаточно следующей разметки <div><div>.

Примеры

Добавлено1.2

Версия jQuery 1.3.2 Документ создан 2009-02-21T00:32:39Z

Ошибки и опечатки
Предложения и жалобы
Поддержка сайта

Александр Ермаков. Хостинг - www.pwstudio.org

Руководство jQuery 1.4.2

Плагины jQuery UI

Эффекты