Kzander · Оффлайн · Дата: Четверг, 22.09.2011, 14:15:12 | Сообщение # 1
Сообщений: 270 -
Он позволяет создавать неограниченное количество вкладок в пределах одного блока, при этом нет необходимости нумеровать вкладки с помощью 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>
Жизнь без цели - человек без головы © Kzander
[c] [/c]
[c]Выполнено заказов в бесплатной графике - 7
Выявлено нарушителей - 0[/c]
|
