mr_nvtsk-gaugejs v0.2.1

GaugeJS

Описание

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

Ключевые особенности:

• Поддержка любого начального угла и апертуры шкалы.

• Поддержка любого количества промежутков со своими визуальными стилями.

• Отображение любого количества шкал со своими визуальными стилями как снаружи счётчика, так и внутри него.

• Гибкая настройка всех визуальных элементов (цвета, ширина линий, отступы) при помощи JS и CSS.

• Высокая скорость работы "в динамике". При изменениях в отображении компонента визуальные элементы не перерисовываются, если они уже были созданы ранее: обновляются лишь их атрибуты.

Поддержка браузеров

Desktop: Chrome 1+, FireFox 1.5+, Internet Explorer 9+, Opera 9+, Safari 3+.

Mobile: iOS Safari 3.2+, Android Browser 3+.

Детальная информация о поддержке основных веб-движков.

Установка

NPM:

npm install mr_nvtsk-gaugejs

Использование

Использование нативного компонента:

Инициализация (в объекте настроек необходимо передавать как минимум контейнер, в который будет добавлен счётчик):

var gauge = Gauge({'container': HTMLElement});

Второй способ инициализации:

var gauge = new Gauge();
gauge.create({'container': HTMLElement});

Установка значения счётчика:

gauge.set(number);

Считывание значения счётчика:

var number = gauge.get();

Изменение компонента:

gauge.change(settings);

Удаление компонента:

gauge.destroy();

Использование jQuery плагина:

Инициализация (объект настроек передавать не обязательно):

$(element).Gauge(settings);

Установка значения счётчика:

$(element).Gauge('set', number);

Считывание значения счётчика:

var number = $(element).Gauge('get');

Изменение компонента:

$(element).Gauge('change', settings);

Удаление компонента:

$(element).Gauge('destroy');

API (methods)

change(settings) - меняет счётчик, где settings -- объект с настройками компонента (см. отдельное описание).

create(settings) - создаёт счётчик, где settings -- объект с настройками компонента (см. отдельное описание).

destroy - уничтожает счётчик.

get - возвращает значение счётчика.

hide - скрывает счётчик.

show - показывает счётчик.

set(value) - устанавливает текущее значение счётчика.

API (settings)

settings (настройки компонента):

settings.angles (настройки, связанные с углами счётчика):

settings.gauge (настройки, связанные со значениями счётчика):

settings.styles (настройки, связанные с визуальным отображением счётчика):

settings.styles.indicator (настройки, связанные с визуальным отображением индикатора счётчика):

settings.styles.range (настройки, связанные с видуальным отображением основного (расположен по всей апертуре счётчика) сектора линии окружности счётчика):

settings.styles.ranges (настройки, связанные с визуальным отображением дополнительных секторов линии окружности счётчика):

settings.styles.ranges.values (настройки значений, в пределах которых будет расположен сектор):

settings.styles.scales (настройки, связанные с визуальным отображением шкал счётчика):

settings.styles.scales.labels (настройки, связанные с отображением меток шкалы):

Более подробно о передаваемых компоненту настройках, а также о принципе изменения стилей при помощи CSS можно узнать ознакомившись с тестовой страницей, расположенной в каталоге example.

Примеры

Разработка

Установка зависимостей:

npm install

Сборка нативного компонента:

npm run build

Сборка jQuery-плагина:

npm run build-jquery

Проверка кода:

npm run check

Лицензия

GaugeJS создавался в качестве тестового проекта для устройства на работу в KudaGo.Ru. Но было бы глупо ограничивать его использование только сотрудниками компании KudaGo.Ru. Поэтому, если вы найдёте этот компонент или любую его часть интересной для себя, то можете использовать их свободно в любых целях.