Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Обрезка текста, JQ плагин "cutString" (https://javascript.ru/forum/jquery/50069-obrezka-teksta-jq-plagin-cutstring.html)

katehizis 10.09.2014 16:39

Обрезка текста, JQ плагин "cutString"
 
Нужно, чтобы длинный многострочный текст обрезался(скрывался), в конец добавлялось многоточие и ссылка "посмотреть больше". Щелчок по кнопке раскрывает весь текст и в конец вставляется кнопка "скрыть".
Искал в сети готовые решения. Все, которые нашел имеют серьезный недостаток: они работают с голым тестом без тэгов, например:
<div>здесь написан текст</div>


Остановился на решении "cutString". Скрытый текст заключается в <span></span> и после его показа происходит не состыковка с предыдущей строкой <p></p>. Можете посмотреть вот здесь: http://www.modano.ru/uniforma/fartuki

Вот код плагина:
(function( $ ) {
  $.fn.cutstring = function() {
		this.each(function() {
			var me = $(this);
			var settings = {
				display: me.is('[data-display]') ? me.attr('data-display') : 'none',
				maxLength: me.is('[data-max-length]') ? parseInt(me.attr('data-max-length')) : Math.ceil((me.html().length * 20) / 100),
				showText: me.is('[data-show-text]') ? me.attr('data-show-text') : 'читать далее',
				hideText: me.is('[data-hide-text]') ? me.attr('data-hide-text') : 'скрыть',
			};
			if ( me.html().length > settings.maxLength ) {
				var subText1 = me.html().substring(0, settings.maxLength);
				var subText2 = me.html().substring(settings.maxLength);
				var meHellip = $('<span>'+ ( (settings.display == '') ? ' ' : '&hellip; ' ) +'</span>').addClass('cutstring-hellip');
				var meSuffix = $('<span>'+ subText2 +'</span>').addClass('cutstring-suffix').css('display', settings.display);
				var meToggle = $('<a><span>'+ ( (settings.display == '') ? settings.hideText : settings.showText ) +'</span></a>').addClass('cutstring-toggle');
				me.html(subText1).append(meSuffix).append(meHellip).append(meToggle);
				meToggle.click(function() {
					settings.display = (settings.display == '') ? 'none' : '';
					meHellip.html( (settings.display == '') ? ' ' : '&hellip; ' );
					meSuffix.css('display', settings.display);
					meToggle.html( (settings.display == '') ? settings.hideText : settings.showText );
				});
			}
		})
  };
})(jQuery);


Сам в JS не силен, поэтому прошу гуру подсказать решение.


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