Красивые вкладки на jQuery

(31-01-2010 16:13) 

 Шаг 1. HTML конструкция

 

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

<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. Поэтому просто подключим его к нашему индексному файлу следующим образом:

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

 

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

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

<script src=‘jquery.js’ type=‘text/javascript’></script>

 

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

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

jQuery

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


Заключение.

Вот и готова наша табличка со вкладками.

 

ух-ты!

и картинки красивые :)