RESWEB

адаптивная кроссбраузерная вёрстка

Скрываем лишний текст выходящий за рамки блока

Очень удобный скрипт скрывающий текст, который выходит за рамки блока. Возможность по разному оформить окончание текста: троеточие, надпись «читать далее», плюсик раскрывающий блок полностью и вариант с адаптивностью, когда текст подстраивается под размер контейнера.

В архиве лежит файл с примером, тот же что и здесь и сам скрипт под названием jquery.dotdotdot.js

Подключение скрипта

Закачиваете скрипт jquery.dotdotdot.js на хостинг в папку /js или подобную, где лежат у вас скрипты, в шапке между тегами <head>…</head> прописываете подключение. Подразумевается, что библиотека jquery у вас уже подключена.

<head>
...
<script language="javascript" src="js/jquery.dotdotdot.js"></script>
...
</head>

Например ваш текст находится в контейнере с классом «container»

<div class="container">
Это текст который вылезает за рамки контейнера
</div>

Троеточие в конце текста
Теперь надо инициировать скрипт. Самый просто вариант будет таким, вставляем это перед закрытием тега body

<script>
    $(document).ready(function() {
    	$(".container").dotdotdot();
    });
</script>

Ссылка в конце текста
Если в конце обрезанного текста у вас стоит ссылка «читать далее», то чтобы ее не обрезало и отобразило в конце надо в коде указать класс этой ссылки

<script>
        $(document).ready(function() {
    	$(".container").dotdotdot({
    		after: "a.readmore"
    	});
    });
</script>

Текст в резиновом контейнере
В случае если ваш блок с текстом адаптивный и меняет свои размеры в зависимости от размера экрана, то нужен такой код

<script>
           $(document).ready(function() {
    	$(".container").dotdotdot({
    		watch: "window"
    	});
    });
</script>

Сокращение длинных урл
При наличии в блоке списков длинных урл есть возможность их сократить. Для этого блоку надо задать id а урл обернуть дивами с классом «pathname».

<script>
             $('#container .pathname').each(function() {
    	var path = $(this).html().split( '/' );
    	if ( path.length > 1 ) {
    		var name = path.pop();
    		$(this).html( path.join( '/' ) + '<span class="filename">/' + name + '</span>' );
    		$(this).dotdotdot({
    			after: 'span.filename',
    			wrap: 'letter'
    		});						
    	}
 
</script>

Раскрытие блока при нажатии
Для раскрытия всего текста по нажатии на ссылку поставьте это, код формирует в конце текста ссылку в виде плюсика.

<script>
    $(document).ready(function() {
    	var $dot5 = $('#container');
				$dot5.append( ' <a class="toggle" href="#"><span class="open">[ + ]</span><span class="close">[ - ]</span></a>' );
				function createDots()
				{
					$dot5.dotdotdot({
						after: 'a.toggle'
					});
				}
				function destroyDots() {
					$dot5.trigger( 'destroy' );
				}
				createDots();
				$dot5.on(
					'click',
					'a.toggle',
					function() {
						$dot5.toggleClass( 'opened' );
 
						if ( $dot5.hasClass( 'opened' ) ) {
							destroyDots();
						} else {
							createDots();
						}
						return false;
					}
				);
    });
</script>

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *


Успешно отправлено!

Я постараюсь с Вами связаться как можно скорее.