Javascript-форум (https://javascript.ru/forum/)
-   Ваши сайты и скрипты (https://javascript.ru/forum/project/)
-   -   jQuery plugin, обрезающий строки (https://javascript.ru/forum/project/35168-jquery-plugin-obrezayushhijj-stroki.html)

рони 01.02.2013 22:40

jQuery plugin, обрезающий строки
 
По мотивам Плагин обрезающий текст для jQuery
Вариант плагина для обрезки строк с возможностью(при желании) просмотра
обрезанного ...:write:
скрипт ниже работает с тегами любой вложености типа <p><span><b><b><b><b><b>ТУТ ТЕКСТ</b></b></b></b></b></span></p> достаточно указать любого из родителей

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
a.more {
   cursor: pointer;
   color: #FF0033;
}

div.more {
display: none;
position: absolute;
background-color: #FFFFCC;
border: #3366FF dashed 2px;
padding: 5px;
margin:  6px;
margin-right: 10px;

}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
(function ($) {
    $.fn.correctLines = function (options) {
        var o = jQuery.extend({
            maxLine: 5, //Видимое кол-во строк
            afterLength: ' ... ', //Текст после видимого содержания
            fullText: false, //Добавить ссылку для отображения скрытого текста
            moreText: '\u00BB\u00BB', //Текст ссылки до показа скрытого содержания
            lessText: '\u00AB\u00AB', //Текст ссылки после показа скрытого содержания
            classNew: 'more' // Класс для ссылки и скрытого текста
                   }, options);
        return this.each(function (index, self) {
            $(self).find('*:last').length && (self=$(self).find('*:last'));
            var txt = $(self).html().split(' ');
             $(self).html(txt[0]).css({
                "height": "auto"
            });
            var lastHeight = $(self).outerHeight();
            var k = 1,i;
            for (i = 1; i < txt.length; i++) {
                $(self).html(txt.slice(0, i).join(' ') + o.afterLength + o.moreText);
                if (lastHeight < $(self).outerHeight()) {
                    lastHeight = $(self).outerHeight();
                    k++;
                    if (k > o.maxLine) {
                        i--;
                        $(self).html(txt.slice(0, i).join(' ') + o.afterLength);
                        if (o.fullText) {
                            $("<a/>", {
                                "text": o.moreText,
                                "class": o.classNew
                            })
                                .click(function () {
                                var text = $(this).text() == o.moreText ? o.lessText : o.moreText;
                                $(this).text(text).nextAll("."+o.classNew).slideToggle()
                            }).appendTo($(self));
                            $("<br/>").appendTo($(self))
                            $("<div/>", {
                                "text": txt.slice(i).join(" "),
                                "class": o.classNew
                            })
                                .appendTo($(self))
                        };
                        break
                    }
                };
            };
            if (k <= o.maxLine) $(self).html(txt.join(' '));
        });
    }
})(jQuery);
</script>
  <title></title>
</head>
<body >
<article class="item2">
	<div class="top">
		<h1>
			<a data-product="1" href="products/apple-iphone-4s-16gb">Apple iPhone 4S 16Gb</a>
		</h1>

		<form class="variants" action="/cart">
			<span class="price">44 000&nbsp;<span class="currency">руб</span></span>

			<input id="variants_1" name="variant" value="1" type="radio" class="variant_radiobutton" checked style="display:none;"/>

			<input type="submit" class="button buy" value="Купить" data-result-text="Добавлено" />

			<a class="credit" href="#">В кредит</a>

			<span class="price">42 000&nbsp;<span class="currency">руб</span></span>

			<input id="variants_2" name="variant" value="2" type="radio" class="variant_radiobutton"  style="display:none;"/>

			<input type="submit" class="button buy" value="Купить" data-result-text="Добавлено" />

			<a class="credit" href="#">В кредит</a>

		</form>
	</div>

	<div class="bottom">
		<div class="text">
			<p><span><b><b><b><b><b>iPhone 4 получил 3,5-дюймовый дисплей с разрешением 960 x 640 пикселей. Толщина устройства всего 9,3 мм. Передняя и задняя стороны аппарата обе плоские, выполнены из стекла, торцевая окантовка - стальная. У телефона есть фронтальная камера для видеозвонков, дополнительный микрофон для шумоподавления, а слот SIM сменился на Micro SIM. Батарея обеспечивает до 14 часов в режиме разговора, 6/10 часов в режиме веб-серфинга по 3G/Wi-Fi, 10 часов просмотра видео, 40 часов прослушивания музыки и 300 часов режима ожидания. Кроме того, добавлена поддержка Wi-Fi 802.11n. Разрешение основной камеры 5 МП, имеется поддержка видеосъемки с разрешением 1280 x 720 пикселей со скоростью 30 кадров в секунду.Дисплей 3,5 дюйма, 640х960 точек, IPS, олеофобное покрытие / Двухъядерный A5 Чип, Графический ускоритель PowerVR SGX543MP2 / 8-мегапиксельная фотокамера, HD видео (1080pх) / Bluetooth 4.0 и Wi-Fi 802.11b/g/n / гарантия - 12 месяцев.</b></b></b></b></b></span></p>
			<p><span>iPhone 4 получил 3,5-дюймовый дисплей с разрешением 960 x 640 пикселей. Толщина устройства всего 9,3 мм. Передняя и задняя стороны аппарата обе плоские, выполнены из стекла, торцевая окантовка - стальная. У телефона есть фронтальная камера для видеозвонков, дополнительный микрофон для шумоподавления, а слот SIM сменился на Micro SIM. Батарея обеспечивает до 14 часов в режиме разговора, 6/10 часов в режиме веб-серфинга по 3G/Wi-Fi, 10 часов просмотра видео, 40 часов прослушивания музыки и 300 часов режима ожидания. Кроме того, добавлена поддержка Wi-Fi 802.11n. Разрешение основной камеры 5 МП, имеется поддержка видеосъемки с разрешением 1280 x 720 пикселей со скоростью 30 кадров в секунду.Дисплей 3,5 дюйма, 640х960 точек, IPS, олеофобное покрытие / Двухъядерный A5 Чип, Графический ускоритель PowerVR SGX543MP2 / 8-мегапиксельная фотокамера, HD видео (1080pх) / Bluetooth 4.0 и Wi-Fi 802.11b/g/n / гарантия - 12 месяцев.</span></p>
			<p><span>iPhone 4 получил 3,5-дюймовый дисплей с разрешением 960 x 640 пикселей. Толщина устройства всего 9,3 мм. Передняя и задняя стороны аппарата обе плоские, выполнены из стекла, торцевая окантовка - стальная. У телефона есть фронтальная камера для видеозвонков, дополнительный микрофон для шумоподавления, а слот SIM сменился на Micro SIM. Батарея обеспечивает до 14 часов в режиме разговора, 6/10 часов в режиме веб-серфинга по 3G/Wi-Fi, 10 часов просмотра видео, 40 часов прослушивания музыки и 300 часов режима ожидания. Кроме того, добавлена поддержка Wi-Fi 802.11n. Разрешение основной камеры 5 МП, имеется поддержка видеосъемки с разрешением 1280 x 720 пикселей со скоростью 30 кадров в секунду.Дисплей 3,5 дюйма, 640х960 точек, IPS, олеофобное покрытие / Двухъядерный A5 Чип, Графический ускоритель PowerVR SGX543MP2 / 8-мегапиксельная фотокамера, HD видео (1080pх) / Bluetooth 4.0 и Wi-Fi 802.11b/g/n / гарантия - 12 месяцев.</span></p>
		</div>
	</div>
    <div class="bottom">
		<div class="text2">
			<p><span><b><b><b><b><b>iPhone 4 получил 3,5-дюймовый дисплей с разрешением 960 x 640 пикселей. Толщина устройства всего 9,3 мм. Передняя и задняя стороны аппарата обе плоские, выполнены из стекла, торцевая окантовка - стальная. У телефона есть фронтальная камера для видеозвонков, дополнительный микрофон для шумоподавления, а слот SIM сменился на Micro SIM. Батарея обеспечивает до 14 часов в режиме разговора, 6/10 часов в режиме веб-серфинга по 3G/Wi-Fi, 10 часов просмотра видео, 40 часов прослушивания музыки и 300 часов режима ожидания. Кроме того, добавлена поддержка Wi-Fi 802.11n. Разрешение основной камеры 5 МП, имеется поддержка видеосъемки с разрешением 1280 x 720 пикселей со скоростью 30 кадров в секунду.Дисплей 3,5 дюйма, 640х960 точек, IPS, олеофобное покрытие / Двухъядерный A5 Чип, Графический ускоритель PowerVR SGX543MP2 / 8-мегапиксельная фотокамера, HD видео (1080pх) / Bluetooth 4.0 и Wi-Fi 802.11b/g/n / гарантия - 12 месяцев.</b></b></b></b></b></span></p>
			<p><span>iPhone 4 получил 3,5-дюймовый дисплей с разрешением 960 x 640 пикселей. Толщина устройства всего 9,3 мм. Передняя и задняя стороны аппарата обе плоские, выполнены из стекла, торцевая окантовка - стальная. У телефона есть фронтальная камера для видеозвонков, дополнительный микрофон для шумоподавления, а слот SIM сменился на Micro SIM. Батарея обеспечивает до 14 часов в режиме разговора, 6/10 часов в режиме веб-серфинга по 3G/Wi-Fi, 10 часов просмотра видео, 40 часов прослушивания музыки и 300 часов режима ожидания. Кроме того, добавлена поддержка Wi-Fi 802.11n. Разрешение основной камеры 5 МП, имеется поддержка видеосъемки с разрешением 1280 x 720 пикселей со скоростью 30 кадров в секунду.Дисплей 3,5 дюйма, 640х960 точек, IPS, олеофобное покрытие / Двухъядерный A5 Чип, Графический ускоритель PowerVR SGX543MP2 / 8-мегапиксельная фотокамера, HD видео (1080pх) / Bluetooth 4.0 и Wi-Fi 802.11b/g/n / гарантия - 12 месяцев.</span></p>
			<p><span>iPhone 4 получил 3,5-дюймовый дисплей с разрешением 960 x 640 пикселей. Толщина устройства всего 9,3 мм. Передняя и задняя стороны аппарата обе плоские, выполнены из стекла, торцевая окантовка - стальная. У телефона есть фронтальная камера для видеозвонков, дополнительный микрофон для шумоподавления, а слот SIM сменился на Micro SIM. Батарея обеспечивает до 14 часов в режиме разговора, 6/10  8-мегапиксельная фотокамера, HD видео (1080pх) / Bluetooth 4.0 и Wi-Fi 802.11b/g/n / гарантия - 12 месяцев.</span></p>
		</div>
	</div>
</article>
<script language="JavaScript" type="text/javascript">
$(".text p").correctLines({fullText: true,maxLine: 3 })
$(".text2 span").correctLines({fullText: false,maxLine: 4,afterLength: " \u26B9\u26B9\u26B9"  })
</script>
</body>
</html>

danik.js 01.02.2013 23:19

for (i = 1; i < txt.length; i++) - глобальную i определил
Зачем css в параметрах передавать? Для этого есть каскадные таблицы стилей. А для связи - css-классы.

рони 01.02.2013 23:28

Цитата:

Сообщение от danik.js
for (i = 1; i < txt.length; i++) - глобальную i определил
Зачем css в параметрах передавать?

i поправил, css можно вынести при желании в таблицы, а css класс добавлен, кто хочет может его использовать или установить свой

рони 01.02.2013 23:40

Вариант с css
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
a.more {
   cursor: pointer;
   color: #FF0033;
}

div.more {
display: none;
position: absolute;
background-color: #FFFFCC;
border: #3366FF dashed 2px;
padding: 5px;
margin: 2px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
(function ($) {
    $.fn.correctLines = function (options) {
        var o = jQuery.extend({
            maxLine: 5, //Видимое кол-во строк
            afterLength: ' ... ', //Текст после видимого содержания
            fullText: false, //Добавить ссылку для отображения скрытого текста
            moreText: '\u00BB\u00BB', //Текст ссылки до показа скрытого содержания
            lessText: '\u00AB\u00AB', //Текст ссылки после показа скрытого содержания
            classNew: 'more' // Класс для ссылки и скрытого текста
                   }, options);
        return this.each(function (index, self) {
            var txt = $(self).html().split(' ');
            $(self).html(txt[0]).css({
                "height": "auto"
            });
            var lastHeight = $(self).outerHeight();
            var k = 1,i;
            for (i = 1; i < txt.length; i++) {
                $(self).html(txt.slice(0, i).join(' ') + o.afterLength + o.moreText);
                if (lastHeight < $(self).outerHeight()) {
                    lastHeight = $(self).outerHeight();
                    k++;
                    if (k > o.maxLine) {
                        i--;
                        $(self).html(txt.slice(0, i).join(' ') + o.afterLength);
                        if (o.fullText) {
                            $("<a/>", {
                                "text": o.moreText,
                                "class": o.classNew
                            })
                                .click(function () {
                                var text = $(this).text() == o.moreText ? o.lessText : o.moreText;
                                $(this).text(text).nextAll("."+o.classNew).slideToggle()
                            }).appendTo($(self));
                            $("<br/>").appendTo($(self))
                            $("<div/>", {
                                "text": txt.slice(i).join(" "),
                                "class": o.classNew
                            })
                                .appendTo($(self))
                        };
                        break
                    }
                };
            };
            if (k <= o.maxLine) $(self).html(txt.join(' '));
        });
    }
})(jQuery);
</script>
  <title></title>
</head>
<body >
<article class="item2">
	<div class="top">
		<h1>
			<a data-product="1" href="products/apple-iphone-4s-16gb">Apple iPhone 4S 16Gb</a>
		</h1>

		<form class="variants" action="/cart">
			<span class="price">44 000&nbsp;<span class="currency">руб</span></span>

			<input id="variants_1" name="variant" value="1" type="radio" class="variant_radiobutton" checked style="display:none;"/>

			<input type="submit" class="button buy" value="Купить" data-result-text="Добавлено" />

			<a class="credit" href="#">В кредит</a>

			<span class="price">42 000&nbsp;<span class="currency">руб</span></span>

			<input id="variants_2" name="variant" value="2" type="radio" class="variant_radiobutton"  style="display:none;"/>

			<input type="submit" class="button buy" value="Купить" data-result-text="Добавлено" />

			<a class="credit" href="#">В кредит</a>

		</form>
	</div>

    <div class="bottom">
		<div class="text"><p><span>iPhone 4 получил 3,5-дюймовый дисплей с разрешением 960 x 640 пикселей. Толщина устройства всего 9,3 мм. Передняя и задняя стороны аппарата обе плоские, выполнены из стекла, торцевая окантовка - стальная. У телефона есть фронтальная камера для видеозвонков, дополнительный микрофон для шумоподавления, а слот SIM сменился на Micro SIM. Батарея обеспечивает до 14 часов в режиме разговора, 6/10 часов в режиме веб-серфинга по 3G/Wi-Fi, 10 часов просмотра видео, 40 часов прослушивания музыки и 300 часов режима ожидания. Кроме того, добавлена поддержка Wi-Fi 802.11n. Разрешение основной камеры 5 МП, имеется поддержка видеосъемки с разрешением 1280 x 720 пикселей со скоростью 30 кадров в секунду.Дисплей 3,5 дюйма, 640х960 точек, IPS, олеофобное покрытие / Двухъядерный A5 Чип, Графический ускоритель PowerVR SGX543MP2 / 8-мегапиксельная фотокамера, HD видео (1080pх) / Bluetooth 4.0 и Wi-Fi 802.11b/g/n / гарантия - 12 месяцев.</span></p></div>
	</div>
     <div class="bottom">
		<div class="text"><p><span>iPhone 4 получил 3,5-дюймовый дисплей с разрешением 960 x 640 пикселей. Толщина устройства всего 9,3 мм. Передняя и задняя стороны аппарата обе плоские, выполнены из стекла, торцевая окантовка - стальная. У телефона есть фронтальная камера</span></p></div>
	</div>
    <div class="bottom">
		<div class="text"><p><span>iPhone 4 получил 3,5-дюймовый дисплей с разрешением 960 x 640 пикселей. Толщина устройства всего 9,3 мм. Передняя и задняя стороны аппарата обе плоские, выполнены из стекла, торцевая окантовка - стальная. У телефона есть фронтальная камера для видеозвонков, дополнительный микрофон для шумоподавления, а слот SIM сменился на Micro SIM. Батарея обеспечивает до 14 часов в режиме разговора, 6/10 часов в режиме веб-серфинга по 3G/Wi-Fi, 10 часов просмотра видео, 40 часов прослушивания музыки и 300 часов режима ожидания. Кроме того, добавлена поддержка Wi-Fi 802.11n. Разрешение основной камеры 5 МП, имеется поддержка видеосъемки с разрешением 1280 x 720 пикселей со скоростью 30 кадров в секунду.Дисплей 3,5 дюйма, 640х960 точек, IPS, олеофобное покрытие / Двухъядерный A5 Чип, Графический ускоритель PowerVR SGX543MP2 / 8-мегапиксельная фотокамера, HD видео (1080pх) / Bluetooth 4.0 и Wi-Fi 802.11b/g/n / гарантия - 12 месяцев.</span></p></div>
	</div>
    <div class="bottom">
		<div class="text"><p><span>iPhone 4 получил 3,5-дюймовый дисплей с разрешением 960 x 640 пикселей. Толщина устройства всего 9,3 мм. Передняя и задняя стороны аппарата обе плоские, выполнены из стекла, торцевая окантовка - стальная. У телефона есть фронтальная камера для видеозвонков, дополнительный микрофон для шумоподавления, а слот SIM сменился на Micro SIM. Батарея обеспечивает до 14 часов в режиме разговора, 6/10 часов в режиме веб-серфинга по 3G/Wi-Fi, 10 часов просмотра видео, 40 часов прослушивания музыки и 300 часов режима ожидания. Кроме того, добавлена поддержка Wi-Fi 802.11n. Разрешение основной камеры 5 МП, имеется поддержка видеосъемки с разрешением 1280 x 720 пикселей со скоростью 30 кадров в секунду.Дисплей 3,5 дюйма, 640х960 точек, IPS, олеофобное покрытие / Двухъядерный A5 Чип, Графический ускоритель PowerVR SGX543MP2 / 8-мегапиксельная фотокамера, HD видео (1080pх) / Bluetooth 4.0 и Wi-Fi 802.11b/g/n / гарантия - 12 месяцев.</span></p></div>
	</div>
</article>
<script language="JavaScript" type="text/javascript">
$(".text span").correctLines({fullText: true,maxLine: 3 })
</script>
</body>
</html>

Deff 01.02.2013 23:43

Достаточно востребованная фишка для подгружаемых новостных блоков


Часовой пояс GMT +3, время: 17:25.