Какой рейтинг вас больше интересует?
|
Главная / Главные темы / Тэг «кнопка»
JQuery анимация кнопок 2013-10-30 16:10:15
... />Для создания имени кнопки использовать обычный стиль ... br />Для активации кнопки и запустить анимацию ...
+ развернуть текст сохранённая копия
Этот простой плагин JQuery оживляет значок на кнопкe . 1.Скачиваем [isnt-logged] Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам examples.zip (344.4 Kb)[/is-logged] ,распаковываем и заливаем в папку с шаблоном
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
Тэги: иконки,, интерфейс, кнопки
Рекламный ролик Microsoft расскажет об удобстве кнопки “Пуск“ в Windows 8.1 2013-09-30 16:26:00
... стал рассказ о кнопке “Пуск“, которую разработчикам ... расскажет об удобстве кнопки “Пуск“ в Windows ...
+ развернуть текст сохранённая копия
Новая реклама корпорации Microsoft представляет ОС Windows 8.1. При этом одним из ключевых моментов видео стал рассказ о кнопке “Пуск“, которую разработчикам пришлось вернуть по требованию пользователей. Рекламный ролик Microsoft расскажет об удобстве кнопки “Пуск“ в Windows 8.1 читать далее
Тэги: 8.1, microsoft, windows, кнопка, пуск, реклама, ролик
Вертикальные кнопки социальных сетей 2013-09-19 01:16:00
... . Вставить кнопки соц сетей внизу ... сообщения; Анимированные кнопки соц сетей;
+ развернуть текст сохранённая копия
Здравствуйте! Нашла в сети один очень оригинальный виджет кнопок социальных сетей. Кому интересно, копируйте код ниже и вставляйте черновик blogger-дизайн-добавить гаджет-Html/Javascript-вставить-сохранить. Нужно будет внизу кода изменить данные социальных сетей на свои. Но сначала проверьте виджет в работе. Вставьте и посмотрите как он будет выглядеть в Вашем блоге. При наведении курсора мыши всплывает вкладка социальной сети, смотрите на рисунке, эффект потрясающий. Для примера, посмотрите в этом блоге.
Тэги: вертикальные, кнопки, сетей, социальных
Вертикальные кнопки социальных сетей 2013-09-19 01:16:00
... . Вставить кнопки соц сетей внизу ... сообщения; Анимированные кнопки соц сетей;
+ развернуть текст сохранённая копия
Здравствуйте! Нашла в сети один очень оригинальный виджет кнопок социальных сетей. Кому интересно, копируйте код ниже и вставляйте черновик blogger-дизайн-добавить гаджет-Html/Javascript-вставить-сохранить. Нужно будет внизу кода изменить данные социальных сетей на свои. Но сначала проверьте виджет в работе. Вставьте и посмотрите как он будет выглядеть в Вашем блоге. При наведении курсора мыши всплывает вкладка социальной сети, смотрите на рисунке, эффект потрясающий. Для примера, посмотрите в этом блоге.
Тэги: вертикальные, кнопки, сетей, социальных
[recovery mode] Пример слайдера, управляемого только с помощью CSS3 2013-09-17 14:26:51
 + развернуть текст сохранённая копия
Стремительное развитие программного обеспечения, а параллельно с ним ещё более резвый рост производительности компьютерного оборудования, растворяют в себе злободневность полемики об эффективном коде. И вот уже в очередном проекте 2-3-страничного сайта нам проще использовать нечто типа jQuery('.spoiler').show(), чтобы оживить статичный сайт. Ведь за мощью компьютера совсем не заметно расточительство ресурсов, вызванное цепочкой внутри библиотечных действий от такой команды, и только ради организации простейшей бизнес-логики на клиентской стороне.
Нынче в том нет ничего зазорного, ведь эволюция ПО и техники позволяет программисту решать задачу, не заботясь о цене и вникании в тонкости процесса. Однако для повышения кругозора и как замечательный экспонат в кунсткамеру, дам ссылку на пример того, что определённая часть бизнес-логики сайта, посвящённая оживлению статики, в принципе могла быть реализована вообще без применения скриптовых технологий.
Любителям сначала поразгадывать ребус — как же мне удалось запрограммировать такой интерфейс на CSS — следуйте на страницу примера. Если не отгадаете, загляните за подсказкой в исходный код примера. Там всё прокомментировано и разложено по секциям. Остальных приглашаю под кат, где изложу суть этого механизма.
Читать дальше →
Тэги: checked, cms, css, css3, css4, hover, onclick, веб-разработка, кнопки, модуль, обработка, селекторы, слайдер, событий
Главная / Главные темы / Тэг «кнопка»
|
Взлеты Топ 5
Падения Топ 5
|
