Слайдер jQuery UI

В данном уроке мы сделаем небольшой симпатичный слайдер с использованием jQuery UI.

 

HTML

Для слайдера используются три элемента. Первый элемент предназначен для реализации слайдера, второй  - для индикации текущего значения, а третий - скрытое поле формы для передачи данных на сервер.

        <div class="slider"></div> 
        <div id="slider-result">50</div>   
  	     <input type="hidden" id="hidden"/>

И обязательно надо включить библиотеки в код страницы (следующие строки кода добавляются в разделе head ):

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> 


 

CSS

Используем следующие стили для оформления слайдера:

/*Фон слайдера*/
.slider {
width:230px;
height:11px;
background:url(slider-bg.png);
position:relative;
margin:0;
padding:0 10px;
}

/*Стиль кнопки слайдера*/
.ui-slider-handle {
width:24px;
height:24px;
position:absolute;
top:-7px;
margin-left:-12px;
z-index:200;
background:url(slider-button.png);
}

/*Элемент div результата, в котором выводится значение слайдера*/
#slider-result {
font-size:50px;
height:200px;
font-family:Arial, Helvetica, sans-serif;
color:#fff;
width:250px;
text-align:center;
text-shadow:0 1px 1px #000;
font-weight:700;
padding:20px 0;
}

/*Полоска заполнителя слайдера*/
.ui-widget-header {
background:url(fill.png) no-repeat left;
height:8px;
left:1px;
top:1px;
position:absolute;
}

a {
outline:none;
-moz-outline-style:none;
}

 

JavaScript

А теперь можно подключить JavaScript для формирования слайдера. jQuery UI является отличным инструментом для реализации таких элементов интерфейса:

	        $( ".slider" ).slider({
   	        	animate: true,
                	range: "min",
                	value: 50,
                	min: 10,
                	max: 100,
			        step: 10,
                
			//Получаем значение и выводим его на странице
                	slide: function( event, ui ) {
                    		$( "#slider-result" ).html( ui.value );
                	},

			//Обновляем скрытое поле формы, так что можно передать данные с помощью формы
                	change: function(event, ui) { 
                		$('#hidden').attr('value', ui.value);
                	}
			
		});


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/d0ttwmn4Igk/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Слайдер jQuery UI | | 2012-06-19 12:01:38 | | Статьи Web-мастеру | | В данном уроке мы сделаем небольшой симпатичный слайдер с использованием jQuery UI. HTMLДля слайдера используются три элемента. Первый элемент предназначен для реализации слайдера, второй  - для | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: