18.01.13 
8946 
Горизонтальный аккордеон на 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>
Нет комментариев к этой статье.