+- WINNUM Community (https://community.winnum.io)
+-- Сообщество Все сообщества (https://community.winnum.io/forumdisplay.php?fid=1)
+--- Сообщество Динамические приложения в WINNUM Platform (https://community.winnum.io/forumdisplay.php?fid=2)
+--- Темы: Кнопки (/showthread.php?tid=18)
Кнопки - Lamantur - 04-12-2024
В динамических приложениях довольно часто используются кнопки.
Кнопки позволяют передать контроль над элементами приложения пользователю, или действуют как ссылки на другие страницы.
В данном посте я хотел бы рассказать не только о том, как использовать кнопки, но и показать несколько визуальных приемов, которые помогут стилизовать приложение и улучшить восприятие.
Начнем с самого начала:
Создание кнопки
Вы можете создать кнопку, перейдя в инструменты и выбрав одну из готовых кнопок. В этом случае вы создадите элемент, у которого уже будет сгенерирован “id”, “class”, и несколько готовых параметров. В настройках элемента можно удобно для себя настроить цвет, фон, текст и рамку, однако кнопка будет статичной и пака еще ничего не делает при нажатии.
Если посмотреть на код созданного элемента, мы увидим все параметры, сгенерированные автоматически:
Есть и второй способ создать кнопку так, через html. Для того чтобы разместить html элемент для него нужен пустой контейнер, в поле данных мы создадим элемент <button>. Для того чтобы он мог быть не только учтен браузером, но и виден – нужен минимальный набор параметров, но, если оставить все в стандарте – можно просто вписать текст в элемент и его уже будет видно.
В данном случае применятся все встроенные библиотеки, которые могут на нее повлиять, и мы получим стандартную кнопку с надписью, при этом у нее даже будет анимация при наведении и нажатии (на самом деле просто изменение фона).
События
Все слушатели событий так же применимы и к кнопкам, и мы точно так же, как для любого другого элемента можем создать слушатель события через интерфейс, а можем прописать его в коде приложения в одном из подключенных файлов .js
Далее в примерах кода будем использовать id = "btn" для всех кнопок, если создавать событие через интерфейс, то id будет сгенерированным
Код:
$('#btn').mousedown(function(event){
this.style.borderStyle = 'inset'
});Это открывает для нас возможность изменять стили или вызывать визуальные функции или анимации, которых в интернете бесчисленное количество с готовым кодом и примерами.
Но вернемся к стандартной кнопке, она сейчас просто нарисована и имеет стандартные настройки. Если мы еще раз посмотрим в настройки элемента, то увидим опцию, которая называется «стиль рамки». Последние два варианта выбора называются «выдавленная» и «вдавленная»
Если мы хотим создать эффект объема на кнопке, то нам нужно сделать ее выдавленной, а при нажатии она будет становиться вдавленной. Поэтому оставляем этот параметр в позиции «выдавленная».
За стиль рамки отвечает атрибут “border-style”, и значение, которое он принимает: outstet – выдавленная, inset – вдавленная.
Код:
$('#btn').mousedown(function(event){
this.style.borderStyle = 'inset'
});Теперь кнопка проваливается и залипает. Поставим пружинку, чтобы она возвращалась на место:
Код:
$('#btn').mouseup(function(event){
this.style.borderStyle = 'outset';
});Если кнопка создана через интерфейс, то у нее будет уникальный id, который повторится автоматически при добавлении события, а если вы сами написали кнопку, то обращаться к ней нужно по ее уникальному id.
Аналогичным образом работают и другие события, вот список событий для хорошо анимированной кнопки:
- Под указателем мыши – mouseover
- Вне указателя мыши – mouseout
- Нажата кнопка мыши – mousedown
- Отпущена кнопка мыши – mouseup
Активность кнопки
Активность кнопки задается ее атрибутом disabled. По умолчанию он выключен и кнопка активна.
btn.disabled = true;
У неактивной кнопки пропадает возможность взаимодействия, она перестанет нажиматься, перестанут работать события на нажатие, но события mouseover и mouseout продолжат работать, если не указать иное, например написать условие в самих событиях.
Код:
if(!this.disabled){
this.style.background = 'green';
}Для стилизации можно изменить ее цвет, или сделать полупрозрачной:
btn.style.opacity = "0.5";
Этого достаточно, чтобы кнопка выглядела приятнее, но это далеко не все возможности по стилизации кнопок. Так же как и для любого другого объекта применимы анимации, стили для кнопок можно применять с помощью css, так же существуют css анимации и многое другое. Но стоит отметить, что не все практики, применимые для веб-дизайна подойдут для использования в динамических приложениях, все таки стоит учитывать это при выборе анимации или слишком замысловатого стиля и сделать выбор в пользу более сдержанного и функционального дизайна.