Для получения полного доступа
зарегистрируйтесь.
RSS

Все сниппеты с тэгом «плагины»



dfatt
  • Репутация: 260
  • Сниппеты: 53
  • Ревизии: 7

На сайте Designmodo предоставлена большая подборка плагинов, без дополнительных библиотек типа jQuery.

В подборке есть плагин для модальных окон, сладер, проигрыватель видео, кастомный скроллбар и много другое. Вот список некоторых, интересных плагинов на мой взгляд.

Plyr (Github)
Красивый плеер для воспроизведения видео с таких сервисов как Youtube, Vimeo

Продолжение »

Gravatar image
zoxon
  • Репутация: 5
  • Сниппеты: 3
  • Ревизии: 1

В соц. сетях, например в Twitter, вы заметите, что даты выводятся в формате — 1 hour ago. Чтобы сделать на своё сайте также, нам достаточно использовать timeago.js

Если вам нужна поддержка русского языка, достаточно подключить его так:

<script src="https://raw.githubusercontent.com/rmm5t/jquery-timeago/master/jquery.timeago.js"></script>
<script src="https://raw.githubusercontent.com/rmm5t/jquery-timeago/master/locales/jquery.timeago.ru.js"></script>

Другие локализации можете найти тут — locales

// JS
jQuery(function ($) {
    $(document).ready(function() {
        $(".time").timeago();
    });
});

// Html
<time class="time" datetime="2015-08-18T09:24:17Z" title="18 Августа 2015">18 Августа 2015</time>
Иван Бармашов
  • Репутация: 71
  • Сниппеты: 7
  • Ревизии: 0

В соц. сетях, например в Twitter, вы заметите, что даты выводятся в формате — 1 hour ago. Чтобы сделать на своё сайте также, нам достаточно использовать timeago.js

Если вам нужна поддержка русского языка, достаточно подключить его так:

<script src="https://raw.githubusercontent.com/rmm5t/jquery-timeago/master/jquery.timeago.js"></script>
<script src="https://raw.githubusercontent.com/rmm5t/jquery-timeago/master/locales/jquery.timeago.ru.js"></script>

Другие локализации можете найти тут — locales

// JS
jQuery(function ($) {
    $(document).ready(function() {
        $('.time').timeago();
    });
});

// Html
<span class="time" title="2015-08-18T09:24:17Z"></span>
dfatt
  • Репутация: 260
  • Сниппеты: 53
  • Ревизии: 7

Если вам нужно пользователю отобразить изменения в тексте, то лучший вариант использовать diff. Для этого используем плагин PrettyTextDiff.

Затем нужно сделать следующую разметку:

<table class="diff-wrapper table">
    <thead>
        <tr>
            <th>Оригинал</th>
            <th>Изменено</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div class="original">
                    Раньше люди считали планету Земля — плоской
                </div>
            </td>
            <td>
                <div class="changed">
                    Сейчас люди считают планету Земля — круглой
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <div class="result"></div>
            </td>
        </tr>
    </tbody>
</table>

Важно! По-умолчанию плагин PrettyTextDiff, в указанном селекторе, будет искать классы original и changed. Если вы хотите указать другие классы, задайте в свойствах originalContainer, changedContainer названия нужных классов.

Чтобы результат сравнения был красиво раскрашен, добавим стили:

ins {
    background-color: #c6ffc6;
    text-decoration: none;
}

del {
    background-color: #ffc6c6;
}

Конечный результат: 1k0Ayhw.png

Плагин вызываем так:

$('.diff-wrapper').prettyTextDiff({
    diffContainer: '.result'
});