Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.09.2014, 16:39
Новичок на форуме
Отправить личное сообщение для katehizis Посмотреть профиль Найти все сообщения от katehizis
 
Регистрация: 10.09.2014
Сообщений: 1

Обрезка текста, 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 не силен, поэтому прошу гуру подсказать решение.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Подскажите плагин для оформления текста FRIE jQuery 3 26.07.2012 18:28
Обрезка текста по ограничению..PX s.cool.men Events/DOM/Window 0 29.02.2012 17:40
Обрезка текста coolplayer Общие вопросы Javascript 10 18.10.2011 07:20
Чудеса математики js при padding borovik Элементы интерфейса 6 09.07.2011 22:02
Обрезка длинного текста CJRoman Общие вопросы Javascript 10 19.10.2009 17:06