4499
- 7
Этот простой плагин JQuery оживляет значок на кнопкe .
1.Скачиваем Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
,распаковываем и заливаем в папку с шаблоном
2.Подключаем стили :
Код:
<link rel="stylesheet" href="{tpl_url}/icomon/style.css" />
<link rel="stylesheet" href="{tpl_url}/css/loda-button.css" />Код:
<a href="#" class="loda-btn">
<span aria-hidden="true" class="loda-icon icon-mail"></span>
</a>
Код:
<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
Можешь почитать и вот эту статейку "Красивое оформление "хлебных крошек" breadcrumbs"
Это тоже интересно
28.07.13SPACEGALLERY - JQUERY PLUGIN
irbees2008 18.09.2015 - 19:34 newest, В скрипте измени 09 .click(function(e) { на 09 .hover(function(e) {
irbees2008 18.09.2015 - 20:46 newest,или в скрипт
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;
}
.loda-btn.loda-btn-loading {
color: #bbb;
cursor: default;
}
заменить на
.loda-btn.loda-btn-loading {
color: #bbb;
cursor: pointer;
}
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
ответить