| feren | Offline Дата: Пн, 27.06.2011, 20:05 | Сообщение # 1 |
EURO 2012
Пользователь
Постов: 2103 |
 |
|
Он позволяет создавать неограниченное количество вкладок в пределах одного блока, при этом нет необходимости нумеровать вкладки с помощью CSS-классов.
Можно создать сколько угодно таких блоков с вкладками опять же без необходимости нумеровать эти блоки через CSS-классы;
Содержимое jQuery-скрипта, реализующего вкладки, остается неизменным (всего 0,4 килобайта), т.е. не разрастается в зависимость от количества блоков или вкладок, как это было в старом варианте, при этом размер нового варианта скрипта не больше размера скрипта для одного блока с вкладками из старого варианта.
Этот скрипт запоминает какие вкладки были открыты, и даже после обновления страницы они останутся открытыми.
Сразу: смотрите ДЕМО того, что у нас получится. Скачиваем архив с файлами..
В первую очередь подключаем сам фреймворк jQuery (если он еще не подключен на вашем сайте), например, так (вставляется между тегами
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>
|
|
|
|
| Single | Offline Дата: Пн, 27.06.2011, 21:34 | Сообщение # 2 |
Главный на IU
Заблокированный
Постов: 3829 |
|
| Спасибо 
aka KeNtOk
Ушел сам, буду заходить раз в неделю.
Удачи всем.
|
|
|
|
