Введение
Представим ситуацию - имеем блок или кучу блоков в которых идет вывод текста и вам нужно ограничить как нибудь цивильно количество знаков. Разумеется через 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]