Виджет progressbar

Виджет progressbar используется для создания индикатора процесса. Он сообщает пользователю о ходе выполнения какой-нибудь задачи. Например:

<div id="progress"></div>
<script type="text/javascript">
$(function(){
		
	$('#progress').progressbar();
});
</script>

Свойства виджета progressbar

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

• value: текущее значение прогрессбара. Например: $('#progress').progressbar({value:33})

  

  По умолчанию значение свойства равно 0 и не может быть выше значения свойства max

  Также может принимать булевое значение: если имеет значение false, то прогрессбар имеет неопределенную шкалу значений.

• disabled: отключает прогрессбар, если установлено значение true ($('#progress').progressbar({disabled:true, value:25})). По умолчанию имеет значение false.

• max: указывает максимальное значение прогрессбара. Например, $('#progress').progressbar({max:200}). По умолчанию имеет значение 100.

Методы виджета

Прогрессбар имеет следующие методы:

• progressbar("disable"): делает прогрессбар недоступным: $("#progress").progressbar("disable");

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

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

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

• progressbar("option"): позволяет получить или установить значения свойств прогрессбара:

  <div id="progress"></div>
  <p><button id="getVal">Получить значение</button></p>
  <p><input type="text" id="val" /> <button id="setVal">Установить значение</button></p>
  <script type="text/javascript">
  $(function(){
  		
  	$('#progress').progressbar({value:25});
  	$('#getVal').button().click(function(){
  		// получаем значение
  		var val=$('#progress').progressbar('option', 'value');
  		alert("Значение индикатора: "+val);
  	});
  	$('#setVal').button().click(function(){
  		// устанавливаем значение
  		var val = parseInt($('#val').val());
  		if(val>100 || val<0){
  			alert('Введено недопустимое значение');
  		}
  		else{
  			$('#progress').progressbar('option', 'value', val);
  		}
  	});
  });
  </script>
  

  С помощью первой кнопки мы получаем значение, передавая в качестве второго параметра после "option" название свойства, которое надо получить. А с помощью второй кнопки у свойства прогрессбара устанавливается значение, введенное в текстовое поле - его мы передаем в качестве третьего параметра метода.

• Дополнительно виджет реализует метод progressbar("value"), который возвращает значение свойства value. Передавая в качестве второго параметра числовое значение, мы можем установить значение индикатора: $('#progress').progressbar('value', 35);

События виджета

Для прогрессбара определены три события:

• change(event, ui): возникает при изменении значения прогрессбара, например

  $('#progress').progressbar({value:25, change: function(event, ui){
  			console.log('value has changed');
  		}
  	});
  

• complete(event, ui): возникает, когда значение прогрессбара будет равно max. Например:

  $('#progress').progressbar({complete: function(event, ui){
  			console.log('value is equal to maximum');
  		}
  	});
  

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