Начинаем третий по счету урок JQuery слайдер slider. Первые два были по JQuery UI на тему JQuery закладки и JQuery сортировка. Слайдер - является интерфейсом любого сайта или программы. Используется частенько при анимаций или выполнении определенных условий. Разновидностей по изящности и программному коду их большое множество, ну мы разберем наиболее простейшие, чтобы понять принцип их работы и действий.
Изучая рубрику сайта jqueryui.com, я решил выделить три основных простых слайдера, которые Вы сможете в дальнейшем грамотно адаптировать на своем ресурсе.И так, первым делом, как в предыдущих уроках по JQuery UI подключаем библиотеки и стили.
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
Слайдер задается функцией slider().
Пример первый. Простой слайдер.
JavaScript.
<script>
$(function() {
$( "#slider" ).slider();
});
</script>
Html.
В теги div под индефикатором slider выводится слайдер.
<div id="slider"></div>
Пример второй. Позиционный слайдер.
JavaScript.
Задается два начальных значения ширины слайдера (min и max), на котором откладываются два значения начала и конца точек отрезка (values) при загрузке скрипта. В #amount записываются координаты точек до изменения, а затем после изменения.
<script>
$(function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 500,
values: [ 25, 100 ],
slide: function( event, ui ) {
$( "#amount" ).val( "" + ui.values[ 0 ] +
" - " + ui.values[ 1 ] );
}
});
$( "#amount" ).val( "" + $( "#slider-range" )
.slider( "values", 0 ) +
" - " + $( "#slider-range" ).slider( "values", 1 ) );
});
</script>
Html.
В for="amount" выводится начало и конец точек отрезка. В теге div под индефикатором slider-range выводится сам слайдер.
<label for="amount"></label> <input type="text" id="amount" class="amount_input"/> <div id="slider-range"></div>
Пример третий. Вертикальный слайдер.
JavaScript.
Скрипт такой же как и предыдущий, но есть одно отличие, в параметре value задается только начальная точка.
<script>
$(function() {
$( "#slider-vertical" ).slider({
orientation: "vertical",
range: "min",
min: 0,
max: 100,
value: 60,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value );
}
});
$( "#amount" ).val( $( "#slider-vertical" )
.slider( "value" ) );
});
</script>
Html.
<label for="amount"></label> <input type="text" id="amount" class="amount_input"/> <div id="slider-vertical" style="height: 100px;"></div>