ГОРИЗОНТАЛЬНЫЙ АККОРДИОН C ВКЛАДКАМИ

ГОРИЗОНТАЛЬНЫЙ АККОРДИОН C ВКЛАДКАМИ


Симпатичная панель с раздвижными вкладками использующая библиотеку jQueryTools.

Подключаем в шапке необходимые файлы:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.tools.min.js"></script>


и с CSS стилями
<link rel="stylesheet" type="text/css" href="css/standalo.css"/>
<link rel="stylesheet" type="text/css" href="css/tabs-acc.css"/>


Разметка HTML
<div id="accordion">

    <img src="images/firefox.png" />    
    <div style="width:200px;">
        <h3>Firefox</h3>
        <p>
            Браузер нового поколения от Mozilla Foundation
        </p>
    </div>
    
    <img src="images/opera.png" />    
    <div>
        <h3>Opera</h3>
        <p>
            Исследуйте Веб с помощью самого быстрого браузера на планете.
        </p>
    </div>

    <img src="images/chrome.png" />    
    <div>
        <h3>Chrome</h3>
        <p>
            Новый браузер Хром загружает страницы в интернете на максимальной скорости.
        </p>
    </div>    

</div>


javascript
И запускаем анимацию слайдов. Указываем класс дива к которому используем код и эффект - горизонтальный.
$(function() {
    $("#accordion").tabs("#accordion div", {
        tabs: 'img', 
        effect: 'horizontal'
    });
});


Скачать исходник:
Скачать файл: horizontal_accordion_tabs.rar [35,97 Kb] (cкачиваний: 7)
0
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.