Еще один интересный тип вкладок на jQuery

Здравствуйте. В сегодняшнем уроке Вы научитесь делать еще один очень интересный вид вкладок. Для начала посмотрите демо получившегося результата и скачайте исходные файлы:

demosourse

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

Итак, для начала нам нужно составить 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>

Заключение.

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

С искренним уважением, Максим Курочкин

 

<div>
<p>Здравствуйте. В сегодняшнем уроке Вы научитесь делать еще один очень интересный вид вкладок. Для начала посмотрите демо получившегося результата и скачайте исходные файлы:</p>
<table style="width: 545px;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td><a href="lessons/les286/example/index.html" target="_blank"><img src="img/demo.jpg" alt="" width="232" height="86" /></a></td>
<td><a href="lessons/les286/tabs.zip" target="_blank"><img src="img/source.jpg" alt="" width="319" height="86" /></a></td>
</tr>
</tbody>
</table>
<p><strong>Шаг 1.</strong> HTML-конструкция:</p>
<p>Итак, для начала нам нужно составить html-конструкцию нашей таблицы со вкладками. Выглядеть она будет примерно так:</p>
<p><strong>HTML:</strong></p>
<pre><code>
  &lt;ul class=&quot;tabs&quot;&gt; 
  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;1-ая вкладка&lt;/a&gt;&lt;/li&gt; 
  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;2-ая вкладка&lt;/a&gt;&lt;/li&gt; 
  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;3-я вкладка&lt;/a&gt;&lt;/li&gt; 
  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;4-ая вкладка&lt;/a&gt;&lt;/li&gt; 
  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;5-ая вкладка&lt;/a&gt;&lt;/li&gt; 
  &lt;/ul&gt; 
  
  &lt;!-- tab &quot;panes&quot; --&gt; 
  &lt;div class=&quot;panes&quot;&gt; 
  &lt;div&gt;&lt;h2&gt;Первая вкладка.&lt;/h2&gt; 
  &lt;p&gt; 
  Содержимое первой вкладки. 
  &lt;/p&gt; 
  
  &lt;/div&gt; 
  
  &lt;div class=&quot;les&quot;&gt;&lt;h2&gt;Вторая вкладка.&lt;/h2&gt; 
  &lt;p&gt; 
  Содержимое второй вкладки.
  &lt;/p&gt; 
  
  &lt;/div&gt; 
  &lt;div class=&quot;les&quot;&gt;&lt;h2&gt;Третья вкладка.&lt;/h2&gt; 
  &lt;p&gt; 
  Содержимое третьей вкладки.
  &lt;/p&gt; 
  
  &lt;/div&gt; 
  
  &lt;div class=&quot;les&quot;&gt;&lt;h2&gt;Четвертая вкладка.&lt;/h2&gt; 
  &lt;p&gt; 
  &lt;p&gt;
  Содержимое четвертой вкладки.
  &lt;/p&gt; 
  
  &lt;/div&gt; 
  
&lt;div class=&quot;les&quot;&gt;&lt;h2&gt;Пятая вкладка.&lt;/h2&gt; 
  &lt;p&gt; 
  Содержимое пятой вкладки.
  &lt;/p&gt; 
  
  &lt;/div&gt; 
  
  &lt;/div&gt;
</code></pre>
<p><strong>Шаг 2.</strong> Дизайн файла со вкладками</p>
<p>Теперь нам нужно к нашему документу со вкладками присоединить каскадную таблицу стилей. Она вынесена в файл <strong>style.css</strong>. Поэтому просто подключим его к нашему индексному файлу следующим образом:</p>
<pre><code>
&lt;link type='text/css' href='style.css' rel='stylesheet'  /&gt;
</code></pre>
<p><strong>Шаг 3.</strong> Подключение основного фреймворка jQuery</p>
<p>Теперь, как и в любом уроке по jQuery мы должны подключить основной фреймворк jQuery. Для этого между тегами &lt;head&gt; и &lt;/head&gt; вставим следующий код:</p>
<pre><code>
&lt;script src='jquery.js' type='text/javascript'&gt;&lt;/script&gt;
</code></pre>
<p><strong>Шаг 4.</strong> jQuery-доработки</p>
<p>Теперь для полноценной работы вкладок мы должны вставить перед закрытием тега <strong>body</strong> следующий jQuery-код:</p>
<p><strong>jQuery</strong></p>
<pre><code>
&lt;script&gt; 
(function() {
 (&quot;ul.tabs&quot;).tabs(&quot;div.panes &gt; div&quot;);
  });
  &lt;/script&gt;
</code></pre>
<p><strong>Заключение.</strong></p>
<p>Вот и готова наша табличка со вкладками. Думаю такое вид вкладок будет Вам по душе. Спасибо за внимание, до новых встреч!</p>
<p>С искренним уважением, Максим Курочкин </p>
</div>

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.flowplayer.org
Перевел: Максим Курочкин
Урок создан: 16 Июня 2009
Просмотров: 77691
Правила перепечатки


5 последних уроков рубрики "jQuery"

^ Наверх ^