Кнопки

[Lamantur]

В динамических приложениях довольно часто используются кнопки. 
     Кнопки позволяют передать контроль над элементами приложения пользователю, или действуют как ссылки на другие страницы.
     В данном посте я хотел бы рассказать не только о том, как использовать кнопки, но и показать несколько визуальных приемов, которые помогут стилизовать приложение и улучшить восприятие.

     Начнем с самого начала:

Создание кнопки

     Вы можете создать кнопку, перейдя в инструменты и выбрав одну из готовых кнопок. В этом случае вы создадите элемент, у которого уже будет сгенерирован “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 анимации и многое другое. Но стоит отметить, что не все практики, применимые для веб-дизайна подойдут для использования в динамических приложениях, все таки стоит учитывать это при выборе анимации или слишком замысловатого стиля и сделать выбор в пользу более сдержанного и функционального дизайна.

Hello World!:

- Сообщений не найдено.