Экспандер

Экспандер - это нечто вроде спойлера: показывает скрытую часть текста по запросу пользователя. Через некоторое время (по таймеру) текст возвращается в исходное состояние. Работает как скрипт для jQuery.


Демо:


Реализация:
Скачиваем, кладём на хостинг и подключаем в /head сам скрипт:
<script src='http://plugins.learningjquery.com/expander/jquery.expander.js' type='text/javascript'/></script>

Html блок для вставки в сообщение блога:
<div class="expandable">
<p>
Я.Онлайн — это бесплатная программа для тех, кто хочет быть всегда на связи.
Общайтесь с коллегами, друзьями и знакомыми в интернете, мгновенно узнавайте о новых письмах с помощью Я.Онлайнa.</p>
</div>
Используется класс expandable.

Скрипт подключения:
<script type="text/javascript">
$(document).ready(function() {
  $('div.expandable p').expander({
    slicePoint:       120,  // default is 100
    expandText:         'подробности', // default is 'read more...'
    expandEffect: 'fadeIn',
    collapseTimer:    5000, // re-collapses after 5 seconds; default is 0, so no re-collapsing
    userCollapseText: '[^]'  // default is '[collapse expanded text]'
  });
  
});
</script>

slicePoint: 120 - числом задается порог текста до экспандера.
collapseTimer: 5000 - через 5 секунд тескт вернётся в исходное положение
expandText: 'подробности' и userCollapseText: '[^]' - думаю, с этим понятно :)
expandEffect: 'show' (либо 'fadeIn') - эффекты анимации: в первом случае текст появляется резко, во втором плавно с задержкой.

Оф.страничка плагина тут.

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

Отправить комментарий