Обрезка текста на JQuery
Написал маленький плагин для скрытия текста, может кому пригодится.
Настройки
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 →', text_hide: 'Hide ←' }; 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
5 комментариев
Рекомендованные комментарии
Создайте аккаунт или войдите в него для комментирования
Вы должны быть пользователем, чтобы оставить комментарий
Создать аккаунт
Зарегистрируйтесь для получения аккаунта. Это просто!
Зарегистрировать аккаунтВойти
Уже зарегистрированы? Войдите здесь.
Войти сейчас