Перейти к содержанию

Обрезка текста на JQuery

ArtemPitov

416 просмотров

Написал маленький плагин для скрытия текста, может кому пригодится.
 

Настройки 

data-length="100" - длина, включая пробелы и html теги | default: 100
data-text_show="Показать еще" - текст кнопки
data-text_hide="Скрыть" - текст кнопки

 

Использование 

<div class="Htext" data-length="250" data-text_show="Показать еще" data-text_hide="Скрыть">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Сам плагин 

 

Спойлер

(($) => {
    $.fn.extend({ 
        Htext: function() 
        {
        	let default_options = {
        		lenght: 100,
        		text_show: 'Read more &#8594;',
        		text_hide: 'Hide &#8592;'
        	};

            return this.each(function() {
                let $this     = $(this),
                	length    = typeof $this.data('length') != 'undefined' ? $this.data('length') : default_options.lenght,
                	text_show = typeof $this.data('text_show') != 'undefined' ? $this.data('text_show') : default_options.text_show,
                	text_hide = typeof $this.data('text_hide') != 'undefined' ? $this.data('text_hide') : default_options.text_hide;

                	let text = $this.html();

                	if (text.length > length) {
                		let start = text.substring(0, length) + `<span class="htext-dot">...</span>`,
                			end   = 
                			`<span class="htext-more" style="display:none;">` 
                				+ text.substring(length, text.length) + 
                			`</span>
                			<button type="button" class="btn btn-link htext-action htex-show" 
                				data-show="`+ text_show +`" data-hide="`+ text_hide +`">`+ text_show +`</button>`;

                		$this.html(start + end);

                		$this.find('.htext-action').on('click', function () {
                			let $btn = $(this);

                			if ($btn.hasClass('htex-show')) {
                				$this.find('.htext-more').show();
                				$this.find('.htext-dot').hide();
                				$btn.removeClass('htex-show');
                				$btn.addClass('htex-hide');
                				$btn.text($btn.data('hide'));
                			} else {
                				$this.find('.htext-more').hide();
                				$this.find('.htext-dot').show();
                				$btn.removeClass('htex-hide');
                				$btn.addClass('htex-show');
                				$btn.text($btn.data('show'));
                			}
                		});
                	}
            });
        }
    });
    $('.htext').Htext();
})(jQuery);

 

 

  • +1 2


0 Комментариев


Рекомендуемые комментарии

Комментариев нет

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти
  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.