Обрезка текста, 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 == '') ? ' ' : '… ' ) +'</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 == '') ? ' ' : '… ' ); meSuffix.css('display', settings.display); meToggle.html( (settings.display == '') ? settings.hideText : settings.showText ); }); } }) }; })(jQuery); Сам в JS не силен, поэтому прошу гуру подсказать решение. |
Часовой пояс GMT +3, время: 05:21. |