Открыть меню    

jquery.autoellipsis jQuery плагин для автоматического добавления многоточия к выбранным элементам

jquery.autoellipsis многоточие к выбранным элементам jquery.autoellipsis - это jQuery плагин для автоматического добавления многоточия к выбранным элементам (многоточие ставится вместо текста, выходящего за пределы блока). Этот плагин оптимально использует доступное пространство, в отличие от методов с подсчетом символов.

Скачать jquery.autoellipsis

Последнюю версию jquery.autoellipsis можно скачать посредством нижеприведенных ссылок:

Как использовать:

.ellipsis( [selector], [options] ) 

Многоточие добавляется к выбранным элементам. Необязательный параметр selector определяет подэлементы, к которым добавится многоточие.

selector
Определяет элементы для реализации многоточия. Если данный параметр опущен, то по умолчанию многоточие будет добавлено всем дочерним элементам.
options
дополнительные параметры, передающиеся методу. Поддерживаются:
ellipsis
Характер многоточия или строка, используемая вместо многоточия. Например, ‛‛ три точки.
setTitle
Устанавливает атрибут title у измененных элементов, исходя из содержания элемента. Принимает значения never, onEllipsis или always. Когда используется onEllipsis, атрибут title ставится только при использовании многоточия. По умолчанию never.
Live
Когда установлено в true многоточие работает и с текущими и с будущими элементами из выборки jQuery. Также заново переопределяет многоточие при изменении размеров у целевого элемента. Используйте с осторожностью, так как этот режим опрашивает выбранные элементы. По умолчанию false.

Возвращает объект jQuery с измененными свойствами.

Пример

пример использования autoellipsis

Ниже приведен код с использованием плагина jquery.autoellipsis. Все довольно тривиально.

jQuery

                $(document).ready(function() {

                    $('.eplips__it_a').ellipsis('.eplips__sub-it',{'setTitle':'onEllipsis'} );


                    $('.eplips__it').ellipsis({'setTitle':'onEllipsis'} );

                });

CSS

            .eplips {
                margin: 100px auto 0;
                width: 400px;
                border: 1px solid #444;
                background-color: #EEEEEE; }
            .eplips__it,.eplips__it_a {
                margin: 5px 5px 10px;
                border: 1px solid #888;
                padding: 5px;
                background: #fff;
                height: 20px; }

HTML

        <div class="eplips">
            <div class="eplips__it_a">
                <span class="eplips__sub-it">
 Ut facilisis bibendum quam id consequat. -----text------
                </span>
            </div>
            <div class="eplips__it_a">
                <span class="eplips__sub-it">
Etiam enim mauris, bibendum et venenatis ut,-----text------
                </span>
            </div>
            <div class="eplips__it">
 Proin id suscipit odio. Nunc vel metus non magna mattis vestibulum-----text------
            </div>
            <div class="eplips__it">
Aenean accumsan, metus vitae pellentesque ornare,-----text------
            </div>
        </div>

Комментарии к статье

Добавить комментарий