Гостевой вход

Вы не залогинились
09:50

Вывод основной части контента по клику

Категория: Эффекты с текстом и ссылками

Метки: раскрывающийся текст по клику
Сегодня мы рассмотрим скрипт, с помощью которого можно оформлять материал следующим образом: краткая версия материала, по клику на ссылке "Читать больше", показывается полный текст материала на этой же странице.
Чтобы понять окончательно, о чём идёт речь, перейдите на демо-страницу .
Для работы скрипта необходимо подключение библиотеки jQuery и, собственно , самого скрипта в шапке страницы сайта.

Код

<script type="text/javascript" src="/js/jquery-1.10.2.js"></script>  
  <script src="/js/text.js"></script>  


Текст материала нужно заключить в тег с классом "comment". В демо-примере выглядит так:

Код

<p class="comment">
Здесь текст материала
</p>


В самом низу кода страницы подключить скрипт:

Код

<script language="javascript">
$(document).ready(function() {  
$(".comment").shorten();
$(".comment-small").shorten({showChars: 10});
  });
</script>  


Теперь скрипт будет работать. Внутри самого файла скрипта text.js есть настройки, в которых вы можете изменить названия для ссылки "Читать больше" и "Свернуть":

Код

showChars: 100,
  minHideChars: 10,
  ellipsesText: "...",
  moreText: "Читать больше",
  lessText: "Свернуть",
  onLess: function() {},
  onMore: function() {},
  errMsg: null,
  force: false


Оформить сами ссылки "Читать больше" и "Свернуть" по-своему, можно, прописав в CSS-стилях параметры для класса .morelink

Просмотров: 18 | Скачиваний: 0 | Комментариев: 0 | Рейтинг: 0.0/Оценок: 0

Материалы схожей тематики

Похожих материалов не найдено

Онлайн статистика

24.01.2018

Ср

Онлайн всего: 1
Гостей: 1
Пользователей: 0

На сайте сейчас: