Очередной классный слайдер на mootools

В данном уроке я покажу Вам, как сделать очень красивый и функциональный слайдер с помощью mootools.

В предыдущих уроках слайдеры у нас уже были, но этот, по-моему, один из самых лучших.

demosourse

Ну что ж начнем!

MooTools

Вставляем следующий код между тегами <head></head>. Не забываем про правильный путь к фреймворку.

	<script src="mootools.v1.11.js" type="text/javascript"></script>
	<script src="sliding-tabs.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
		window.addEvent('load', function () {
			myTabs = new SlidingTabs('buttons', 'panes');
			
			// this sets up the previous/next buttons, if you want them
			$('previous').addEvent('click', myTabs.previous.bind(myTabs));
			$('next').addEvent('click', myTabs.next.bind(myTabs));
			
			// this sets it up to work even if it's width isn't a set amount of pixels
			window.addEvent('resize', myTabs.recalcWidths.bind(myTabs));
		});
	</script>

CSS

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

<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;
}
	  
		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: #66ccff;
			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

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

 <div id="wrapper">
  <div id="heading">
  <img src="images/leftAlt3.png" alt="" id="previous" />
  <ul id="buttons">
  <li>Ruseller.com</li>
  <li>Evgeniypopov.com</li>
 <li>Photoshop-master.ru</li>
  <li>Ruseller-board.com</li>
  <li>Evgeniypopov.ru</li>
  </ul>
  <img src="images/rightAlt3.png" alt="" id="next" />
  </div>
  <div id="panes">
  <div id="content">
  <div class="pane">
  <p>Как создать сайт? Этот вопрос волнует сегодня миллионы умов по всему миру. Многие хотят создать сайт и зарабатывать на нём разными способами! Но вот как эти сайты создаются, знают пока немногие. Если Вы попали на мой ресурс не случайно, а в поисках информации по созданию сайтов, то уверен, Вы найдете здесь много интересной и полезной информации. </p>
  </div>
  <div class="pane" id="bike">
  <p>Добро пожаловать на блог! Здесь в основном выкладываются вещи, которым не нашлось места в журнале или на форуме. Обычно это отчеты о различных встречах, семинарах и поездках.</p>
  </div>
  <div class="pane">
  <p>Photoshop мастера приветствуют еще одного фаната программы Adobe Photoshop! Не важно новичок вы или профессионал, ГЛАВНОЕ, у нас с вами общие интересы! Если вы давно с удовольствием работаете в Фотошопе или только стремитесь освоить эту уникальную программу, то сайт www.photoshop-master.ru создан именно для Вас. Что такое Photoshop? Photoshop – это удивительная многоцелевая программа, лидер в индустрии графики и дизайна. Photoshop - это безграничные возможности, сотни инструментов, тысячи функций, миллионы эффектов. Вот почему даже самые продвинутые гуру не знают все о Photoshop. На первый взгляд, кажется, что Фотошоп не одолеть? Выбросите эту мысль из головы – на то Вы и пришли в Интернет, чтобы учиться на уроках, которые в огромном количестве представлены на нашем сайте. Поверьте, Photoshop скоро станет для Вас настоящим другом и незаменимым помощником. </p>
  </div>
  <div class="pane" id="rhyme2">
  <p>Форум для клиентов</p>
  </div>
  <div class="pane" id="rhyme3">
  <p>Служба поддержки клиентов</p>
  </div>
  </div>
  </div>
  </div>

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

Вот и все! Красивый слайдер готов! Всем счастья, успехов и крепкого здоровья!

Всегда рад Вашим комментариям!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.creativepony.com
Перевел: Максим Шкурупий
Урок создан: 19 Апреля 2009
Просмотров: 64782
Правила перепечатки

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

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

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

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

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

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

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

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

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

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

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

^ Наверх ^