SlideitMoo - 3 красивых решения для Вашего сайта

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

Демо версию всех 3-х эффектов можно посмотреть тут. Все файлы находятся здесь.

1. Красивый слайдер

Для корректной работы нам необходимо:

а) Три внешних файла (2 из них с кодом фреймворка MooTools). Не забудьте исправлять путь к файлам, если меняете их расположение. Следующий код необходимо вставить между тегами <head></head>:

<script language="javascript" type="text/javascript" src="script/mootools-1.2.1-core.js"></script>
    <script language="javascript" type="text/javascript" src="script/mootools-1.2-more.js"></script>
    <script language="javascript" type="text/javascript" src="script/slideitmoo-1.1.js"></script>

б) Javascript код с настройками в начале документа сразу после верхнего кода также между <head></head>.

<script language="javascript" type="text/javascript">
window.addEvents({
'domready': function(){
/* thumbnails example , div containers */
new SlideItMoo({
overallContainer: 'SlideItMoo_outer',
elementScrolled: 'SlideItMoo_inner',
thumbsContainer: 'SlideItMoo_items', 
itemsVisible:3,
itemsSelector: '.SlideItMoo_element',
itemWidth: 158,
showControls:1});

}
});
</script>

В этих настройках можно задать ширину слайдера, количество видимых элементов и включить или выключить контроллеры слайдера. Более подробно про настройки в конце урока.

в) Код HTML для оформления внешнего вида слайдера

<div id="SlideItMoo_outer"> 
<div id="SlideItMoo_inner"> 
<div id="SlideItMoo_items">
<div class="SlideItMoo_element"></p>
  <p> <strong>1: Address</strong>
  <a href="http://www.ruseller.com/" target="_blank">
  <img src="gallery/thumb/address_128.png" /></a>
    Nam porta tellus ac urna 
  </div> 
  <div class="SlideItMoo_element">
  <strong>2: Ads</strong>
  <a href="http://www.ruseller.com/" target="_blank">
  <img src="gallery/thumb/ads_128.png" /></a></p>
  <p> Praesent pellentesque eros nec nisl 
  </div>
  <div class="SlideItMoo_element">
  <strong>3: Calendar</strong>
  <a href="http://www.ruseller.com/" target="_blank">
  <img src="gallery/thumb/calendar_128.png" /></a>
    Vestibulum eleifend scelerisque purus 
  </div>
  <div class="SlideItMoo_element"></p>
  <p> <strong>4: Comment</strong>
  <a href="http://www.ruseller.com/" target="_blank">
  <img src="http://www.ruseller.com/" /></a>
    Felis nulla iaculis lacus 
  </div>

  <div class="SlideItMoo_element">
  <strong>5: Home</strong>
  <a href="http://www.ruseller.com/" target="_blank"></p>
  <p> <img src="gallery/thumb/home_128.png" /></a>
    Quisque neque. Donec quam ante, pulvinar vitae 
  </div>

  <div class="SlideItMoo_element">
  <strong>6: Mail</strong>
  <a href="http://www.ruseller.com/" target="_blank">
  <img src="gallery/thumb/mail_128.png" /></a>
    Suspendisse sodales turpis. Aliquam lectus 
  </div></p>
  <p> <div class="SlideItMoo_element">
  <strong>7: News</strong>
  <a href="http://www.ruseller.com/" target="_blank">
  <img src="gallery/thumb/news_128.png" /></a>
    Praesent pellentesque eros nec nisl 
  </div>
  <div class="SlideItMoo_element">
  <strong>8: RSS</strong></p>
  <p> <a href="http://www.ruseller.com/" target="_blank">
  <img src="gallery/thumb/rss2_128.png" /></a>
    Nam porta tellus ac urna 
  </div>
  <div class="SlideItMoo_element">
  <strong>9: Search</strong>
  <a href="http://www.ruseller.com/" target="_blank">
  <img src="gallery/thumb/search_128.png" /></a>
    Praesent pellentesque eros nec nisl 
  </div></p>
  <p> <div class="SlideItMoo_element">
  <strong>10: Sign</strong>
  <a href="http://www.ruseller.com/" target="_blank">
  <img src="gallery/thumb/sign_128.png" /></a>
    Vestibulum eleifend scelerisque purus 
  </div> 
  </div> 
  </div>
  </div>

Не забудьте поменять ссылки и пути к картинкам под Ваши нужды.

Ну и само собой необходимо все оформить через CSS. В нашем случае все стили находятся во внешнем файле, который подключен в самом начале документа. 

<link rel="stylesheet" type="text/css" href="stylesheet/styles.css" />

2. Ротатор баннеров или изображений

Нам понадобится:

а) Внешние файлы с Mootools - см. 1 пример.

б) Javascript код с настройками в начале документа сразу после верхнего кода также между <head></head>.

<script language="javascript" type="text/javascript">
window.addEvents({
'domready': function(){
  
 /* banner rotator example */ 
    new SlideItMoo({overallContainer: 'SlideItMoo_banners_outer',
    elementScrolled: 'SlideItMoo_banners_inner',
    thumbsContainer: 'SlideItMoo_banners_items', 
    itemsVisible:1,
    itemsSelector: '.banner',
    showControls:0,
    autoSlide: 3000,
    transition: Fx.Transitions.Bounce.easeOut,
    duration: 1800,
    direction:-1});

    }
    });
  </script>

в) HTML

<div id="SlideItMoo_banners_outer"> 
<div id="SlideItMoo_banners_inner"> 
<div id="SlideItMoo_banners_items">
<a class="banner" href="#" target="_blank"><img src="banners/1.jpg" width="557" height="134" /></a> 
<a class="banner" href="#" target="_blank"><img src="banners/2.jpg" width="557" height="134" /></a> 
<a class="banner" href="#" target="_blank"><img src="banners/3.jpg" width="557" height="134" /></a> 
</div> 
</div>
</div>

Стили оформления находятся во внешнем файле (см. пример 1)

3. Ротатор с текстом и изображениями

Нам понадобится:

а) Внешние файлы с Mootools - см. 1 пример.

б) Javascript код с настройками в начале документа сразу после верхнего кода также между <head></head>.

<script language="javascript" type="text/javascript">
window.addEvents({
'domready': function(){
/* thumbnails example , div containers */  
 /* info rotator example */ 
    new SlideItMoo({overallContainer: 'SlideItMoo_info_outer',
    elementScrolled: 'SlideItMoo_info_inner',
    thumbsContainer: 'SlideItMoo_info_items', 
    itemsVisible:1,
    itemsSelector: '.info_item',
    itemWidth:557,
    showControls:0,
    autoSlide: 5000,
    transition: Fx.Transitions.Sine.easeIn,
    duration: 1800,
    direction:1}); 
    }
    });
  </script>

в) HTML

<div id="SlideItMoo_info_outer"> 
<div id="SlideItMoo_info_inner"> 
<div id="SlideItMoo_info_items">
<div class="info_item">
   <a href="http://www.php-help.ro/php-tutorials/javascript-chained-select-with-mootools-12/"><img src="info_images/chained_select.jpg" /></a>
  <h1>Chained drop down boxes, the neat way</h1>
    Ever had a problem displaying the relationships of hierarchical data? Tons of drop downs displaying data according to what the user selected? Not any more. ChainedSelect comes to your aid with a neat display of your data. Easy to use and to implement.
  <a href="http://www.php-help.ro/php-tutorials/javascript-chained-select-with-mootools-12/">more details</a>
  </div>
  <div class="info_item">
  <h1><a href="http://www.php-help.ro/mootools-12-javascript-examples/sifr-titles-generated-using-mootools-12/"><img src="info_images/moo_sifr-300x154.jpg" /></a>MooTools and SiFR - cool, antialiased text</h1>
    Tired of the same boring look of your text? With the help of this script, your titles will look neat! Try it out. 
  <a href="http://www.php-help.ro/mootools-12-javascript-examples/sifr-titles-generated-using-mootools-12/">more details</a>
 </div>
  <div class="info_item">
  <a href="http://www.php-help.ro/mootools-12-javascript-examples/moohover-css-hover-mootools-way/"><img src="info_images/moohover-300x139.jpg" /></a>
  <h1>MooHover - cool looking links and buttons</h1>
    How about some cool hover effects on your links and buttons? You want it? You got it!
  <a href="http://www.php-help.ro/mootools-12-javascript-examples/moohover-css-hover-mootools-way/">more details</a>
  </div>
  <div class="info_item">
 <a href="http://www.php-help.ro/mootools-12-javascript-examples/mootools-12-javascript-image-zoom/"><img src="info_images/zoomer-225x300.jpg" /></a>
  <h1>MooTools image zoom</h1>
    Got really large images that your client wants you to use? No room in the page for them? Need a solution? Got one! Go get it tiger!
  <a href="http://www.php-help.ro/mootools-12-javascript-examples/mootools-12-javascript-image-zoom/">more details</a>
  </div> 
  </div> 
  </div>
  </div>

Стили оформления находятся во внешнем файле (см. пример 1).

Теперь давайте посмотрим какие настройки можно использовать при оформлении всех плагинов:

* itemsVisible: количество видимых элементов
* itemsSelector: класс CSS для подвижных элементов
* showControls: показывает или скрывает навигацию (кнопки "вперед" и "назад")
* duration: продолжительность перехода
* direction: направление движения (1 - справа налево, -1 - наоборот)
* autoSlide: время в милисекундах через которое начнется прокрутка

Это основные и самые необходимые настройки. Их на самом деле больше, но этого вполне достаточно. Экспериментируйте и у Вас все получится!

Удачного Вам дня. На сегодня все!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.php-help.ro
Перевел: Максим Шкурупий
Урок создан: 9 Апреля 2009
Просмотров: 67259
Правила перепечатки

5 последних уроков рубрики "Mootools"

  • Создание меню при помощи MenuMatic 0.68.3

    Создание горизонтального и вертикального меню при помощи MenuMatic 0.68.3

  • Анимированные закладки с использованием MooTools

    Один из возможных способов поместить много контента на одно небольшое место - это использование системы закладок. Данный урок покажет как создать систему анимированных закладок с использованием CSS, куки и анимированного переключения панелей.

  • Выезжающая панель для сайта на Mootools

    Изучив этот урок, Вы научитесь делать компактную выплывающую панель для сайта. Разрабатывать ее мы будем с помощью Mootools, ну и конечно же не обойдемся и без CSS-стилей, которые будут играть здесь роль дизайнинга панели

  • Увеличение / Уменьшение текстовых полей с помощью MooTools

    Короткий урок про то, как добавить к любому текстовому полю возможность увеличения или уменьшения.

  • Multi-Select c помощью MooTools

    В этом уроке речь пойдет о переносе выбранных опций из одного multi-select в другой. Думаю, что подобный виджет вы уже видели. Обычно он применяется на сайтах объявлений и регистрации в каталогах, где ваше объявление (ваш сайт) подходит для размещения в нескольких рубриках. В этом уроке мы реализуем подобный виджет с помощью Mootools.

^ Наверх ^