Ограничение видимой части текста с помощью jquery Ограничение видимой части текста с помощью jquery

Ограничение видимой части текста с помощью jquery

Дата: Пятница, 12.10.2012, 17:33 | Сообщение # 1

Группа: Администраторы

Сообщений: 1530

js коддинг скрипта ограничения вывода видимой части текста на странице:

---------------------------------------------------------------------
<!DOCTYPE html>
<html>

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Hide Text</title>
<style>
body {
margin: 50px;
font: 15px/1.5 sans-serif;
}
img { margin: .8em 0; }
div { width:300px;
border: 1px solid #777;
padding: 1em;
}
#less { display: none; }
</style>
</head>
<body>
<div>
<h2>Ограничение видимой части текста</h2>

<p>Ограничение видимой части текста достаточно часто встречающаяся задача,
стоящая перед разработчиками сайта. Если на странице много много материалов,
то есть смысл выводить только заголовки текстов и их начальные тексты,
а остальное прятать и выводить только по требованию посетителя.</p>
<button id="more">Далее »</button>
<button id="less">«Скрыть</button>

</div>
<script>
function excerpt(str, nwords) {
var words = str.split(' ');
words.splice(nwords, words.length-1);
return words.join(' ') +
(words.length !== str.split(' ').length ? '…' : '');
}

var $p = $('p');
var $more = $('#more');
var $less = $('#less');

function less() {
$p.data('text', $p.html()); // store untouched text first
$p.html( excerpt($p.html(), 15) ); //количество выводимых слов
$more.show();
$less.hide();
}

function more() {
$p.html($p.data('text'));
$more.hide();
$less.show();
}

less(); // init
$('#more').click(more);
$('#less').click(less);
</script>

</body>
</html>
---------------------------------------------------------------------

Пример: http://jsbin.com/ufeyov/45/edit

Ограничение видимой части текста с помощью jquery - Архив