Форма входа

mvcreative

Старая форма входа

  • Страница 1 из 1
  • 1
Модератор форума: BSide  
Форум MVCreative » сделаем креативный uCoz » Общение и архив » Архив старых тем » Урок по созданию удобных вкладок (от uNiceGroup)
Урок по созданию удобных вкладок
nDiviDДата: Четверг, 05.05.2011, 18:51 | Сообщение # 1
Чего так орать?
Группа: Проверенные
Пользователь №: 21
Сообщений: 614
Награды: 11
Репутация: 39
Статус: оффлайн

Сегодня я хочу рассказать о создании удобных вкладок при помощи jQuery. Сама идея появилась, когда я только начал знакомится с jQuery, где-то году в 2008. Как-то я натолкнулся на скрипты, пытающиеся реализовать это. И вот по просьбе, сделать совершенно простой информер, мне захотелось реализовать это с помощью этих вкладок...
Скрипт этот является универсальным:

Он позволяет создавать неограниченное количество вкладок в пределах одного блока, при этом нет необходимости нумеровать вкладки с помощью CSS-классов.
Можно создать сколько угодно таких блоков с вкладками опять же без необходимости нумеровать эти блоки через CSS-классы;
Содержимое jQuery-скрипта, реализующего вкладки, остается неизменным (всего 0,4 килобайта), т.е. не разрастается в зависимость от количества блоков или вкладок, как это было в старом варианте, при этом размер нового варианта скрипта не больше размера скрипта для одного блока с вкладками из старого варианта.
Этот скрипт запоминает какие вкладки были открыты, и даже после обновления страницы они останутся открытыми.

Сразу: смотрите ДЕМО того, что у нас получится. Скачиваем архив с файлами.

В первую очередь подключаем сам фреймворк jQuery (если он еще не подключен на вашем сайте), например, так (вставляется между тегами

Code
<head> и </head>
) :

Code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

Мне кажется, лучше "брать” его с Гугла, поскольку, во-первых, велика вероятность, что у посетителя, который зайдет на сайт, jQuery уже закэширован в браузере (значит страница загрузится быстрее), во-вторых, скорость серверов Гугла стабильна и быстра, в-третьих, Гугл отдает его в сжатом виде (gzip).
Ну либо если уж такое большое желание, то так, при этом не забываем закинуть папочку на свой хост и правильно прописать путь...

Code
<script type="text/javascript" src="/tabs/jquery-1.5.2/jquery.min.js"></script>

Теперь подключаем сам скрипт и стили:

Code

<script type="text/javascript" src="/tabs/tabs.js"></script>
<link rel="stylesheet" type="text/css" href="/tabs/tabs.css" media="screen"/>

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

Code
<div class="section">
      <ul class="tabs">
      <li class="current">1-я вкладка</li>
      <li>2-я вкладка</li>
      </ul>
      <div class="box visible">
      Содержимое первого блока
      </div>
      <div class="box">
      Содержимое второго блока
      </div>
</div>

Теперь разберем этот код по-подробнее... Более подробно.


Web-create пати uNiceGroup =) Порно бесплатно!
 
вверх
Форум MVCreative » сделаем креативный uCoz » Общение и архив » Архив старых тем » Урок по созданию удобных вкладок (от uNiceGroup)
  • Страница 1 из 1
  • 1
Поиск: