Хаки и Скрипты Next Generation CMS
irbees2008 irbees2008 Опубликовано - 30 - октября Кнопки и иконки
3409 - 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

Можешь почитать и вот эту статейку "Ставим обалденные кнопки на скачку файлов"

Опрос

Ваше мнение

какой форум лучше для вас
Результаты

Последние комментарии

Теги

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

Статистика

  • Caйту: 3324 дня
  • Новостей: 542
  • Комменты: 254
  • Зарегистрированно : 571
  • Онлайн всего: [8]
  • Гости: [7]
  • Поисковики: [1] Google
  • Были сегодня : [4] Яндекс, Google, selischev, irbees2008
  • SQL запросов: 35
  • Генерация страницы: 0.358сек
  • Потребление памяти: 4.953 Mb 
  •   яндекс.ћетрика