Показать сообщение отдельно
  #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. Причина: гуд
Ответить с цитированием