• 2436
  • 7
  • Адаптировал: irbees2008
  • Источник:
  • Уровень сложности исполнения: нужны навыки css hmlt
  • Демо:

Этот простой плагин JQuery оживляет значок на кнопкe .
1.Скачиваем Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. ,распаковываем и заливаем в папку с шаблоном
2.Подключаем стили :

Код:
<link rel="stylesheet" href="{tpl_url}/icomon/style.css" />
<link rel="stylesheet" href="{tpl_url}/css/loda-button.css" />
3.Код самой кнопки ставим туда где хотите её видеть:
Код:
<a href="#" class="loda-btn">
<span aria-hidden="true" class="loda-icon icon-mail"></span>
Mail
</a>
4.Перед /body подключаем скрипты:
Код:
<script type="text/javascript" src="{tpl_url}/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="{tpl_url}/js/loda-button.js"></script>

<script type="text/javascript">

$('.loda-btn')
.lodaButton()

.click(function(e) {

e.preventDefault();

var _self = $(this);
_self.lodaButton('start');

setTimeout(function() {
_self.lodaButton('stop');
}, 2000);

});

</script>

Классы loda-btn и loda-icon использует плагин для применения стиля к кнопке. Опять же, стиль довольно прост и делается в файле loda-button.css . Таблицы стилей могут быть изменены, как вам нравится.
Для создания имени кнопки использовать обычный стиль JQuery:
Код:
var lodaBtn = $('#loda-btn').lodaButton();

Для активации кнопки и запустить анимацию значка:

Код:
lodaBtn.lodaButton('start');

и остановить анимацию:

Код:
lodaBtn.lodaButton('stop');

Анимация создается с помощью CSS3 анимации, переходы и преобразования, которые поддерживаются Chrome, Firefox, Opera и Internet Explorer 10

Можешь почитать и вот эту статейку "Добавляем свои функции в стандартный bb- редактор для оформления новости"

mistakes

Это тоже интересно

    irbees2008

    irbees2008 | 18.09.2015 - 20:51

    newest, или в стилях loda-button.css
    .loda-btn.loda-btn-loading {
    color: #bbb;
    cursor: default;
    }
    заменить на
    .loda-btn.loda-btn-loading {
    color: #bbb;
    cursor: pointer;
    }

    ответить

    irbees2008

    irbees2008 | 18.09.2015 - 20:46

    newest,или в скрипт

    ответить

    newest

    newest | 18.09.2015 - 19:57

    Чтобы исправить нужно в css добавить "cursor: pointer;"

    ответить

    newest

    newest | 18.09.2015 - 19:53

    irbees2008, заработало, спасибо! Правда курсор меняется только после проигрывания анимации, а не при наведении.

    ответить

    irbees2008

    irbees2008 | 18.09.2015 - 19:34

    newest, В скрипте измени 09 .click(function(e) { на 09 .hover(function(e) {

    ответить

    newest

    newest | 18.09.2015 - 17:35

    Если удалить "class="loda-btn" по ссылке переходит.

    ответить

    newest

    newest | 18.09.2015 - 17:30

    Анимация работает, но по ссылке не переходит :(

    ответить

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

Ваше мнение

Как вам наш дизайн сайта?
Результаты

Облако тегов

Anything in here will be replaced on browsers that support the canvas element