Главная страницаКисти для фотошопа Каталог файловПрофиль
  • Страница 1 из 1
  • 1
Очередной классный слайдер на MooTools
qwerty9Дата: Суббота, 24.10.2009, 17:45 | Сообщение # 1
Титул: Генерал-майор
Сообщений: 406
Репутация: [ 6 ]
Вставляем следующий код между тегами . Не забываем про правильный путь к фреймворку.

Code

Code
    <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

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

Code

Code
<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

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

Code

Code
<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>   
     </div>   
     <div class="pane" id="bike">   
     

Добро пожаловать на блог! Здесь в основном выкладываются вещи, которым не нашлось места в журнале или на форуме. Обычно это отчеты о различных встречах, семинарах и поездках.</p>   
     </div>   
     <div class="pane">   
     

Photoshop мастера приветствуют еще одного фаната программы Adobe Photoshop! Не важно новичок вы или профессионал, ГЛАВНОЕ, у нас с вами общие интересы! Если вы давно с удовольствием работаете в Фотошопе или только стремитесь освоить эту уникальную программу, то сайт www.photoshop-master.ru создан именно для Вас. Что такое Photoshop? Photoshop – это удивительная многоцелевая программа, лидер в индустрии графики и дизайна. Photoshop - это безграничные возможности, сотни инструментов, тысячи функций, миллионы эффектов. Вот почему даже самые продвинутые гуру не знают все о Photoshop. На первый взгляд, кажется, что Фотошоп не одолеть? Выбросите эту мысль из головы – на то Вы и пришли в Интернет, чтобы учиться на уроках, которые в огромном количестве представлены на нашем сайте. Поверьте, Photoshop скоро станет для Вас настоящим другом и незаменимым помощником. </p>   
     </div>   
     <div class="pane" id="rhyme2">   
     

Форум для клиентов</p>   
     </div>   
     <div class="pane" id="rhyme3">   
     

Служба поддержки клиентов</p>   
     </div>   
     </div>   
     </div>   
     </div>

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

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

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


  • Страница 1 из 1
  • 1
Поиск: