sevenSeg.js - семисегментный дисплей на jQuery

Добавить комментарий
Никита Киселев

sevenSeg.js - маленький jQuery плагин, который позволяет создавать семисегментные дисплеи на страницах сайта, используя SVG графику.

Демо | Официальный сайт

Особенности плагина:

  • Без изображений. Вся графика отрисовывается с помощью HTML SVG что позволяет выводить дисплей любого размера.
  • Не нужно подключать внешний CSS файл. Но Вы можете переопределить стили в своём CSS файле.
  • Поддержка Knockout MVVM.
  • Лицензия MIT.

Подключение

Для работы семисегментного индикатора необходимо подключить к своей странице jQuery, jQuery UI и, если используется Knockout, то подключить его. Пример:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<script src="/assets/js/sevenSeg.js"></script>

HTML

Семисегментный индикатор sevenSeg.js можно отобразить в любом div элементе страницы. Например:

<div id="seven-seg"></div>

Инициализация

Простейшая инициализация индикатора:

$("#seven-seg").sevenSeg({ value: 5 });

simple-seven-seg.png

Здесь свойство value означает цифру, которая отобразит индикатор. Так же можно добавить немного CSS, чтобы ограничить размеры div'a, например:

#seven-seg {
    width: 40px;
    height: 40px;
    padding: 5px;
    background: black;
}

Примеры sevenSeg.js

С помощью sevenSeg.js можно выводить несколько цифр, например:

seven-seg-array.png

<div id="seven-seg-array"></div>
<script>
    $("#seven-seg-array").sevenSeg({ digits: 3, value: 5.23 });
</script>

Стилизация индикатора

seven-seg-style.png

<div id="seven-seg-style"></div>
<script>
    $("#seven-seg-style").sevenSeg({
        digits:5,
        value:-98.76,
        colorOff: "#003200",
        colorOn: "Lime",
        slant: 10
    });
</script>

Доступные настройки

options: {
    // Количество цифр, отображаемых в дисплее
    digits: 1,

    // Цифра или число, которое будет отображаться на дисплее
    // Если установить = null, то покажет пустой дисплей.
    value: null,

    // Устанавливает возможность изменять значение индикатора колесом мыши.
    // По умолчанию значение изменяется на 1.
    allowInput: false,

    // Устанавливает шаг изменения значения индикатора для события
    // предыдущей опции (allowInput = true)
    step: 1,

    // Эта опция отвечает за число цифр после запятой.
    // Если установлено -1, то десятичное число отображается как есть
    // Если установлено 0, то округляет до целых
    // Если установлено 1, 2 или более, то округляет до десятых, сотых и т.д.
    decimalPlaces: -1,

    // Задаёт цвет активных сегментов индикатора (red по умолчанию)
    // Например '#eee'
    colorOn: null,

    // Задаёт цвет неактивных сегментов индикатора 
    // например '#e9e9e9'
    colorOff: null,

    // Задаёт цвет фона индикатора. Например '#f0f0f0'
    colorBackground: null,

    // Задаёт степень наклона цифр (например 10)
    slant: 0,  

    // Флаг отвечает за отображение десятичной точки.
    // Если true, то точка отображается,
    // Если false, то точка не отображается
    decimalPoint: true
}

Больше примеров этого плагина Вы можете посмотреть на официальном сайте sevenSeg.js.