[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="http://test-drupal.ru/themes/slyweb/css/jquery-ui-1.7.2.custom.css"
rel="stylesheet" type="text/css"/>
<script src="http://test-drupal.ru/themes/slyweb/js/jquery-1.3.2.min.js"></script>
<script src="http://test-drupal.ru/themes/slyweb/js/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
Опция определяет, двигается ли бегунок плавно, когда поьзователь нажал не на бегунок а на шкалу.
"По умолчанию установлено" false
Создать бегунок с опцией animate.
$('.selector').slider({ animate: true });
Получить или устанвоить опцию animate после запуска.
//получить опцию
var animate = $('.selector').slider('option', 'animate');
//установить опцию
$('.selector').slider('option', 'animate', true);
Максимальное значение бегунка.
"По умолчанию установлено"100
Создать бегунок с опцией max.
$('.selector').slider({ max: 7 });
Получить или устанвоить опцию max после запуска.
//получить опцию
var max = $('.selector').slider('option', 'max');
//установить опцию
$('.selector').slider('option', 'max', 7);
Минимальное значение бегунка.
"По умолчанию установлено" 0
Создать бегунок с опцией min.
$('.selector').slider({ min: -7 });
Получить или устанвоить опцию min после запуска.
//получить опцию
var min = $('.selector').slider('option', 'min');
//установить опцию
$('.selector').slider('option', 'min', -7);
Обычно нет необходимости устанвливать данную опцию, потому что плагин автоматически определяет ориентацию бегунка. Если ориентаиця определена неправильно вы можете устанвоить её в опции как 'horizontal' или 'vertical'.
"По умолчанию установлено" auto
Создать бегунок с опцией orientation.
$('.selector').slider({ orientation: 'vertical' });
Получить или устанвоить опцию orientation после запуска.
//получить опцию
var orientation = $('.selector').slider('option', 'orientation');
//setter
$('.selector').slider('option', 'orientation', 'vertical');
Если устанволено true, бегунок определит, если вы имеете два бегунка и создаст диапозон между ними. Другие доступные значения - 'min' и 'max'. Минимальный диапозон идёт от бегунка, расположенного на минимальном значении промежутка. Максимальный диапозон идёт от бегунка, расположенного на максимальном значении диапозона.
"По умолчанию установлено" false
Создать бегунок с опцией range.
$('.selector').slider({ range: 'min' });
Получить или устанвоить опцию range после запуска.
//получить опцию
var range = $('.selector').slider('option', 'range');
//установить опцию
$('.selector').slider('option', 'range', 'min');
Опция устанавливает размер или сумму каждого промежутка или шага бегунка между минимальным и максимальным значением шкалы. Всё значение диапозона бегунка (max - min) должно быть делимо на количество шагов без остатка.
"По умолчанию установлено"2
Получить или устанвоить опцию step после запуска.
$('.selector').slider({ step: 5 });
Получить или устанвоить опцию range после запуска.
//получить опцию
var step = $('.selector').slider('option', 'step');
//установить опцию
$('.selector').slider('option', 'step', 5);
Опция устанавливает значение бегунка, если существует только один. Если их несколько, устанавливает значение первого бегунка.
"По умолчанию установлено" : 0
Создать бегунок с опцией value.
$('.selector').slider({ value: 37 });
Получить или устанвоить опцию value после запуска.
//получить опцию
var value = $('.selector').slider('option', 'value');
//установить опцию
$('.selector').slider('option', 'value', 37);
Данныя опция может быть использована для указания множемства бегунков. Если опция 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 как инициализирующую опцию.
$('.selector').slider({
start: function(event, ui) { ... }
});
Связать событие start с типом: slidestart.
$('.selector').bind('slidestart', function(event, ui) {
...
});
Событие запускается при каждом перемещении курсора на протяжении всей шкалы. Используйте 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) {
...
});
Событие запускается, когда перемещение бегунка завершается, или если значение изменено с помощью внутреннего кода (через опцию 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 как инициализирующую опцию.
$('.selector').slider({
stop: function(event, ui) { ... }
});
Связать событие stop через: slidestop.
$('.selector').bind('slidestop', function(event, ui) {
...
});
.slider( 'destroy' )
Удалить фукнкциональность, созданную данным плагином. Этот метод вернёт элемент к его предшествующему состоянию.
.slider( 'disable' )
Отключить бегунок.
.slider('enable')
Включить бегунок.
.slider( 'option' , optionName , [value] )
Получить или устанвоить опцию бегунка. Если значение не указано, функция получает опцию.
.slider( 'value' , [value] )
Получить или устанвоить значение бегунка. Для одного бегунка.
.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>.
Версия jQuery 1.3.2
Документ создан 2009-02-21T00:32:39Z
