Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.08.2011, 12:03
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Плагин обрезающий текст для jQuery
Вот штампанул тока что плагин для jQuery, может кому надо будет... Что делает!? все просто, обрезает лишние строки. Тоесть первый параметр число указывающее скока можно строк отображать, и если текст превышает это число строк, то скрипт обрежет текст и подставит то что указано во втором параметре. По сути он не обрезает текст, а просто в то место где кончается строка, он вставляет то что указано во втором параметре.

вот смотрите:
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
(function( $ ){
$.fn.correctLines = function( maxLine, moreText ) {
	return this.each(function( index, self ) {
		var temp, classes, i, lineHeight;

		maxLine = ( temp = /^(?:.*\s)?fixline_([\d]+)(?:\s.*)?$/.exec( self.className ) ) && temp[1] || maxLine || 3;
		moreText = moreText || '...<br />';

		var od = $( self ).css( "display" );
		var clone = $( self ).css( "display", "block" ).clone( true ).
				css( {"height": "auto", "position": "absolute", "width": self.offsetWidth + "px" } ).html("");
		$( self ).css( "display", od ).after( clone );

		var height = 0,
			width = self.offsetWidth,
			lines = 0,
			lastHeight = 0,
			startWord = 0,
			endWord = -1,
			txt = self.innerHTML,
			part = [];

			while( /(<.*)\s(.*>)/g.exec( txt ) ) {
				txt = txt.replace(/(<.*)\s(.*>)/g, '$1&jftF767Tgjk56&$2');
			}
			txt = txt.split(' ');

		for( i = 0; i < txt.length; i++ ) {

			txt[i] = txt[i].replace(/&jftF767Tgjk56&/g, ' ');
			clone[0].innerHTML += txt[ i ] + ' ';

			if ( clone[0].clientHeight > lastHeight ) {

				height = lastHeight;
				startWord = endWord + 1;
				endWord = i - 1;

				lastHeight = clone[0].offsetHeight;

				if ( ++lines > maxLine ) {
					break;
				}
			}
		}

		if ( lines > maxLine ) {

			$( self ).css({height: height + "px", overflowY: 'hidden'});

			part = txt.slice( startWord, endWord + 1 );
			height = clone.html( part.join(' ') )[0].offsetHeight;
			for( i = part.length - 1; i >= 0; i-- ) {

				clone.html( part.join(' ') + moreText );

				if ( clone[0].offsetHeight > height ) {
					part.splice( i, 1 );
					endWord--;
				} else {
					break;
				}
			}

			txt[ endWord ] += moreText;

			self.innerHTML = txt.join(" ");
		} else {
			$( self ).css({height: "auto"});
		}

		clone.remove();
	});
}
})( jQuery );
</script>

<div style="width: 200px; border: 1px solid #000;">
	<div class="correct_comment">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt nunc commodo magna posuere sollicitudin. Quisque ultrices sodales nisi eu sagittis.</div>
</div>

<br />
<style>.fvem1{width:200px;font-size:14px;border:1px solid #000000;}</style> 
<div class="fvem1"> 
    <div class="correct_comment">Loremipsud <div style="font-size:45px">olorsitmet</div>, consecteturad ipiscingelit. Nulla tincidunt nunc commodo magna posuere sollicitudin. Quisque ultrices sodales nisi eu sagittis.</div> 
</div>
<br />
<style>.fvem2{width:20%;font-size:14px;border:1px solid #000000;}</style>
<div class="fvem2">
	<div class="correct_comment">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt nunc commodo magna posuere sollicitudin. Quisque ultrices sodales nisi eu sagittis.</div>
</div>

<script type="text/javascript">
	jQuery(".correct_comment").correctLines( 3, '<span onclick="jQuery(this).parent().css(\'height\', \'auto\').end().hide();">...&nbsp;<span style="color: #f00; text-decoration: underline; cursor: pointer;">more</span></span>' );
</script>
В примере текст на пять строк, но я ему говорю что надо тока три. В реале он их не обрезает, а просто в ту часть где нужно вставляет то что указано во втором параметре, а если не указано то ставить троеточее и перевод строки.

Последний раз редактировалось devote, 28.08.2011 в 16:13. Причина: гуд
Ответить с цитированием
  #2 (permalink)  
Старый 27.08.2011, 12:21
Аватар для Gozar
Отправить личное сообщение для Gozar Посмотреть профиль Найти все сообщения от Gozar
 
Регистрация: 07.06.2007
Сообщений: 7,504

Я правильно понял, что для того, чтобы посчитать количество k - переводов строк(\n - <br>) и в случае если k> заданного сделать subsring по последнему пробелу меньше допустим 400 символов с подстановкой за ними трех точек, ты написал 121 строку?

И зачем в твоем скрипте столько обращений к style?
__________________
Последний раз редактировалось Gozar, Сегодня в 24:14.
Ответить с цитированием
  #3 (permalink)  
Старый 27.08.2011, 12:24
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Сообщение от Gozar
ты написал 121 строку?
слушай я написал это за 15 мин от скуки, понятно дело не оптимизировал, и т.д. а шо прада много style чтоль? Ну ппц, видимо от невысыпания что-то я там нахимичил Ну ниче, еще надо 15 мин на него и глядишь строк меньше станет
Ответить с цитированием
  #4 (permalink)  
Старый 27.08.2011, 12:25
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

а вообще ты прав там слишком много ненужного мусора... хм... что-то я погорячился
Ответить с цитированием
  #5 (permalink)  
Старый 27.08.2011, 12:27
Аватар для Gozar
Отправить личное сообщение для Gozar Посмотреть профиль Найти все сообщения от Gozar
 
Регистрация: 07.06.2007
Сообщений: 7,504

напиши в 3 строки, по крайней мере большее количество возможно не потребуется ))
__________________
Последний раз редактировалось Gozar, Сегодня в 24:14.
Ответить с цитированием
  #6 (permalink)  
Старый 27.08.2011, 12:28
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

А слушай, стал то нужен для выяснения размера мать его строки в высоту... ну он же леально текст то не режет, а блок протсто уменьшает, и оверфлоу ставит... но тем немение можно сделать поменьше кода всеж
Ответить с цитированием
  #7 (permalink)  
Старый 27.08.2011, 12:29
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Сообщение от Gozar
Я правильно понял, для того чтобы посчитать количество k - переводов строк(\n - <br>) и в случае если k> заданного сделать subsring
Нет не правильно, в тексте нету этих переводов, текст в одну строку... посмотри внимательно
Ответить с цитированием
  #8 (permalink)  
Старый 27.08.2011, 12:29
Аватар для Gozar
Отправить личное сообщение для Gozar Посмотреть профиль Найти все сообщения от Gozar
 
Регистрация: 07.06.2007
Сообщений: 7,504

Сообщение от devote Посмотреть сообщение
А слушай, стал то нужен для выяснения размера мать его строки в высоту
ой, что-то мне кажется такое решение сомнительным.
__________________
Последний раз редактировалось Gozar, Сегодня в 24:14.
Ответить с цитированием
  #9 (permalink)  
Старый 27.08.2011, 12:30
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Будь там эти (\n - <br>) тогда и хрень эту писать не пришлось бы.)
Ответить с цитированием
  #10 (permalink)  
Старый 27.08.2011, 12:31
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Сообщение от Gozar
ой, что-то мне кажется такое решение сомнительным.
Главное фурычит
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При клике ссылки, открыть DIV блок, и при клике ещё раз, закрыть его Simon Общие вопросы Javascript 59 28.05.2017 17:31
jQuery для загрузки страницы в <div> Dr.Holerik jQuery 12 11.10.2016 17:36
JQuery плагин lightbox: На время отключить срабатывание senseysensor jQuery 2 23.12.2010 10:28
Вопрос: И опять про offsetLeft... sigurd Общие вопросы Javascript 11 04.10.2010 14:06
Jquery, Dynatree и JSON antirek jQuery 6 01.09.2009 15:00