Виджет слайдер jQuery

Последнее обновление: 1.11.2015

Виджет slider создает функциональность ползунка:

<div id="slider"></div>
<script type="text/javascript">
$(function(){
		
	$('#slider').slider();
});
</script>
Виджет slider в jqueryui

Стилизация

Используя классы, создаваемые виджетом, можно настроить его стилизацию. При применении виджета к элементу добавляется класс ui-slider. Настроим стилизацию этого класса:

<html>
<head>
<link rel="stylesheet" type="text/css" href="jquery-ui-1.10.3.custom.min.css"></style>
<script src="jquery-2.0.2.min.js"></script>
<script src="jquery-ui-1.10.3.custom.min.js"></script>
<style>
.ui-slider {
	background: #FF9999; 
	margin: 10%;
	width: 200px;
}
</style>
</head>
<body>
<div id="slider"></div>
<script type="text/javascript">
$(function(){
		
	$('#slider').slider();
});
</script>
</body>
</html>

Свойства слайдера

Используя следующие свойства слайдера, можно выполнить более точную его настройку:

  • aimate: устанавливает скорость анимации. Мы можем передать в качестве значения названия скоростей, например, "fast" (быстрая анимация) и "slow" (медленная анимация).($('#slider').slider({ animate: 'slow' }))

    Также можно задать числовое значение, указывающее продолжительность анимации в миллисекундах ($('#slider').slider({ animate: 900 }))

  • disabled: при установке значения true делает слайдер недоступным

  • max: максимальное значение слайдера, по умолчанию равно 100

  • min: минимальное значение слайдера, по умолчанию равно 0

  • orientation: ориентация слайдера, может быть горизонтальной (значение по умолчанию - "horizontal"), так и вертикальной ("vertical"). Например: $('#slider').slider({orientation:'vertical'})

  • range: указывает, будет ли стилизоваться та часть ползунка, которая была пройдена бегунком

    Может принимать булевое значение. Если имеет значение true, то прошедшая часть слайдера стилизуется. По умолчанию имеет значение false, поэтому никакой стилизации не происходит.

    Также может иметь строковые значения min и max. Если равно min, то стилизация, то есть окрашивание будет производиться сначала отсчетов слайдера, если max - то с конца: $('#slider').slider({range: 'max' })

  • step: шаг приращения бегунка слайдера, по умолчанию равен 1

  • value: определяет значение бегунка слайдера

  • values: с помощью этого свойства мы можем задать у слайдера сразу несколько бегунков: $('#slider').slider({values: [ 10, 25, 50]})

Методы слайдера

Слайдер обладает следующими методами:

  • slider("disable"): делает слайдер недоступным: $("#slider").slider("disable");

  • slider("enable"): делает слайдер доступным для взаимодействия

  • slider("destroy"): удаляет функциональность виджета slider у элемента

  • slider("widget"): возвращает объект jQuery, представляющий виджет (var widget = $("#slider").slider("widget");)

  • slider("option"): позволяет получить или установить значения свойств слайдера. Например, установим и получим значение свойства value:

    	$('#slider').slider();
	// установка
	$('#slider').slider('option', 'value', 30);
	// получение значения
	var val=$('#slider').slider('option', 'value');
	console.log(val);

  • slider("value"): возвращает или устанавливает значение свойства value. Например, получим значение $('#slider').slider('value');. А передавая в качестве второго параметра числовое значение, мы можем установить значение бегунка: $('#slider').slider('value', 44);

  • Поскольку у слайдера может быть несколько бегунков, то у метода slider('value') есть двойник, помогающий получить или установить сразу несколько значений - для каждого бегунка. Например, получим все значения:

    	// создание виджета
	$('#slider').slider({values: [10,80]});
	// установка значений
	$('#slider').slider('values', [30,60]);
	// получение значений
	var vals=$('#slider').slider('values');
	console.log(vals);

События слайдера

Слайдер обладает несколькими событиями, которые помогают отслеживать его изменения:

  • change(event, ui): событие возникает, когда пользователь двигает бегунок слайдера, а также когда значение свойства value изменяется программным способом

  • create(event, ui): возникает при создании виджета

  • slide(event, ui): возникает при перемещении мыши вдоль полосы слайдера

  • start(event, ui): событие возникает, когда пользователь начинает перемещать бегунок слайдера

  • stop(event, ui): событие возникает, когда пользователь завершает перемещать бегунок слайдера

Теперь применим события слайдера:

<h3>Слайдер</h3>
<div id="slider"></div> <br />
Текущее значение слайдера: <span id="sliderValue"></span>
<script type="text/javascript">
$(function(){
		
	$('#slider').slider({
		change: function (event, ui){
			var val = $('#slider').slider('value');
			$('#sliderValue').html(val);
		},
		start: function(event, ui){
			console.log('Начало движения слайдера');
		},
		slide: function(event, ui){
			console.log('Перемещение слайдера');
		},
		stop: function(event, ui){
			console.log('Завершение движения слайдера');
		}
	});
});
</script>

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850