• 2359
  • 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

Можешь почитать и вот эту статейку "Хак- Подсветка синтаксиса в шаблонах для NGCMS"

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

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

    ответить

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

Ваше мнение

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

----