Плагин обрезающий текст для 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();">... <span style="color: #f00; text-decoration: underline; cursor: pointer;">more</span></span>' );
</script>
В примере текст на пять строк, но я ему говорю что надо тока три. В реале он их не обрезает, а просто в ту часть где нужно вставляет то что указано во втором параметре, а если не указано то ставить троеточее и перевод строки. |
Я правильно понял, что для того, чтобы посчитать количество k - переводов строк(\n - <br>) и в случае если k> заданного сделать subsring по последнему пробелу меньше допустим 400 символов с подстановкой за ними трех точек, ты написал 121 строку?
И зачем в твоем скрипте столько обращений к style? |
Цитата:
|
а вообще ты прав там слишком много ненужного мусора... хм... что-то я погорячился
|
напиши в 3 строки, по крайней мере большее количество возможно не потребуется ))
|
А слушай, стал то нужен для выяснения размера мать его строки в высоту... ну он же леально текст то не режет, а блок протсто уменьшает, и оверфлоу ставит... но тем немение можно сделать поменьше кода всеж
|
Цитата:
|
Цитата:
|
Будь там эти (\n - <br>) тогда и хрень эту писать не пришлось бы.)
|
Цитата:
|
применение плагина?
|
а этот кусок можно вообще удалить:
if ( self.className.indexOf('fixline_') >= 0 ) {
classes = self.className.split(" ");
for( i = 0; i < classes.length; i++ ) {
if ( classes[ i ].indexOf('fixline_') >= 0) {
temp = classes[ i ].split("_");
maxLine = parseInt( temp[1] );
break;
}
}
}
Он нужен для того что бы можно было указать класс у элемента с числом строк, типо универсал и все такое... ну пример у меня стоит так:<div class="correct_comment"> а можно так: <div class="correct_comment fixline_2"> и тогда приоритет будет не первый параметр у функции, а то число что стоит после fixline_ |
devote, я думал, плагины для jQuery пишутся на jQuery ;)
ну там всякие hasClass, $.each, фишки да цепочки вызовов |
Цитата:
смотрим первый пост |
Цитата:
|
Вот немного его уменьшил:
смотрим первый пост |
еще парочку подкину идей для сжатия кода.
jQuery.fn.correctLines = function( maxLine, moreText ) {
var self = this[ 0 ], temp, classes, i, lineHeight,
*!*
$ = jQuery;
*/!*
.....
lineHeight.toString().indexOf("px") > 0
~(lineHeight+'').indexOf("px")
....
clone.html('');
jQuery( document.body ).append( clone );
jQuery( document.body ).append( clone.empty() ); ....
for( i = 0; i < txt.length; i++ ) {
clone[0].innerHTML += txt[ i ] + ' ';
if ( clone[0].offsetHeight > lastHeight ) {
if ( lastHeight == 0 ) {
height = clone[0].offsetHeight;
}
startWord = endWord + 1;
endWord = i - 1;
lines++;
lastHeight = clone[0].offsetHeight;
}
if ( lines > maxLine ) {
break;
}
}
jQuery.each : Цитата:
$.each(txt, function(i, a) {
clone[0].innerHTML += a + ' ';
if (clone[0].offsetHeight > lastHeight) {
if (lastHeight == 0) {
height = clone[0].offsetHeight;
}
startWord = endWord + 1;
endWord = i - 1;
lastHeight = clone[0].offsetHeight;
}
if ( ++lines > maxLine) return false;
});
...
this.css({
*!*
height: lines > maxLine ? (lineHeight * maxLine) + "px" *!*: "auto"*/!*,
*/!*
overflowY: 'hidden'
});
????? .....
for( i = startWord; i <= endWord; i++ ) {
part.push( txt[ i ] );
}
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;
}
}
не удумал, как заменить, но повторябщиеся операции всегда надо заменять |
Цитата:
|
Внес изменения в первый пост, с замечаниями от melky, кроме конечно .each() она мне не катит, там у мну break стоит, а этот .each() на это не предусмотрен.
|
я там дал выдержку из документации и подчеркнул кой чего :)
|
Цитата:
|
devote, еще чуть-чуть.
дальше совершаются операции, о которых ведаете только вы :)
$.fn.correctLines = function( maxLine, moreText ) {
....
var clone = $( self ).clone( true ).
css( {"height": "auto", "width": self.offsetWidth + "px"} ).html("W");
lineHeight = this.css('line-height');
if ( lineHeight == "normal" ) {
*!*$( document.body ).append( clone );*/!*
*!*lineHeight = clone[0].clientHeight;*/!*
*!*clone.remove();*/!*
} else if ......
var height = lineHeight,
width = self.offsetWidth,
.....
*!*$( document.body ).append( clone.empty() );*/!*
$.fn.correctLines = function( maxLine, moreText ) {
....
var clone = $( self ).clone( true ).
css( {"height": "auto", "width": self.offsetWidth + "px"} ).html("W");
*!*clone.appendTo( document.body );*/!*
lineHeight = this.css('line-height');
if ( lineHeight == "normal" ) {
lineHeight = clone[0].clientHeight;
} else if ......
var height = lineHeight,
width = self.offsetWidth,
.....
*!*clone.empty();*/!*
|
Цитата:
|
Цитата:
|
гуд... ну больше уж точно некуда тут оптимизить, хотя если хорошенько все продумать то вполне возможно и можно.
|
Перестало работать
|
Цитата:
|
да в файрфоксе что-то перестало пахать
|
поправил, убрал знак ~ из кода: ~( lineHeight + '' ).indexOf("px")
|
Ну дык че, полезный хоть миниплаг? Или хренью я занимаюсь? Фишка этого плага в том что он не считает строки по \n <br /> а считает их именно так как ставит браузер, тоесть это удобно например делать там где люди оставляют огромные коменты, и их можно свернуть таким образом. Или иногда на сайтах нужно в каком нить блоке показать часть новостей или чего либо подобного, тоже удобно. Не нужно считать там количество букв, не зная при этом размер шрифта и т.д. Думаю я где нить его точняк пришпандолю в каком нить проекте который буду делать =)
|
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
(function( $ ){
$.fn.correctLines = function( maxLine, moreText ) {
var self = this[ 0 ], temp, classes, i, lineHeight;
maxLine = ( temp = /^(?:.*\s)?fixline_([\d]+)(?:\s.*)?$/.exec( self.className ) ) && temp[1] || maxLine || 3;
moreText = moreText || '...<br />';
var clone = $( self ).clone( true ).
css( {"height": "auto", "width": self.offsetWidth + "px"} ).html("W");
clone.appendTo( document.body );
lineHeight = this.css('line-height');
if ( lineHeight == "normal" ) {
lineHeight = clone[0].clientHeight;
} else if ( ( lineHeight + '' ).indexOf("px") > 0 ) {
lineHeight = parseInt( lineHeight );
} else {
lineHeight = parseInt( this.css('font-size') ) * parseFloat( lineHeight );
}
var height = lineHeight,
width = self.offsetWidth,
lines = 0,
lastHeight = 0,
startWord = 0,
endWord = -1,
txt = self.innerHTML.split(" "),
part = [];
clone.empty();
for( i = 0; i < txt.length; i++ ) {
clone[0].innerHTML += txt[ i ] + ' ';
if ( clone[0].offsetHeight > lastHeight ) {
if ( lastHeight == 0 ) {
height = clone[0].offsetHeight;
}
startWord = endWord + 1;
endWord = i - 1;
lastHeight = clone[0].offsetHeight;
if ( ++lines > maxLine ) {
break;
}
}
}
if ( lines > maxLine ) {
this.css({height: ( lineHeight * maxLine ) + "px", overflowY: 'hidden'});
part = txt.slice( startWord, endWord + 1 );
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 {
this.css({height: "auto"});
}
clone.remove();
}
})( jQuery );
</script>
<style>.fvem{width:20%;font-size:14px;border:1px solid #000000;}</style>
<div class="fvem">
<div class="correct_comment">Loremipsudolorsitmet, consecteturadipiscingelit. 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();">... <span style="color: #f00; text-decoration: underline; cursor: pointer;">more</span></span>' );
</script>
|
Gozar,
ща подумаю над этим, где-то что-то я упустил |
devote,
Некоторые вещи лучше не делать чем делать. Идея забавна, но по мне так маложизнеспособна. |
Это был не самый распространенный вариант, а теперь сюрприз, самый распространенный:
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
(function( $ ){
$.fn.correctLines = function( maxLine, moreText ) {
var self = this[ 0 ], temp, classes, i, lineHeight;
maxLine = ( temp = /^(?:.*\s)?fixline_([\d]+)(?:\s.*)?$/.exec( self.className ) ) && temp[1] || maxLine || 3;
moreText = moreText || '...<br />';
var clone = $( self ).clone( true ).
css( {"height": "auto", "width": self.offsetWidth + "px"} ).html("W");
clone.appendTo( document.body );
lineHeight = this.css('line-height');
if ( lineHeight == "normal" ) {
lineHeight = clone[0].clientHeight;
} else if ( ( lineHeight + '' ).indexOf("px") > 0 ) {
lineHeight = parseInt( lineHeight );
} else {
lineHeight = parseInt( this.css('font-size') ) * parseFloat( lineHeight );
}
var height = lineHeight,
width = self.offsetWidth,
lines = 0,
lastHeight = 0,
startWord = 0,
endWord = -1,
txt = self.innerHTML.split(" "),
part = [];
clone.empty();
for( i = 0; i < txt.length; i++ ) {
clone[0].innerHTML += txt[ i ] + ' ';
if ( clone[0].offsetHeight > lastHeight ) {
if ( lastHeight == 0 ) {
height = clone[0].offsetHeight;
}
startWord = endWord + 1;
endWord = i - 1;
lastHeight = clone[0].offsetHeight;
if ( ++lines > maxLine ) {
break;
}
}
}
if ( lines > maxLine ) {
this.css({height: ( lineHeight * maxLine ) + "px", overflowY: 'hidden'});
part = txt.slice( startWord, endWord + 1 );
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 {
this.css({height: "auto"});
}
clone.remove();
}
})( jQuery );
</script>
<style>.fvem{width:200px;font-size:14px;border:1px solid #000000;}</style>
<div class="fvem">
<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>
<script type="text/javascript">
jQuery(".correct_comment").correctLines( 3, '<span onclick="jQuery(this).parent().css(\'height\', \'auto\').end().hide();">... <span style="color: #f00; text-decoration: underline; cursor: pointer;">more</span></span>' );
</script>
|
Gozar,
Все поправил, можешь наслаждаться =) |
devote,
Как же я могу наслаждаться если второй блок имеет прокрутку и текст не читается? Гибкость настройки такого плагина сравнима с кирпичом. В то же самое время любой веб мастер порежет текст до помещающихся в, заранее известного размера, блок символов текста, обрезая их по последнему пробелу и это все уместиться в 1-2 строки. |
Все сделал, куча всего даже снес =) Но вообще не рекомендуется пихать в текст теги с какими либо атрибутами... Но хотя щас я это учел...
Наслаждайтесь! ))) |
Цитата:
|
devote,
Не пользователи для программистов, а программисты для пользователей. Вот три причины по которым лично я не буду использовать этот плагин никогда: 1. Слишком большой скрипт, для решения задач вёрстки. Если можно решить проблему вёрсткой - css+html, то я буду решать задачу вёрсткой. 2. Пользователи пихают в текст всё подряд и придется резать теги скриптом, а значит нужен в 4 раза короче скрипт, который будет резать теги и заодно обрезать по символу. 3. На сайте может и чаще всего бывает и так много скриптов и нужна очень веская причина подключить ещё один. |
Цитата:
Цитата:
Цитата:
|
| Часовой пояс GMT +3, время: 21:12. |