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

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

Первым этапом будет внедрение mootools, вставляем следующий код между тегами <head></head>:

window.addEvent('load', function () {

myTabs = new SlidingTabs('buttons', 'panes');</p>

$('previous').addEvent('click', myTabs.previous.bind(myTabs));

$('next').addEvent('click', myTabs.next.bind(myTabs));

window.addEvent('resize', myTabs.recalcWidths.bind(myTabs));

});

</script>

Далее идут стили оформления CSS. Стили можно вставить как в сам документ, так и вынести в отдельный файл.

body,div,dl,dt,dd,ol,ul,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {

margin: 0;

padding: 0;

}</p>

html { font-size: 13px; font-family: "Lucida Grande", Verdana, Arial, sans-serif; }

#heading {

display: block;

text-align: center;

margin-bottom: 1em;

}

#heading * {

display: inline;

padding: 4px;

user-select: none;

cursor: pointer;

vertical-align: middle;

}

#heading li.active {

background-color: #8fc61b;

border-radius: 3px;

-webkit-border-radius: 3px;

-opera-border-radius: 3px;

-moz-border-radius: 3px;

}

#wrapper { border: 1px dotted gray; margin: 1em; padding: 1em; }

#panes {

text-align: justify;

border-style: none;

/*width: 245px;*/

margin: 0 1em 0 1em;

}

#panes p {

width: 600px;

margin: 0 auto 1em auto;

line-height: 1.2em;

}

#panes div div { overflow: hidden; }

#previous { float: none; cursor: pointer; }

#next { float: none; cursor: pointer; }

</style>

И на последок HTML, так как надо оформить нашу страничку, в начале будет идти название вкладки, а затем само содержание контента, не путаем эту последовательность:

<li>Главная</li>

<li>Новости</li>

<li>Реклама</li>

<li>О сайте</li>

<li>Соглашение</li>

</ul>

</div>

<div>

<p>Rudebox.org.ua - Информационный блог, в котором публикуются новости веб-дизайна, а так же информация и советы по созданию сайтов, шаблонов,и многое другое интересное с интернет мира. Как создать сайт? В этом поможет разобратся наш блог, тут Вы найдете ответы на интересующие Вас вопросы, и рассмотрите детальные уроки. </p>

</div>

<p>На нашем блоге публикуются последнии новости с мира веб-дизайна и разработки, тут Вы сможете прочитать как и с чего можно начать делать свой персональный блог.</p>

</div>

<div>

<p>Все вопросы по размещению рекламы обращаться к администратору сайта admin@rudebox.org.ua</p>

</div>

<p>Информационный блог,в котором публикуются новости веб-дизайна,а так же информация и советы по созданию сайтов, шаблонов,и многое другое интересное с интернет мира.</p>

</div>

<p>Вся информация размещенная на сайте предназначена исключительно в ознокомительных целях, при копировании материалов с данного сайта, вставка ссылки на сайт обязательна.</p>

</div>

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

На главную