Как добавить уведомление?

Question

[Александр Коновалов]

Здравствуйте!

Использую скрипт копирования текста при нажатии:

<script src="https://cdn.rawgit.com/zenorocha/clipboard.js/master/dist/clipboard.min.js"></script>

<button class="btn-clipboard" data-clipboard-target="#formlogin"><div id="formlogin"><i class="fa fa-user" aria-hidden="true"></i><p><?php echo $login; ?></p></div></button>

<script>
    new Clipboard('.btn-clipboard'); 
</script>

Как добавить уведомление об успешном копировании?

Comments

[Dark Hole]

В документации, не?

Answer 1

[Антон]

У плагина есть событие "success" - https://github.com/zenorocha/clipboard.js#events
При успешном копировании выводит что хочешь (к примеру, через alert() или jGrowl)

var clipboard = new Clipboard('.btn-clipboard');

clipboard.on('success', function(e) {
    //На примере jGrowl
    $.jGrowl("Текст уcпешно скопирован!");

    e.clearSelection();
});

clipboard.on('error', function(e) {
     //На примере jGrowl
    $.jGrowl("При копировании текста произошла ошибка");
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
});

Comments

[Александр Коновалов]

Антон подскажите, пожалуйста, как jGrowl сюда подключить?

[Антон]

Александр Коновалов: Обновил

[Александр Коновалов]

Антон: ага, уведомление есть, но теперь текст не копируется, у меня текст вставлен через data-clipboard-text, в чем ошибка?

[Александр Коновалов]

Антон: а, нет, все отлично, спасибо!

[Александр Коновалов]

Антон: еще вопрос возник. Там в стилях есть классы, например, .jGrowl.center, как применять их в моем случае?

[Антон]

Александр Коновалов: Не совсем понятен вопрос. Как угодно можно использовать, хоть полностью кастомизировать - ничего страшного не случится.

[Александр Коновалов]

Антон: я понимаю, что как угодно, но я не понимаю как добавить их. По умолчанию используется top-right, как применить другие?

[Александр Коновалов]

Антон: разобрался, это в js меняется