Опубликовано admin - вт, 05/01/2018 - 23:02
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

Опция: animate


Опция: animate


Опция: min


Опция: orientation


Опция: range


Опция: step


Опция: value


Опция: values


Событие: start

Событие: slide

Событие: change

Событие: stop

Метод: destroy

Метод: disable

Метод: enable

Метод: option

Метод: value

Метод: values

Используемая тема 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>.

На разработку сайта! Скидки до 20%!