markup-javascript.com » Mootools http://markup-javascript.com Блог web-технолога Tue, 15 Mar 2011 13:35:02 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Открыта библиотека плагинов Mootools http://markup-javascript.com/2009/12/11/otkryta-biblioteka-plaginov-mootools/ http://markup-javascript.com/2009/12/11/otkryta-biblioteka-plaginov-mootools/#comments Fri, 11 Dec 2009 16:55:18 +0000 Алексей http://markup-javascript.com/?p=649 Наконец-то на официальном сайте mootools.net открыта библиотека плагинов для этого фреймверка. Надеюсь она будет также активно развивается и пополнятся интересными плагинами как библиотека плагинов для jquery, где всегда можно найти кучу всего интересного.

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

P.S. Если бы они еще сделали примеры для методов фреймверка…

]]> http://markup-javascript.com/2009/12/11/otkryta-biblioteka-plaginov-mootools/feed/ 5 Полезные ссылки для тех кто изучает MooTools http://markup-javascript.com/2009/04/25/poleznye-ssylki-dlya-tex-kto-izuchaet-mootools/ http://markup-javascript.com/2009/04/25/poleznye-ssylki-dlya-tex-kto-izuchaet-mootools/#comments Sat, 25 Apr 2009 13:41:49 +0000 Алексей http://markup-javascript.com/?p=365 Наступили времена когда в мире фреймверков для JavaScript происходят бурные развития, наметились явные лидеры jQuery, MooTools, Prototype и несколько интересных продуктов. И хотя я больше склоняюсь в сторону jQuery, с удовольствием делаю проекты и на MooTools. Поэтому хочу поделится с вами ссылками, которые могут помочь вам в изучении MooTools

Русскоязычные ресурсы

Англоязычные ресурсы

]]> http://markup-javascript.com/2009/04/25/poleznye-ssylki-dlya-tex-kto-izuchaet-mootools/feed/ 0 Анимированный ховер для навигации на mootools http://markup-javascript.com/2009/03/08/animirovannyj-xover-dlya-navigacii-na-mootools/ http://markup-javascript.com/2009/03/08/animirovannyj-xover-dlya-navigacii-na-mootools/#comments Sun, 08 Mar 2009 21:28:14 +0000 Алексей http://markup-javascript.com/?p=161 Последнее время писал много о плагинах, и все они были разработаны на jQuery, хочется немного разбавить эту тематику плагином на mootools. Долго перебирал свои разработки на этом фреймверке и не мог выбрать наиболее интересное, ведь по сути решений на JavaScript написано много – галереи, динамические формы, лайтбоксы, аккордеоны и т.п., поэтому хотелось рассказать о чем-то редком.

Представляю Вам плагин “Анимированный ховер для навигации“. Чем же он интересен?
Прежде всего тем, что основные параметры анимации задаются в css файле!
А также тем, что такой плагин я не встречал, но, правда, видел аналогичные скрипты, которые не обладали универсальностью, а были захардкожены под определенные стили. Если я ошибаюсь, хотел бы увидеть ссылки в комментариях.

По традиции, чтоб было интереснее, сразу покажу пару примеров:


Открыть пример в новом окне

Для работы плагина подключаем JavaScript

<script type="text/javascript" src="js/mootools-1.2.1.js"></script>
<script type="text/javascript" src="js/navAnimated.js"></script>
<script type="text/javascript">
    window.addEvent('domready', function(){
        var nav = new navAnimated('.nav',
        {
            defClassName:'default',
            animatedClassName:'animate',
            animatedClassNameActive:'animateActive',
            element:'a',
            duration: 300,
            parentActiveClass:'active'
        });
    });
</script>

Рассмотрим параметры:

  • defClassName- название класса для начальных стилей
  • animatedClassName- название класса для анимации при ховере
  • animatedClassNameActive- название класса для анимации активного элемента
  • element- селектор элемента анимации
  • duration- время анимации
  • parentActiveClass- название класса родителя активного элемента

Требования HTML/CSS верстки для плагина

Требований для HTML/CSS у плагина нет, просто ссылаемся в настройках на список элементов и указываем названия классов для анимации.

Рассмотрим несколько примеров

Пример №2

.default3 {
    color:#e1dddd;
    font-size:12px;
    margin:2px 0;
    border:0;
}
.animate3 {
    color:#e1dddd;
    font-size:16px;
    margin:0;
    border:1px solid #005d82;
    border-width:2px 0;
}
.animateActive3 {
    color:#ff0000;
}

Открыть пример в новом окне

Пример №3

.default4 {
    color:#e1dddd;
    margin:0;
    font-size:12px;
    line-height:30px;
    border-top:1px solid #005d82;
    border-width:1px 0 0;
}
.animate4 {
    color:#e1dddd;
    font-size:16px;
    line-height:40px;
    margin:-10px 0 0;
}
.animateActive4 {
    color:#ff0000;
}

Открыть пример в новом окне

Пример №4

.nav5 li a {
    background:#2a2a2a url(../images/nav.gif) no-repeat;
}
.default5 {
    color:#e1dddd;
    background-position:-200px 0;
}
.animate5 {
    color:#000000;
    background-position:0 0;
}
.animateActive5 {
    color:#ff0000;
    background-position:0 40px;
}

Открыть пример в новом окне

Пример №5

.nav6 li a {
    background:url(../images/corner.png) no-repeat;
}
.default6 {
    background-color:#2a2a2a;
}
.animate6 {
    background-color:#005d82;
}
.animateActive6 {
    background-color:#ff0000;
}

Открыть пример в новом окне

Скачать плагин

]]> http://markup-javascript.com/2009/03/08/animirovannyj-xover-dlya-navigacii-na-mootools/feed/ 7