Хотите верьте, хотите нет, есть много мощных интерактивных функций, которые вы можете привнести на свой сайт, используя JavaScript, кроме удобных навигационных меню! Этот учебник поможет вам найти свою внутреннюю корову, познакомив вас с одной из самых мощных и модульных библиотек javascript — MooTools ! Мы создадим гибкий инструмент для выделения продуктов или услуг на ваших сайтах с помощью инфраструктуры JavaScript MooTools. Кроме того, изучите несколько причин, по которым MooTools может быть подходящей библиотекой javascript для всех ваших будущих проектов!
Демо
Итак, вот что мы создаем: это умный механизм ролловера, который действительно хорошо работает в качестве маркера продукта.
Почему MooTools?
Я знаю, о чем вы думаете … Что может предложить MooTools , что может привести к тому, что я порву свои давние отношения с jQuery — или Prototype и Scriptaculous в этом отношении!
Одна из самых больших проблем, с которыми я сталкивался при использовании jQuery в прошлом, заключается в том, что многие из их плагинов создаются и развиваются независимо друг от друга, что означает, что вы доверяете незнакомцу, который активно обновляет их плагин поскольку библиотека jQuery продолжает выпускать все новые и новые версии, а также. Когда это не удается (и часто это происходит), вы обнаружите, что ищете правильную версию базовой библиотеки, которая позволит вашему сценарию работать правильно!
Возможно, Prototype и его известный партнер по криминалу, Scriptaculous, больше похожи на ваш стиль. В этом конкретном случае вы будете лишены своего права на модульность, и вы будете вынуждены включить две библиотеки размером с говядину на всех своих страницах — или в некоторых случаях также файл плагина!
Так что, если MooTools так хорош, тогда … почему он не используется больше? Почему на каждой полке библиотеки нет миллиардов учебников и книг ?! Есть несколько причин:
- MooTools ориентирован больше на средний и продвинутый сценарий.
- Вы не найдете коллекций плагинов вырезать и вставить, которые позволяют немедленную реализацию.
- Пользователи MooTools (по какой-либо причине) связаны с элитарным нравом.
Тем не менее, вы найдете множество инструментов для работы с более уникальными областями сценариев, такими как синтаксический анализ файлов JSON, cookie-файлы и встраивание flash, и многие другие. Кроме того, удобная страница загрузки, которая позволяет вам выбрать именно то, что вам нужно для вашего проекта, чтобы вы могли обеспечить наименьший возможный размер файла.
Шаг 1 — Получить MooTools!
Перейдите на страницу MooTools Core Builder ! Для этого конкретного проекта вам нужно выбрать Fx.Morph , Element.Event , DomReady и Selectors и нажать «Загрузить» с помощью YUI Compressor. Все зависимости автоматически выбираются для вас. Будьте внимательны, так как некоторые браузеры добавят расширение .txt к файлу javascript для вашей защиты. Это, очевидно, должно быть удалено, и не стесняйтесь обрезать некоторые жирные символы в имени файла.
Шаг 2. Прикрепите MooTools к вашему HTML-документу.
Создайте HTML-документ, который вы будете использовать для этого проекта, и присоедините библиотеку MooTools. Моя страница заголовка выглядит примерно так:
|
1
2
3
4
5
6
7
8
9
|
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ />
<title>Mootools — Product Highlights!</title>
<script src=»mootools.js» type=»text/javascript»></script>
…
</head>
|
Шаг 3 — сложите свой CSS и HTML
Взгляните на следующие стили и HTML, чтобы увидеть, как я выложил страницу.
Код CSS:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
<style type=»text/css» media=»screen»>
body {
margin: 0;
padding: 0;
background: #1a1613 url(images/bg_tutBody.gif) repeat-x;
}
img { border: 0;
#siteWrap { /* The wrapper for my page icons and bubbles */
margin: 287px auto 0 auto;
width: 642px;
height: 345px;
position: relative;
background: transparent url(images/bg_pageWrap.jpg) no-repeat top left;
}
#pageWrap { /* Wrapper for my page icons */
position: absolute;
z-index: 5;
top: 138px;
left: 134px;
}
/* Page specific styles */
#psdPage {
margin-right: 19px;
float: left;
cursor: pointer;
}
#netPage {
margin-right: 20px;
float: left;
cursor: pointer;
}
#audioPage {
float: left;
cursor: pointer;
}
#bubbleWrap { /* Wrapper for my bubbles */
position: absolute;
z-index: 10;
left: 158px;
top: 30px;
}
.bubble {
position: absolute;
}
</style>
|
HTML код:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
<div id=»siteWrap»>
<div id=»bubbleWrap» style=»visibility: hidden;»>
<div class=»bubble»><img src=»images/bubble_PSD.jpg» alt=»PSDTUTS» /></div>
<div class=»bubble»><img src=»images/bubble_NET.jpg» alt=»NETTUTS» /></div>
<div class=»bubble»><img src=»images/bubble_AUDIO.jpg» alt=»AUDIOTUTS» /></div>
</div>
<div id=»pageWrap»>
<div class=»page» id=»psdPage»><a href=»#»><img src=»images/page_PSD.jpg» alt=»PSDTUTS» /></a></div>
<div class=»page» id=»netPage»><a href=»#»><img src=»images/page_NET.jpg» alt=»NETTUTS» /></a></div>
<div class=»page» id=»audioPage»><a href=»#»><img src=»images/page_AUDIO.jpg» alt=»AUDIOTUTS» /></a></div>
</div>
</div>
|
Обратите внимание, как я выложил HTML. Я не буду использовать идентификаторы для выбора какого-либо элемента страницы или всплывающей подсказки, а вместо этого буду создавать массивы всех элементов, содержащих два класса, что позволит масштабировать этот скрипт независимо от того, сколько элементов вы выделите! Все пузыри и страницы содержатся в оболочке, которая абсолютно расположена внутри оболочки сайта (которая содержит наш фон, где все это находится поверх).
Шаг 4 — Добавьте свой JavaScript
Мы начнем с создания функции-оболочки для нашего javascript-кода, которая помещает прослушиватель событий в объект окна, запускается, когда DOM загружен и готов. Это важно, потому что нам нужен наш скрипт, чтобы немедленно начать изменять DOM, как только он станет доступен.
Если мы не будем использовать эту функцию-обертку, вполне вероятно, что вы получите ошибки, утверждающие, что некоторые элементы не существуют. Другим вариантом может быть размещение встроенного JavaScript в конце тела документа. Однако, если вы решите прикрепить скрипт извне, вы столкнетесь с этой проблемой еще раз, так что теперь это хорошая привычка!
Другой вариант для «domready» — это использование «load», которое будет запускаться после полной загрузки страницы (включая изображения). Мы не хотим этого для этого конкретного проекта, потому что это означает, что изображения (такие как наши пузыри) могут вспыхнуть на экране, прежде чем они будут скрыты нашим скриптом.
Еще одна важная вещь: если вы решите связать этот скрипт из внешнего файла .js, вам нужно убедиться, что вы связали его после того, как вы связали библиотеку MooTools в заголовке документа.
|
1
2
3
4
5
|
window.addEvent(‘domready’, function() {
…
});
|
Затем мы начнем с создания массивов как для нашей страницы, так и для всплывающих элементов, и установим несколько начальных встроенных стилей.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
window.addEvent(‘domready’, function() {
// Create variables (in this case two arrays) representing our bubbles and pages
var myPages = $$(‘.page’);
var myBubbles = $$(‘.bubble’);
// Set bubbles opacity to zero so they’re hidden initially
// and toggle visibility on for their container back on
myBubbles.setStyle(‘opacity’, 0);
$(‘bubbleWrap’).setStyle(‘visibility’,’visible’)
});
|
Наконец, мы прикрепим слушателей событий к значкам страницы, чтобы запускать эффекты морфинга на соответствующие им пузырьки. Обратите внимание, что порядок пузырьков, как изложено в HTML, — это ОДИН ЖЕ порядок иконок на странице. Это важно!
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
window.addEvent(‘domready’, function() {
// Create variables (in this case two arrays) representing our bubbles and pages
var myPages = $$(‘.page’);
var myBubbles = $$(‘.bubble’);
// Set bubbles opacity to zero so they’re hidden initially
// and toggle visibility on for their container back on
myBubbles.setStyle(‘opacity’, 0);
$(‘bubbleWrap’).setStyle(‘visibility’,’visible’)
// Add our events to the pages
myPages.each(function(el, i) {
/* Here we change the default ‘link’ property to ‘cancel’ for our morph effects, which
ensures effects are interrupted when the mouse is leaving and entering
to immediately begin the morph effect being called */
el.set(‘morph’, {link : ‘cancel’});
el.addEvents({
‘mouseenter’: function() {
myBubbles[i].morph({
‘opacity’ : 1,
‘margin-top’ : ‘-15px’
});
},
‘mouseleave’ : function() {
myBubbles[i].morph({
‘opacity’ : 0,
‘margin-top’ : 0
});
}
});
});
});
|
Вы заметите, что мы прикрепляем функцию с помощью метода each () ко всем элементам массива myPages. И для каждой функции мы передаем ‘el’, который представляет элемент страницы, и ‘i’, который представляет собой целое число, представляющее размещение этого элемента страницы в его массиве. Мы используем переменную ‘i’ для вызова эффекта морфа на соответствующий и соответствующий элемент пузырька в массиве ‘myBubbles’.
Вот и все! Довольно безболезненно, не так ли? Обязательно просмотрите рабочую демоверсию, а также добавьте в закладки страницу документации MooTools и страницу загрузки MooTools для дальнейшего использования! Я надеюсь, что этот урок был полезен, и я с нетерпением жду, чтобы собрать что-то более продвинутое в ближайшем будущем, используя мощь классов MooTools!