MooTools українською http://mootools.org.ua Історія одного JavaScript фреймворка Sat, 13 Feb 2010 18:49:41 +0000 http://wordpress.org/?v=2.5 en MooLego UI — інтерфейс користувача http://mootools.org.ua/moolego-ui-interfejs-korystuvacha/ http://mootools.org.ua/moolego-ui-interfejs-korystuvacha/#comments Sat, 13 Feb 2010 18:38:30 +0000 admin http://mootools.org.ua/?p=48 MooLego UI — невеликий, розширюваний, об’єктно-орієнтований фреймворк для побудови інтерфейсів користувача, що базується на MooTools. Як заявлено на офіційному сайті, MooLego UI дозволяє писати потужні, гнучкі та крос-браузерні веб-додатки з елегантним, добре документованим API.

Вікна в MooLego UI

Рис.1. Вікна в MooLego UI.

MooLego UI не використовує ні зображень, ні CSS файлів, для його роботи достатньо підключити JavaScript-файли. Розробники MooLego UI намагаються зберегти потужність, розширюваність і елегантний синтаксис коду, які притаманні фреймворку MooTools. MooLego UI випущено під ліцензією Open Source MIT.

Примітка! Проект молодий і тому необстріляний, але вартий вашої уваги. Тому зайдіть на його сайт і спробуйте в дії.

Заявлена сумісність

MooLego UI сумісний з:

  • Safari 3+,
  • ~ Internet Explorer 6, Internet Explorer 7+,
  • Firefox 2+ (Gecko),
  • Opera 9+,
  • Google Chrome.
]]> http://mootools.org.ua/moolego-ui-interfejs-korystuvacha/feed/ vlaCalendar v.2 — Vista-подібний AJAX календар http://mootools.org.ua/vlacalendar-v2-vista-podibnyj-ajax-kalendar/ http://mootools.org.ua/vlacalendar-v2-vista-podibnyj-ajax-kalendar/#comments Fri, 12 Feb 2010 22:10:45 +0000 admin http://mootools.org.ua/?p=47 vlaCalendar v.2 — красивий та такий, що легко налаштовується, AJAX календар а-ля Windows Vista. vlaCalendar версії 2.1 є сумісним з MooTools 1.2, а vlaCalendar версії 2.0 — з MooTools 1.11 та 1.2b2 бета.

Vista-подібний календар

Рис.1. Vista-подібний календар.

Календар vlaCalendar був протестований в:

  • IE7 на Vista і XP SP2;
  • IE6 на XP SP2;
  • Firefox 2 та 3;
  • Opera 9—9.5;
  • Safari 3.1 під Windows;
  • Google Chrome.

Використання

Включіть наступні JavaScript-файли, які ви завантажите зі сайту проекту:

  • mootools-1.2-core.js та
  • vlaCal-v2.1.js

в шапку вашого HTML-документа (обгорніть в теґ <head>). За замовчуванням JavaScript-файли лежать в папці jslib/.

Примітка! Для отримання кращого результату використовуйте XHTML DOCTYPE: ІЕ надає календарю “погану” висоту при використанні DOCTYPE HTML 4.01.

Календар в стилі Adobe CS3 GUI

Рис.2. Календар в стилі Adobe CS3 GUI.

Та ж сама історія зі стилями. Включіть vlaCal-v2.1.css та інші стильові файли в шапку вашого HTML-документа. За замовчуванням стилі лежать в папці styles/.

Календар в стилі Apple OSX Tiger

Рис.3. Календар в стилі Apple OSX Tiger.

<head>
    [...]
    <script type="text/javascript" src="jslib/mootools-1.2-core.js"></script>
    <script type="text/javascript" src="jslib/vlaCal-v2.1.js"></script>
    <link type="text/css" href="styles/vlaCal-v2.1.css" rel="stylesheet" />
    [...]
</head>

Екземпляр календаря чи поля для вибору дати (datepicker) має бути створений після того, як DOM буде готовий. Це робиться за допомогою MooTools-події domready:

<head>
    [...]
    <script type="text/javascript">
        window.addEvent('domready', function() {
            // поле для вибору дати
            new vlaDatePicker('textbox-id');
            // календар
            new vlaCalendar('block-element-id');
        });
    </script>
    [...]
</head>

PHP-файли використовуються для створення HTML-календаря і лежать за замовчанням в папці inc/.

Аргументи

new vlaDatePicker(string element [, object options])
new vlaCalendar(string element [, object options]);
  • element — ідентифікатор HTML-елемента.
  • options — широкий вибір налаштувань для оформлення вигляду і формату календаря.

Налаштувань є чимало, тому на всіх зупинятись не буду. Опишу лише дійсно корисні.

Налаштування vlaCalendar

  • startMonday — дозволяє задати перший день тижня; це або понеділок (Monday), або неділя (Sunday), що характерно для США. За замовчуванням стоїть false, тобто неділя.
  • weekDayLabels — скорочені назви днів тижня (за замовчуванням — Mo, Tu, We, …).
  • monthLabels — назви місяців (за замовчуванням — January, February, March, …).
  • monthSmallLabels — короткі назви місяців (за замовчуванням — Jan, Feb, Mar, …).

Налаштування vlaDatePicker

  • leadingZero — вказує, чи потрібно ставити нуль перед числом (наприклад, 09 замість 9). За замовчуванням — true.
  • format — визначає формат, в якому буде показана дата (порядок для місяця, дня і року — d/m/y, m/d/y, y/d/m, y/m/d).

Для детальнішої довідки та перегляду демонстраційних прикладів відвідайте сторінку http://dev.base86.com/scripts/vista-like_ajax_calendar_version_2.html.

]]> http://mootools.org.ua/vlacalendar-v2-vista-podibnyj-ajax-kalendar/feed/ Twitter-читач http://mootools.org.ua/twitter-chytach/ http://mootools.org.ua/twitter-chytach/#comments Sun, 13 Dec 2009 12:29:41 +0000 admin http://mootools.org.ua/?p=46 Twitter reader — MooTools-плагін для завантаження і відображення постів з Twitter’а та ретвітів,  використовуючи Twitter Search API (пошук за певним ключовим словом, як правило, за ніком). Автор плагіну: Jakub Karlec.

Приклад роботи Twitter reader’а.

Використання

Під’єднуємо MooTools і TwitterReader, а також плагін MooTools JsonP (з MooTools More) до вашого HTML-документу:

<head>

 <script type="text/javascript" src="js/mootools-yui-compressed.js"></script>
 <script type="text/javascript" src="js/mootools-1.2.3.1-more.js"></script>
 <script type="text/javascript" src="js/twitterReader.js"></script>

</head>

Викликаємо клас RssReader:

<head>

 <script type="text/javascript">
	window.addEvent('domready', function() {
		// "feed" — ідентифікатор елемента (у нас це DIV)
		// для прикладу, я прописав назву свого Twitter-акаунта (virua)
		var twitterReader = new TwitterReader("feed", "virua");
	});
 </script>

</head>

Синтаксис такий:

new TwitterReader(element, keyword [,options]);

Параметри:

  • element — ідентифікатор (id) елемента, в якому розміщуватиметься список твітів.
  • keyword — шуканий термін, як правило, ваш нік в Твітері.
  • options — налаштування.

Налаштування:

  • periodical — чи перевіряти наявність нових записів.
  • loader — ідентифікатор завантаження, який показується, коли триває читання віддаленого RSS-каналу.

І на останок прописуємо в тілі документу щось подібне до цього:

<body>

 <div id="feed"></div>

</body>

Файли прикладу (зібрані до купи + зі CSS-стилями) можна викачати за цим лінком (архів зберігається на Box.net).

Читайте також 10 останніх повідомлень з Твіттера.

]]> http://mootools.org.ua/twitter-chytach/feed/ MooDocs — скрипти користувачів http://mootools.org.ua/moodocs-mootools-skrypty-korystuvachiv/ http://mootools.org.ua/moodocs-mootools-skrypty-korystuvachiv/#comments Sat, 12 Dec 2009 19:49:04 +0000 admin http://mootools.org.ua/?p=45 MooDocsMooDocs — місце для ваших MooTools плагінів та скриптів.

Ви можете зберігати скрипти або просто вказати шлях до них з GitHub. Згодом ви зможете оновити скрипти та документацію через Git, і вони також оновляться на цьому сайті.

]]> http://mootools.org.ua/moodocs-mootools-skrypty-korystuvachiv/feed/ Сховище MooTools-плагінів http://mootools.org.ua/shovysche-mootools-plahiniv/ http://mootools.org.ua/shovysche-mootools-plahiniv/#comments Thu, 05 Nov 2009 21:02:53 +0000 admin http://mootools.org.ua/?p=44 Сьогодні хочу представити вашій увазі посилання на чималу колекцію плагінів для MooTools, яка, як на мене, доволі наочно  та зручно представлена на одній сторінці, і заслуговує на вашу увагу.

PlugIn Bay B — сховище MooTools плагінів

Ця збірка розміщена на сайті “PlugIn Bay B”, який є сховищем (репозиторієм) для MooTools-плагінів (хоча в майбутньому автор планує розширити список фреймворків).

Наразі в базі вже 87 позицій. До кожного плагіна є невеличке зображення-ілюстрація та звичайно ж коротенький опис. Поряд одразу запропоновано лінк, за яким можна завантажити вподобаний вами плагін у вигляді ZIP-архіву.

Слід також зазначити, що є плагіни MooTools версій як 1.1, так і 1.2. Щоб не було каші, можна скористатися фільтром, який розділить плагіни по версіях. Фільтрувати розширення можна також по теґах, скажімо, по тезі “menu” чи “slideshow”, що значно полегшує пошук.

]]> http://mootools.org.ua/shovysche-mootools-plahiniv/feed/ MooTools 1.2.4.2 Released http://mootools.org.ua/mootools-1242-released/ http://mootools.org.ua/mootools-1242-released/#comments Wed, 28 Oct 2009 08:50:30 +0000 slik http://mootools.org.ua/?p=43 Сьогодні вночі вийшла наступна версія фреймворку MooTools - 1.2.4.2. Зі списком змін можна ознайомитися тут.

Для нас з вами ця подія є радісною по тій причині, що всі три мої комміти попали в офіційний репозиторій цього фреймворку. А коммітнув я український переклад Date і Form.Validator (поки що це все, що потребує перекладу).

Form.Validator, Date: Added Ukrainian translations

Щоб переключитись на українську мову, достатньо в обробник domready вписати код
MooTools.lang.setLanguage("uk-UA");

]]> http://mootools.org.ua/mootools-1242-released/feed/ MooTools 1.2.4 / 1.1.2 Released http://mootools.org.ua/mootools-124-112-released/ http://mootools.org.ua/mootools-124-112-released/#comments Tue, 20 Oct 2009 17:05:15 +0000 slik http://mootools.org.ua/?p=42 Сьогодні вночі стало відомо, що нарешті, після трьох місяців тиші, розробники MooTools’а дали про себе знати, випуском нової версії цього фремворку. Зміни, як і в попередній версії, більше “багфіксового” характеру, так як не за горами випуск MooTools 2.0, куди і спрамовано додавання нових можливостей.

Докладніше тут і тут

]]> http://mootools.org.ua/mootools-124-112-released/feed/ MooTools: Класи http://mootools.org.ua/mootools-classes/ http://mootools.org.ua/mootools-classes/#comments Mon, 19 Oct 2009 15:01:09 +0000 slik http://mootools.org.ua/?p=41 MooTools logoПродовжую серію статтей про мій улюблений JavaScript фреймворк MooTools. Сьогодні мова піде про використання класів.

Продовження на Енетрі »

]]> http://mootools.org.ua/mootools-classes/feed/ MooTools: Ядро http://mootools.org.ua/mootools-core/ http://mootools.org.ua/mootools-core/#comments Mon, 19 Oct 2009 08:56:08 +0000 slik http://mootools.org.ua/?p=40 MooTools logoПродовжую розповідати про можливості JavaScript-фреймворка MooTools. В цій статті мова піде про функції реалізовані в ядрі бібліотеки. Це потрібно для розуміння матеріалу наступної статті.

Продовження на Енетрі »

]]> http://mootools.org.ua/mootools-core/feed/ MooTools: Виборка http://mootools.org.ua/mootools-selections/ http://mootools.org.ua/mootools-selections/#comments Mon, 19 Oct 2009 08:48:57 +0000 slik http://mootools.org.ua/?p=39 MooTools logoЯ доволі давно познайомився з цим фреймворком. Більше того, це перший JavaScript фреймворк, з яким я працював. За весь час своєї практики в JavaScript’і я користувався багатьма бібліотеками і фреймворками, але все ж, MooTools я вважаю найзручнішим. Може він не такий лаконічний як jQuery, може в нього нема такого сильного UI як в ExtJS, але він дуже зручний, саме для програміста.

Продовження на Енетрі »

]]> http://mootools.org.ua/mootools-selections/feed/