Ротатор контента при использовании mootools
Продолжаем развивать интересные статьи на нашем блоге и сегодня мы рассмотрим процесс создания ротатора контента при использовании mootools. Если Вы хотите получить замечательный слайдер то этот урок именно для вас. После недолгого рассмотрения возможностей mootools получился вот такой урок, меня заинтересовали возможности данного скрипта, да, кто то скажет что ротатор достаточно прост, но при желании его можно украсить изображениями и другими различными эффектами, и уверен, что на любом сайте найдется отличное применение данному слайдеру, и так смотрим результат..
Первым этапом будет внедрение mootools, вставляем следующий код между тегами <head></head>:
1 2 3 4 5 6 7 8 9 10 11 |
<script src="js/mootools.v1.11.js" type="text/javascript"></script> <script src="js/sliding-tabs.js" type="text/javascript"></script> <script type="text/javascript" charset="utf-8"> 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. Стили можно вставить как в сам документ, так и вынести в отдельный файл.
1 2 3 4 5 6 7 8 9 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 |
<style type="text/css" media="screen"> 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, так как надо оформить нашу страничку, в начале будет идти название вкладки, а затем само содержание контента, не путаем эту последовательность:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<div id="wrapper"> <div id="heading"> <img src="images/1.png" alt="" id="previous" /> <ul id="buttons"> <li>Главная</li> <li>Новости</li> <li>Реклама</li> <li>О сайте</li> <li>Соглашение</li> </ul> <img src="images/2.png" alt="" id="next" /> </div> <div id="panes"> <div id="content"> <div> <p>Rudebox.org.ua - Информационный блог, в котором публикуются новости веб-дизайна, а так же информация и советы по созданию сайтов, шаблонов,и многое другое интересное с интернет мира. Как создать сайт? В этом поможет разобратся наш блог, тут Вы найдете ответы на интересующие Вас вопросы, и рассмотрите детальные уроки. </p> </div> <div id="bike"> <p>На нашем блоге публикуются последнии новости с мира веб-дизайна и разработки, тут Вы сможете прочитать как и с чего можно начать делать свой персональный блог.</p> </div> <div> <p>Все вопросы по размещению рекламы обращаться к администратору сайта admin@rudebox.org.ua</p> </div> <div id="rhyme2"> <p>Информационный блог,в котором публикуются новости веб-дизайна,а так же информация и советы по созданию сайтов, шаблонов,и многое другое интересное с интернет мира.</p> </div> <div id="rhyme3"> <p>Вся информация размещенная на сайте предназначена исключительно в ознокомительных целях, при копировании материалов с данного сайта, вставка ссылки на сайт обязательна.</p> </div> </div> </div> </div> |
Так же в выше указанном коде HTML можно заметить путь к картинкам, они обозначают направление ротатора, изменяем их, в случаи необходимости на свое усмотрение.
Читайте также:
Опубликовал Cooper 19.07.2011 в 22:05, в категории Mootools. Вы можете следить за комментариями через RSS 2.0. Вы можете оставить комментарий или трэкбэк с вашего сайта. |