javascript как создать кнопку

На чтение 7 мин. Просмотров 74 Опубликовано

Содержание

  1. Начало
  2. Подключение на странице
  3. Привет, кнопка!
  4. Размеры
  5. Цвета
  6. Состояния
  7. Тег кнопки
  8. Иконка
  9. HTML-атрибуты
  10. Обработка событий
  11. Круглая кнопка
  12. Заглавные буквы
  13. Dropdown-кнопка
  14. Двойная кнопка
  15. Стандартные кнопки
  16. Пользовательские комментарии
  17. Новые способы
  18. Атрибут onclick
Содержание
  1. Начало
  2. Подключение на странице
  3. Привет, кнопка!
  4. Размеры
  5. Цвета
  6. Состояния
  7. Тег кнопки
  8. Иконка
  9. HTML-атрибуты
  10. Обработка событий
  11. Круглая кнопка
  12. Заглавные буквы
  13. Dropdown-кнопка
  14. Двойная кнопка
  15. Стандартные кнопки
  16. Пользовательские комментарии
  17. Новые способы
  18. Атрибут onclick

Начало

Библиотека ui.buttons позволяет создавать кнопки не только разметкой, но и с помощью JavaScript API.

Подключение на странице

Привет, кнопка!

Чтобы показать кнопку на странице, необходимо создать объект класса BX.UI.Button и вызвать метод renderTo .

Метод getContainer возвращает ссылку на DOM-элемент кнопки. Используйте его для гибкого построения интерфейсов.

Размеры

Размер кнопки задается опцией size и перечислением BX.UI.Button.Size .

Допустимые значения BX.UI.Button.Size :

  • BX.UI.Button.Size.LARGE — большая кнопка (47px)
  • BX.UI.Button.Size.MEDIUM — средняя кнопка (39px), значение по умолчанию
  • BX.UI.Button.Size.SMALL — маленькая кнопка (33px)
  • BX.UI.Button.Size.EXTRA_SMALL — максимально маленькая кнопка (26px)

Цвета

Опция color отвечает за цвет кнопки. Значение этой опции задаются перечислением BX.UI.Button.Color .

Допустимые значения BX.UI.Button.Color: :

  • BX.UI.Button.Color.DANGER
  • BX.UI.Button.Color.DANGER_DARK
  • BX.UI.Button.Color.DANGER_LIGHT
  • BX.UI.Button.Color.SUCCESS
  • BX.UI.Button.Color.SUCCESS_LIGHT
  • BX.UI.Button.Color.PRIMARY_DARK
  • BX.UI.Button.Color.PRIMARY
  • BX.UI.Button.Color.SECONDARY
  • BX.UI.Button.Color.LINK
  • BX.UI.Button.Color.LIGHT
  • BX.UI.Button.Color.LIGHT_BORDER

Состояния

Кнопка может иметь состояние. Например, быть активной или заблокированной. Опция state и перечисление BX.UI.Button.State управляют этой возможностью.

Допустимые значения BX.UI.Button.State :

  • BX.UI.Button.State.HOVER — состояние при наведении мыши
  • BX.UI.Button.State.ACTIVE — состояние при нажатии
  • BX.UI.Button.State.DISABLED — заблокировано
  • BX.UI.Button.State.CLOCKING — ожидание в виде «часиков»
  • BX.UI.Button.State.WAITING — ожидание в виде «спиннера»

Тег кнопки

По умолчанию кнопка отображается с помощью тега . С помощью параметра tag и перечисления BX.UI.Button.Tag кнопка может стать ссылкой или input-элементом.

Допустимые значения BX.UI.Button.Tag :

  • BX.UI.Button.Tag.BUTTON — тег
  • BX.UI.Button.Tag.LINK — тег
  • BX.UI.Button.Tag.SUBMIT — тег
  • BX.UI.Button.Tag.INPUT — тег

Иконка

Для создания кнопок с иконкой используется параметр icon и перечисление BX.UI.Button.Icon .

Допустимые значения BX.UI.Button.Icon :

  • BX.UI.Button.Icon.UNFOLLOW
  • BX.UI.Button.Icon.FOLLOW
  • BX.UI.Button.Icon.ADD
  • BX.UI.Button.Icon.STOP
  • BX.UI.Button.Icon.START
  • BX.UI.Button.Icon.ADD_FOLDER
  • BX.UI.Button.Icon.PAUSE
  • BX.UI.Button.Icon.SETTING
  • BX.UI.Button.Icon.TASK
  • BX.UI.Button.Icon.INFO
  • BX.UI.Button.Icon.SEARCH
  • BX.UI.Button.Icon.PRINT
  • BX.UI.Button.Icon.LIST
  • BX.UI.Button.Icon.BUSINESS
  • BX.UI.Button.Icon.BUSINESS_CONFIRM
  • BX.UI.Button.Icon.BUSINESS_WARNING
  • BX.UI.Button.Icon.CAMERA
  • BX.UI.Button.Icon.PHONE_UP
  • BX.UI.Button.Icon.PHONE_DOWN
  • BX.UI.Button.Icon.BACK

HTML-атрибуты

Опция props позволяет установить произвольные HTML-атрибуты кнопки. Например, href для кнопки-ссылки или data-атрибут.

Также можно установить свой CSS класс-модификатор.

Обработка событий

Основное предназначение кнопок — это выполнение некоторого действия после нажатия. Если кнопка представляет собой ссылку, то достаточно определить атрибут href (см. пример выше). В остальных случаях требуется написать обработчик нажатия в параметре onclick .

Обработчик получает два аргумента: объект кнопки button (экземпляр класса BX.UI.Button ) и объект нажатия мыши event .

Для установки других браузерных событий используется опция events .

Круглая кнопка

Для создания круглой кнопки необходимо установить параметр round в значение true .

Заглавные буквы

По умолчанию текст кнопки приводится к верхнему регистру. Опция noCaps=true позволяет отменить это поведение.

Опция dropdown=true добавляет иконку в виде стрелки справа от названия кнопки. Такой внешний вид предполагает показ меню после нажатия.

Одним из стандартных сценариев использования кнопок является показ контекстного меню после нажатия. Параметр menu определяет те же самые настройки, что и класс BX.PopupMenuWindow . Кнопка автоматически становится активной после открытия меню и неактивной, когда меню закрыто.

Двойная кнопка

Для создания двойной кнопки используется класс BX.UI.SplitButton . Он является наследником класса BX.UI.Button , поэтому настройки размера, цвета и иконки совпадают с настройками обычной кнопки.

Однако состояние двойной кнопки определяется перечислением BX.UI.SplitButton.State .

Допустимые значения BX.UI.SplitButton.State :

  • BX.UI.SplitButton.State.HOVER
  • BX.UI.SplitButton.State.MAIN_HOVER
  • BX.UI.SplitButton.State.MENU_HOVER
  • BX.UI.SplitButton.State.ACTIVE
  • BX.UI.SplitButton.State.MAIN_ACTIVE
  • BX.UI.SplitButton.State.MENU_ACTIVE
  • BX.UI.SplitButton.State.DISABLED
  • BX.UI.SplitButton.State.MAIN_DISABLED
  • BX.UI.SplitButton.State.MENU_DISABLED
  • BX.UI.SplitButton.State.CLOCKING
  • BX.UI.SplitButton.State.WAITING

Параметры можно указывать как для целой кнопки, так и для отдельных ее частей. В опциях mainButton и menuButton задаются идивидуальные настройки основной и дополнительной кнопки.

Обработчики событий в первом аргументе получают объект класса BX.UI.SplitSubButton .

Стандартные кнопки

Для типовых кнопок «Сохранить», «Применить», «Отмена» и др. существуют вспомогательные классы. Эти классы предустанавливают цвет и текст кнопки.

Вспомогательные классы обычной кнопки (наследники BX.UI.Button ):

  • BX.UI.SaveButton
  • BX.UI.CreateButton
  • BX.UI.AddButton
  • BX.UI.SendButton
  • BX.UI.ApplyButton
  • BX.UI.CancelButton
  • BX.UI.CloseButton

Вспомогательные классы двойной кнопки (наследники BX.UI.SplitButton ):

  • BX.UI.SaveSplitButton
  • BX.UI.CreateSplitButton
  • BX.UI.AddSplitButton
  • BX.UI.SendSplitButton
  • BX.UI.ApplySplitButton
  • BX.UI.CancelSplitButton
  • BX.UI.CloseSplitButton

Любое предустановленное значение можно переопределить.

Пользовательские комментарии

Мы будем рады, если разработчики добавят свои комментарии по практическому использованию методов системы.

Для этого нужно всего лишь авторизоваться на сайте

Но помните, что Пользовательские комментарии, несмотря на модерацию, не являются официальной документацией. Ответственность за их использование несет сам пользователь.

Также Пользовательские комментарии не являются местом для обсуждения функционала. По подобным вопросам обращайтесь на форумы.

Рассмотрим пример, как нужно обрабатывать нажатия кнопки в форме с помощью JavaScript.

Создадим простейшую форму.

На данный момент кнопка ничего не делает. Получим доступ к кнопке.

Далее следует создать код, который будет выполняться при нажатии кнопки.

Осталось подключить созданную функцию к переменной

При нажатии на кнопку появляется сообщение.

Идём дальше. Мы хотим получить текст, введённый пользователем в текстовом поле. Когда пользователь вводит текст, то у элемента input type=»text» в свойстве value появляется значение, которое и содержит текст пользователя. Таким образом, нам нужно сначала получить доступ к элементу страницы по идентификатору, а затем его свойство.

Теперь выводится сообщение, в котором содержится имя кота. Не помешает небольшая проверка, что текст был введён.

Третий шаг — выводить имена котов на самой странице. Мы уже приготовили список ul, к которому тоже можно получить доступ и добавлять дочерние элементы. Для получения доступа используем знакомый метод getElementById(). Для динамического создания нового элемента используется метод document.createElement(). После создания мы можем настроить элемент, например, прописав текст. Для текста элемента списка будем использовать переменную, которая содержит имя кота. Создав новый элемент, его необходимо добавить к родительскому элементу через appendChild().

Новые способы

В последнее время стали использовать другой код. Например, используют const вместо var, вместо onclick — addEventListener.

Также вместо getElementById() можно использовать querySelector(). А в addEventListener использовать другой формат вызова функции.

Атрибут onclick

Также можно использовать готовый атрибут у кнопки onclick.

Угу таке все привет у меня рейтинг -71 ну,а я иду дальше))

Я почитал комментарии к моему последнему посту и.

Так как я всегда прислушиваюсь к своим читателям(НЕТ)

Я решил вставлять код

В сторону плоские шутки,перейдём к теме поста.

Опять-же пишем стандартную структуру html файла.

Источник: computermaker.info

Техника и Гаджеты
Добавить комментарий
© 2025 Техника и Гаджеты