Демо:
Реализация:
Скачиваем, кладём на хостинг и подключаем в /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') - эффекты анимации: в первом случае текст появляется резко, во втором плавно с задержкой.
Оф.страничка плагина
Комментариев нет:
Отправить комментарий