jQuery: легкие табы (вкладки)


Существуют довольно много различных приемов и способов создания вкладок на веб-сайтах. Это можно сделать при помощи JS или CCS3. Рассмотрим пример простых табов создаваемых при помощи JQuery.

Создаем простые стили:

#tabs
{
    display:inline-block;
}
#tabs > div
{
    padding:10px 0 0 0;
}
#tabs ul
{
    margin:0px;
    padding:0px;
}
#tabs ul:after
{
    clear:both;
    content:"";
    display:block;
    height:5px;
    background:#000;
}
#tabs ul li
{
    cursor:pointer;
    margin:0 2px 0 0;
    display:block;
    float:left;
    padding: 15px;
    background:#ED6D9C;
    color:#000;
}
#tabs ul li.active, #tabs ul li.active:hover
{
    background:#000;
    color:#fff;
}
#tabs ul li:hover
{
    background:#d6d6d7;
}

Далее сам “плагин” для табов:

(function($){
    jQuery.fn.lightTabs = function(options){
           var createTabs = function(){
            tabs = this;
            i = 0;

            showPage = function(i){
                $(tabs).children("div").children("div").hide();
                $(tabs).children("div").children("div").eq(i).show();
                $(tabs).children("ul").children("li").removeClass("active");
                $(tabs).children("ul").children("li").eq(i).addClass("active");
            }

            showPage(0);				

            $(tabs).children("ul").children("li").each(function(index, element){
                $(element).attr("data-page", i);
                i++;
            });

            $(tabs).children("ul").children("li").click(function(){
                showPage(parseInt($(this).attr("data-page")));
            });
        };
        return this.each(createTabs);
    };
})(jQuery);

И активируем его:

$(document).ready(function(){
    $("#tabs").lightTabs();
});

И конечно же сам HTML:

<div class="tabs">
    <ul>
        <li>Первая тестовая вкладка</li>
        <li>Вторая вкладка</li>
        <li>Третья вкладочка</li>
    </ul>
    <div>
        <div>РЫБА: С другой стороны консультация с широким активом позволяет оценить значение соответствующий условий активизации. Не следует, однако забывать, что постоянный количественный рост и сфера нашей активности способствует подготовки и реализации соответствующий условий активизации. Товарищи! новая модель организационной деятельности обеспечивает широкому кругу (специалистов) участие в формировании систем массового участия. Повседневная практика показывает, что постоянное информационно-пропагандистское обеспечение нашей деятельности в значительной степени обуславливает создание системы обучения кадров, соответствует насущным потребностям. </div>
        <div>Текст вкладки №2</div>
        <div>Текст вкладки №3</div>
    </div>
</div> 

Вот такой быстрый способ создания легких вкладок при помощи JQuery

http://www.amtek.com.ua/okna_derevo.html

Возврат % от покупок

Другие публикации:

Написать комментарий через:

 
               
  • Локальный блог
  •  
 

Ваш отзыв

Имя *

Почта (скрыта) *

Сайт

Напишите цифрами двa вoceмь двa *

Сообщение

 
Статусы для соц.сетей на ArtKiev Design Studio