Среда, 04.03.2026, 01:35
Меню сайта
    Форма входа
    Категории раздела
    скрипты для ucoz сайта [3099]
    шаблоны для ucoz скачать [2660]
    Иконки групп для форума [25]
    Графика для сайта [1953]
    шаблоны psd для фотошопа [27]
    кисти для фотошопа [39]
    уроки фотошопа на русском языке [4]
    стили для фотошопа [3]
    шрифты для фотошопа cs4 [12]
    Web-master [3058]
    Поиск
    Календарь
    «  Июль 2009  »
    Пн Вт Ср Чт Пт Сб Вс
      12345
    6789101112
    13141516171819
    20212223242526
    2728293031
    Архив записей
    Наш опрос
    Умеете ли вы писать скрипты для ucoz?
    Всего ответов: 73
    Мини-чат
    200
    Друзья сайта
  • Официальный блог
  • Сообщество uCoz
  • FAQ по системе
  • Инструкции для uCoz
  • Статистика

    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    Главная » 2009 » Июль » 4 » Еще один интересный тип вкладок на jQuery
    17:28
    Еще один интересный тип вкладок на jQuery
    Шаг 1. HTML-конструкция:

    Итак, для начала нам нужно составить html-конструкцию нашей таблицы со вкладками. Выглядеть она будет примерно так:

    HTML:

    Code
    <ul class="tabs">  
      <li><a href="#">1-ая вкладка</a></li>  
      <li><a href="#">2-ая вкладка</a></li>  
      <li><a href="#">3-я вкладка</a></li>  
      <li><a href="#">4-ая вкладка</a></li>  
      <li><a href="#">5-ая вкладка</a></li>  
      </ul>  
       
      <!-- tab "panes" -->  
      <div class="panes">  
      <div><h2>Первая вкладка.</h2>  
      <p>  
      Содержимое первой вкладки.  
      </p>  
       
      </div>  
       
      <div class="les"><h2>Вторая вкладка.</h2>  
      <p>  
      Содержимое второй вкладки.
      </p>  
       
      </div>  
      <div class="les"><h2>Третья вкладка.</h2>  
      <p>  
      Содержимое третьей вкладки.
      </p>  
       
      </div>  
       
      <div class="les"><h2>Четвертая вкладка.</h2>  
      <p>  
      <p>
      Содержимое четвертой вкладки.
      </p>  
       
      </div>  
       
    <div class="les"><h2>Пятая вкладка.</h2>  
      <p>  
      Содержимое пятой вкладки.
      </p>  
       
      </div>  
       
      </div>

    Шаг 2. Дизайн файла со вкладками

    Теперь нам нужно к нашему документу со вкладками присоединить каскадную таблицу стилей. Она вынесена в файл style.css. Поэтому просто подключим его к нашему индексному файлу следующим образом:

    Code
    <link type='text/css' href='style.css' rel='stylesheet' />

    Шаг 3. Подключение основного фреймворка jQuery

    Теперь, как и в любом уроке по jQuery мы должны подключить основной фреймворк jQuery. Для этого между тегами <head> и </head> вставим следующий код:

    Code
    <script src='jquery.js' type='text/javascript'></script>

    Шаг 4. jQuery-доработки

    Теперь для полноценной работы вкладок мы должны вставить перед закрытием тега body следующий jQuery-код:

    jQuery

    Code
    <script>  
    $(function() {
      $("ul.tabs").tabs("div.panes > div");
      });
      </script>

    Заключение.

    Вот и готова наша табличка со вкладками. Думаю такое вид вкладок будет Вам по душе. Спасибо за внимание, до новых встреч!

    Пример (не рекламко =) )

    Категория: скрипты для ucoz сайта | Просмотров: 434 | Добавил: NiKsOn1991 | Рейтинг: 0.0/0
    Всего комментариев: 4
    4 drug53  
    0
    ахриненная штука, это достойно +

    3 NiKsOn1991  
    0
    + ставьте мне репа нужна smile

    1 softkey  
    0
    Не очень

    2 _Fantomas_  
    0
    Вполне нормально. Не очень - адаптируй сам.

    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]