Документация

На этой странице описаны пользовательские функции фреймворка и приведены примеры их работы. Исходный текст библиотеки может содержать дополнительные служебные функции, которые нужны для нормальной работы приложения.

Функции выводят информацию об ошибках в своих аргументах в консоль браузера. Для включения консоли в различных браузерах воспользуйтесь следующими комбинациями клавиш:

• Ctrl + Shift + J - в Google Chrome;
• Ctrl + Shift + K - в Mozilla Firefox;
• F12 - в Internet Explorer, Microsoft Edge;
• Ctrl + Shift + I - в Opera;
• Ctrl + Alt + I - в Safari.

конструктор

При создании объекта progressBar конструктору нужно передать один аргумент - идентификатор элемента HTML, в котором создаётся объект.

<div id="bar1"></div>
<script>
 let bar1 = new progressBar('bar1');
</script>

Предполагается, что к документу предварительно подключён файл progressBar.js, например, следующим кодом:

<script src="js/progressBar.js"></script>

В данном случае файл progressBar.js находится во вложенной папке js.

animate (ms)

Выполняет анимацию за ms миллисекунд от позиции start до позиции end включительно.

Позицию start можно получить и установить методами getStart () и setStart () соответственно, позицию end - методами getEnd () и setEnd ().

<div id="bar1"></div>
<script>
 let bar1 = new progressBar('bar1');
 bar1.animate(3000); //3 секунды
</script>

animateTo (ms, pos1, pos2)

Выполняет анимацию за ms миллисекунд от позиции pos1 до позиции pos2 включительно.

Следующие вызовы метода эквивалентны:

<div id="bar1"></div>
<script>
 bar1 = new progressBar('bar1');
 bar1.animateTo(3000,0,100);
</script>

<div id="bar1"></div>
<script>
 bar1 = new progressBar('bar1');
 bar1.animateTo(3000,100,0);
</script>

<div id="bar1"></div>
<script>
 bar1 = new progressBar('bar1');
 let [start, end] = bar1.getLimits();
 bar1.animateTo(3000,start,end);
</script>

<div id="bar1"></div>
<script>
 bar1 = new progressBar('bar1');
 let [start, end] = bar1.getLimits();
 bar1.animateTo(3000,end,start);
</script>

Расчёт текущей позиции прогреccа выполняется по следующей схеме:

getColors ()

Получает массив из трёх цветов - основной фон, цвет рамки и закрашивания, цвет текста.

<div id="bar1"></div>
<div id="info"></div>
<script>
 let bar1 = new progressBar('bar1');
 bar1.setColors ('#e5e5e5','pink','#330');
 bar1.setState (50);
 let [col, bCol, tCol] = bar1.getColors(); 
 info.innerHTML = 
  'Цвет фона='+col+'<br>'+
  'Цвет заполнения='+bCol+'<br>'+
  'Цвет текста='+tCol; 
</script>

getEnd ()

Получает конечное значение прогресса.

<div id="bar1"></div>
<script>
 let bar1 = new progressBar('bar1');
 bar1.setLimits (-50,50);
 alert (bar1.getEnd()); //50
</script>

getHTML ()

Получает строку с разметкой HTML объекта. Строка не зависит от внешних идентификаторов элементов или стилей.

<div id="bar1"></div>
<div id="code1"></div>
<script>
 bar1 = new progressBar('bar1');
 code1.innetText = bar1.getHTML();
</script>

getLimits ()

Получает массив с двумя значениями - getStart() и getEnd().

<div id="bar1"></div>
<script>
 let bar1 = new progressBar('bar1');
 bar1.setLimits (-50,50);
 alert (bar1.getLimits().join(','));
</script>

getStart ()

Получает начальное значение прогресса.

<div id="bar1"></div>
<script>
 let bar1 = new progressBar('bar1');
 bar1.setLimits (-50,50);
 alert (bar1.getStart()); //-50
</script>

getState ()

Получает текущее состояние прогресса.

<div id="bar1"></div>
<script>
 let bar1 = new progressBar('bar1');
 bar1.setLimits (100,200);
 let state = bar1.getState ();
 alert (state); //100
</script>

getWidth ()

Получает текущую ширину бара в пикселях.

<div id="bar1"></div>
<script>
 let bar1 = new progressBar('bar1');
 alert (bar1.getWidth()); //100
</script>

reset ()

Сбрасывает настройки бара к значениям по умолчанию:

• метка start - значение 0;
• метка end - значение 100;
• состояние state - значение 0;
• ширина width - значение 100;
• цвета по умолчанию.

<div id="bar1"></div>
<script>
 let bar1 = new progressBar('bar1');
 bar1.setLimits(-100,0);
 bar1.setState(-30);
 bar1.setWidth(150);
 bar1.setColors('white','#808080','rgb(0,64,128)');
 bar1.reset();
</script>

setColors (col, bCol, tCol)

Устанавливает цвета, может быть вызвана с нулём аргументов (цвета будут сброшены к значениям по умолчанию) или с одним, двумя или тремя аргументами, следующими в порядке:

1. цвет основного фона (по умолчанию #eeeeee);
2. цвет рамки и закрашивания (по умолчанию #00bb33);
3. цвет текста (по умолчанию #000000).

Воспринимает все осовные способы записи цвета, поддерживаемые браузерами.

<div id="bar1"></div>
<div id="colors"></div>
<script>
 let bar1 = new progressBar('bar1');
 bar1.setColors('red','green','blue');
 let elem = document.getElementById('colors');
 let cols = bar1.getColors();
 elem.innerText = cols.join(';'); //red;green;blue
 bar1.setColors('rgb(255,100,0)');
 cols = bar1.getColors();
 elem.innerText = cols.join(';'); //rgb(255,100,0);#0b3;#000
</script>

setEnd (end)

Устанавливает конечное значение прогресса.

<div id="bar1"></div>
<script>
 let bar1 = new progressBar('bar1');
 bar1.setEnd (500);
</script>

setLimits (start, end)

Устанавливает начальное и конечное значения прогресса. Эти два кода эквивалентны:

<div id="bar1"></div>
<script>
 let bar1 = new progressBar('bar1');
 bar1.setLimits (100,200);
</script>

<div id="bar1"></div>
<script>
 let bar1 = new progressBar('bar1');
 bar1.setStart (100);
 bar1.setEnd (200);
</script>

setStart (start)

Устанавливает начальное значение прогресса.

<div id="bar1"></div>
<script>
 let bar1 = new progressBar('bar1');
 bar1.setStart (500);
</script>

setState (state)

Устанавливает текущее состояние прогресса.

<div id="bar1"></div>
<script>
 let bar1 = new progressBar('bar1');
 bar1.setLimits (100,200);
 bar1.setState (400);
 alert (bar1.getState()); //200
</script>

setWidth (width)

Устанавливает текущую ширину бара в пикселях.

<div id="bar1"></div>
<script>
 let bar1 = new progressBar('bar1');
 bar1.setWidth(500);
</script>