js Горизонтальный аккордеон на JQuery 

Дата публикации  Дата изменения18.01.13  КомментарииНет   Просмотры3503

Горизонтальный аккордеон на JQuery. Гибкие настройки, различные варианты представления.

Один из примеров использования:

Между <head></head>:

<link rel="stylesheet" type="text/css" href="css/jquery.hrzAccordion.defaults.css">
<link rel="stylesheet" type="text/css" href="css/jquery.hrzAccordion.examples.css">
<script type="text/javascript" src="lib/jquery-1.3.2.js"></script>
<script type="text/javascript" src="lib/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="lib/jquery.hrzAccordion.js"></script>
<script type="text/javascript" src="lib/jquery.hrzAccordion.examples.js"></script>

Между <body></body>:

<h2>jQuery - Horizontal Accordion 2.00</h2>
<h2>Example 1</h2>
<ul>
<li>handle aligned to the left</li>
<li>animation is opening and closing content at the same time</li>
<li>event trigger is mouse over</li>
<li>cycling every 10 seconds from 1 to 4 and than from 4 to 1</li>
<li>new  event will only be allowed, once the first animation completed</li>
</ul>
<button  onclick="$('#testHandle0').trigger('mouseover')">Open Content 1</button> | <button   onclick="$('#testHandle1').trigger('mouseover')">Open Content 2</button> |
<button  onclick="$('#testHandle2').trigger('mouseover')">Open Content 3</button> | <button   onclick="$('#testHandle3').trigger('mouseover')">Open Content 4</button><br /><br />
<ul class="test">
  <li><div class="handle"><img src='images/title1.png'></div><img src='images/image_test.gif' align='left'>
    <h3>Content 1</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vestibulum metus sed massa. Pellentesque pharetra felis a enim. Aliquam sapien nisl, iaculis ac, hendrerit placerat, iaculis congue, augue. Quisque eget mi quis purus vestibulum eleifend. Maecenas condimentum eros vel eros. Ut facilisis leo id mi. Suspendisse nisl magna, consequat quis, pretium eget, laoreet vel, orci.<br>
      <br>
      Mauris sed mauris. Praesent imperdiet, nunc ut sollicitudin hendrerit, nisi tellus mollis leo, blandit pharetra nulla orci id eros. Nullam ut nunc. Praesent lacus lacus, tempor a, dignissim eu, tristique ac, tortor. Sed faucibus. Integer eleifend lacus ac neque. Fusce tempus. In hac habitasse platea dictumst. Nulla arcu neque, gravida at, rhoncus id, pharetra vitae, tortor. Aenean vestibulum consequat augue.</p>
  </li>
  <li><div class="handle"><img src='images/title2.png'></div><img src='images/image_test.gif' align='left'>
    <h3>Content 2</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vestibulum metus sed massa. Pellentesque pharetra felis a enim. Aliquam sapien nisl, iaculis ac, hendrerit placerat, iaculis congue, augue. Quisque eget mi quis purus vestibulum eleifend. Maecenas condimentum eros vel eros. Ut facilisis leo id mi. Suspendisse nisl magna, consequat quis, pretium eget, laoreet vel, orci.<br>
      <br>
      Mauris sed mauris. Praesent imperdiet, nunc ut sollicitudin hendrerit, nisi tellus mollis leo, blandit pharetra nulla orci id eros. Nullam ut nunc. Praesent lacus lacus, tempor a, dignissim eu, tristique ac, tortor. Sed faucibus. Integer eleifend lacus ac neque. Fusce tempus. In hac habitasse platea dictumst. Nulla arcu neque, gravida at, rhoncus id, pharetra vitae, tortor. Aenean vestibulum consequat augue.</p>
  </li>
  <li><div class="handle"><img src='images/title3.png'></div><img src='images/image_test.gif' align='left'>
    <h3>Content 3</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vestibulum metus sed massa. Pellentesque pharetra felis a enim. Aliquam sapien nisl, iaculis ac, hendrerit placerat, iaculis congue, augue. Quisque eget mi quis purus vestibulum eleifend. Maecenas condimentum eros vel eros. Ut facilisis leo id mi. Suspendisse nisl magna, consequat quis, pretium eget, laoreet vel, orci.<br>
      <br>
      Mauris sed mauris. Praesent imperdiet, nunc ut sollicitudin hendrerit, nisi tellus mollis leo, blandit pharetra nulla orci id eros. Nullam ut nunc. Praesent lacus lacus, tempor a, dignissim eu, tristique ac, tortor. Sed faucibus. Integer eleifend lacus ac neque. Fusce tempus. In hac habitasse platea dictumst. Nulla arcu neque, gravida at, rhoncus id, pharetra vitae, tortor. Aenean vestibulum consequat augue.</p>
  </li>
  <li><div class="handle"><img src='images/title4.png'></div><img src='images/image_test.gif' align='left'>
    <h3>Content 4</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus vestibulum metus sed massa. Pellentesque pharetra felis a enim. Aliquam sapien nisl, iaculis ac, hendrerit placerat, iaculis congue, augue. Quisque eget mi quis purus vestibulum eleifend. Maecenas condimentum eros vel eros. Ut facilisis leo id mi. Suspendisse nisl magna, consequat quis, pretium eget, laoreet vel, orci.<br>
      <br>
      Mauris sed mauris. Praesent imperdiet, nunc ut sollicitudin hendrerit, nisi tellus mollis leo, blandit pharetra nulla orci id eros. Nullam ut nunc. Praesent lacus lacus, tempor a, dignissim eu, tristique ac, tortor. Sed faucibus. Integer eleifend lacus ac neque. Fusce tempus. In hac habitasse platea dictumst. Nulla arcu neque, gravida at, rhoncus id, pharetra vitae, tortor. Aenean vestibulum consequat augue.</p>
  </li>
</ul>

  Размер:  188,71kB | Изменен: 14.01.13 | Загрузок: 135
Бесплатные курсы

Категории

Теги: , , ,

Оцените материал:

Рейтинг: 10.0/10 (2)


КомментарииКомментарии:

Нет комментариев к этой статье.


Поля, обозначенные как *, обязательны.





Максимальная длина сообщения 900 символов. Осталось   символов

 

Старые →← Новые