Meteora

Вже є безліч javascript фреймворків, інструментів, безліч обговорювалося і тут, проте один дуже цікавий проект ми упустили з виду. Итак, встречайте.

Сам по собі це не самостійний фреймворк, це набір віджетів (як їх називають розробники проекту). Сам пакет заснований на MooTools. Однак має вже безліч вбудованих функцій, таких як автокомпліт, календарі тощо.

Сам дистрибутив займає близько мегабайту і складається з безлічі папок. Упакований варіант пакета (в архіві тека compact-source) займає 380Кб. У ньому і аркуші стилів, і піктограми потрібні для біліотек, і самі бібліотеки. Цікаво те, що для підключення цього пакета до вашого сайту необхідно підключити тільки один файл скрипту - мінімальне ядро.

<скрипт type=«text/javascript» src="/"/js/meteora/meteora.js"" />

А якщо треба підвантажити якийсь компонент (званий Control), то вже можна використовувати javascript. наприклад:

Meteora.uses('Control.Controlname');

Таким чином ми завантажуємо тільки ті компоненти, що на потрібні і цілком природним шляхом.

Після того, як ми завантажили Control ми можемо створювати об'єкт

new ControlName(

'objectId',

{

option1: 'value1',

option2: 'value2'

}

);

У різних Control ці параметри різні, але всі вони добре документовані

Для вирішення проблем, пов'язаних з тим, що не встигає завантажиться DOM є стандартне рішення

Meteora.onStart(

function() {

new ControlName(

domNode,

{

option1: 'value1',

option2: 'value2'

}

);

}

);

Продовжувати не стану, так як на офсайті і так все зрозуміло. Просто опишу мій випадок, як я власне і знайшов цей набір.

Для інтерфейсу мені знадобилося поле типу SpinButton (Це де поруч з текстовим полем є двонаправлена стрілка для зміни цифр або ще чогось в полі) де потрібно було вибирати певну суму з заданими межами (від 3 до «вісімки-на-боці») і кроком 0.10

На моє здивування це виявилося досить просто.

Я підключив цей пакет, як зазначено вище, підвантажив потрібну мені бібліотеку

Meteora.uses('Control.Spinbutton');

і ввів параметри спину.

Meteora.onStart(

function () {

new Spinbutton('amount', {

'defaultValue': 3.0,

'minValue': 3,

'step': 0.1

});

}