Скрипт сокращения текста phpBB3
Добавлено: 27 сен 2015, 14:56
Всем доброго времени суток, давно уже не было анонсов разных полезных скриптов, да вот наткнулся на один интересный скрипт. Собственно и делюсь им 
Представим ситуацию - имеем блок или кучу блоков в которых идет вывод текста и вам нужно ограничить как нибудь цивильно количество знаков. Разумеется через php можно реализовать данную задачу, но есть вариант по интереснее и на JQuery - мы просто будем отображать определенное количество знаков текста, а остальное скроем под ссылкой-кнопкой, по нажатию на которую будет отображен весь текст. Демо тут. Этот скрипт можно подключать к каким угодно текстовым блокам, цепляясь к ним за имена классов или за айди, об этом подробнее будет описано ниже....
src забираем скрипт jquery.shorten.js и закидываем его в любую удобную папку на сервере форума. В шаблон overall_header.html до тега </head> добавляем
element сократит текст до 100 знаков и добавит ссылку more для раскрытия всего остального текста. А следующим способом мы переименуем ссылку раскрытия в тест
А это переименует ссылку закрытия в тест2
Теперь же приведем более предметный пример, для блока с классом text мы сократим текст до 50 знаков и переименуем ссылки закрытия и раскрытия
Введение
Представим ситуацию - имеем блок или кучу блоков в которых идет вывод текста и вам нужно ограничить как нибудь цивильно количество знаков. Разумеется через php можно реализовать данную задачу, но есть вариант по интереснее и на JQuery - мы просто будем отображать определенное количество знаков текста, а остальное скроем под ссылкой-кнопкой, по нажатию на которую будет отображен весь текст. Демо тут. Этот скрипт можно подключать к каким угодно текстовым блокам, цепляясь к ним за имена классов или за айди, об этом подробнее будет описано ниже....
Подключение
Для начала скачиваем архив, из папки Код: Выделить всё
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="путь до скрипта/jquery.shorten.js"></script>Если у вас ранее подключен JQuery, то нужно убрать первую строку дабы исключить конфликты
Далее можно использовать простейший вызов
Код: Выделить всё
<script language="javascript">
$(document).ready(function() {
$(element).shorten();
});
</script>
Данный код вставляется в шаблон overall_footer.html перед тегом </body>
Который в блоке Код: Выделить всё
<script language="javascript">
$(document).ready(function() {
$(element).shorten({
moreText: 'тест'
});
});
</script>
Код: Выделить всё
<script language="javascript">
$(document).ready(function() {
$(element).shorten({
lessText: 'тест2'
});
});
</script>
Код: Выделить всё
<script language="javascript">
$(document).ready(function() {
$(".text").shorten({
moreText: '... читать полностью',
lessText: 'свернуть',
showChars: '50',
});
});
</script>Можно управлять 2-мя и более блоками, указывая разные имена классов или айди
[code]<script language="javascript">
$(document).ready(function() {
$(".comment").shorten({showChars: 20});
$(".comment-small").shorten({showChars: 10});
});
</script>[/code]
Собственно, думаю кому то этот скрипт будет полезным, успехов в начинаниях [code]<script language="javascript">
$(document).ready(function() {
$(".comment").shorten({showChars: 20});
$(".comment-small").shorten({showChars: 10});
});
</script>[/code]