Виджет Dial yahoo

jQuery UI не единственная большая библиотека JavaScript. Предлагаю посмотреть пример работы Yahoo User Interface — сокращено YUI, это библиотека JavaScript и CSS с открытым исходным кодом разработанная Yahoo.com. На странице демонстрация красивого виджета YUI Dial, который подчеркивает замечательную работу библиотеки YUI.

В этом примере виджета YUI Dial показано следующее:

  1. Демонстрация большого диапазона с замечательным контролем
  2. Заголовок  “От мантии Земли до Хаббл”
  3. Атрибут расстояния в километрах.
  4. Регулятор событий, для управления интерактивным YUI
  5. Менять свойства виджета Dial методом нажатия на ссылку
  6. В центре регулятора, кнопка сброса

YUI Dial

Создать виджет Dial с помощью YUI

На странице HTML библиотека YUI подключается обычным способом. Если нужно сохранить на сервере, качаем с github.

<script src="http://yui.yahooapis.com/3.16.0/build/yui/yui-min.js"></script>

Дальше на странице HTML добавляем обязательный класс yui3-skin-sam к элементу <body> или к родительскому элементу виджета.

<body class="yui3-skin-sam"> <!-- Это нужный класс -->

Единственное требование для разметки Dial это сам элемент. Остальную разметку и CSS в данном примере используется только для визуализации телескопа Хаббл.

<div id="demo"></div>
к меню ↑

Структура Dial

Основные части регулятора:

  • Джойстик
  • Маркер
  • Ручка
  • Кнопка сброса

Джойстик — второстепенный элемент. Маркер всегда находится на фиксированном расстоянии от центра регулятора. Его положение в круге указывает на текущее свойство, чтобы изменить свойства, пользователь нажимает на джойстик и вращает ручку. Если не крутить, ручка занимает то же самое место, и маркер не показан. Если для регулирования используется клавиатура и маркер не отображается. Кнопка сброса возвращает свойства в начальную конфигурацию.

Основные части регулятора Dial
Структура разметки в финальном  Dial
к меню ↑

JavaScript для Dial

Событий у Dial может быть несколько:

YUI().use('dial', function(Y) {

    var sceneH = Y.one('#scene').get('region').height,
     subSea = 450,     viewFrameH = Y.one('#view_frame').get('region').height -2,
     zeroPt = 100,     originY = -sceneH + subSea + viewFrameH - zeroPt;
      Y.one('#scene').setStyle('top', originY + 'px');

    /**
     * valueChange событие Dial.
     * Устанавливает главные свойства CSS pictoral сцены земли к телескопу.
     * Эта сцена - скрыта.
     */
     setSceneY = function(e) {
         Y.one('#scene').setStyle('top', (originY + (e.newVal * 10)) + 'px');
    }

    var dial = new Y.Dial({
         min:-35,
         max:559,
         stepsPerRevolution:30,
         value: 0,
         diameter: 100,
         minorStep: 1,
         majorStep: 10,
         decimalPlaces: 2,
         strings:{label:'Километры:', resetStr: 'Сброс', tooltipHandle: 'Регулировать'},
        // построение времени событий
         after : {
             valueChange: Y.bind( setSceneY, dial )
        }
    });
     dial.render('#demo');

    // Функция, которая вызывает метод, устанавливает ее значение max config атрибут
    // Другие методы включают в себя,
    // _setToMin(), _resetDial(), _incrMinor(), _decrMinor(), _incrMajor(), _decrMajor(),
    var setDialToMax = function(e){
         e.preventDefault();
        this._setToMax();
    }

    // Вызов кнопки "Хаббл"
     Y.on('click', setDialToMax, '#a-hubble', dial);

});
к меню ↑

Обработчик событий

Код ниже для примера виджет Dial, вызывает обработчик событий. Вы можете использовать свойства Dial, на своё усмотрение, но в этом примере обработчик событий обновляет главные свойства CSS для сцены <div id="scene"> перемещение Хаббла к Земле. Эта сцена перемещается вверх или вниз с помощью элемента <div class="viewframe">, который использует CSSoverflow:hidden;. Значение e.newVal умножает на 10, так, чтобы сцена перемещалась на 10px для каждого километра.

/**
  * Циферблат событий valueChange.
  * свойства CSS значение сцен земли и "Хаббл".
  * Эта сцена является абсолютной, позиционируется внутри div div
  * переполнение значений скрыто.
  */
setSceneY = function(e) {
Y.one('#scene').setStyle('top', (originY + (e.newVal * 10)) + 'px');
}
к меню ↑

Заключение

В примере виджета YUI Dial продемонстрирован небольшой пример работы Yahoo User Interface. Библиотека YUI довольно таки не плохая, её смело можно использовать как альтернативу скриптам jQuery. Скачать полный код примера виджета YUI Dial: Виджет YUI Dial