16 марта 2013
5978
JQuery слайдер slider, jqueryui слайдер

JQuery слайдер slider

JQuery
Демонстрация » Скачать »

Начинаем третий по счету урок 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>

 

 



Источник материала »