— HTML | MDN
Элемент <input>
с типом button
отображаются как простые кнопки, которые можно запрограммировать для управления пользовательскими функциями в любом месте веб-страницы, например, назначить функцию обработки события (обычно для события click
).
The source for this interactive example is stored in a GitHub repository. If you’d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Заметка: Хотя элементы <input>
с типом button
по-прежнему являются абсолютно корректными в HTML, новый элемент <button>
теперь является предпочтительным способом создания кнопок. Учитывая, что текст элемента <button>
вставлен между открывающим и закрывающим тегами, вы можете включить в тег HTML, даже изображения.
Значение | DOMString используется в качестве метки кнопки |
Событие | click |
type и value |
|
Атрибуты IDL | value |
Методы | None |
Атрибут значения элементов <input type="button">
elements’ value
содержит строку DOMString
, которая используется в качестве метки кнопки.
<input type="button" value="Нажми на меня">
Если вы не укажете value
, вы получите пустую кнопку:
Элементы <input type="button">
не имеют поведения по умолчанию (их двоюродные братья, <input type="submit">
и <input type="reset">
используются для отправки и сброса форм соответственно). Чтобы кнопки делали что-либо, вы должны написать код JavaScript для выполнения работы.
Простая кнопка
Мы начнем с создания простой кнопки с обработчиком события click
, который запускает наш компьютер (ну, он переключает value
кнопки и текстовое содержимое следующего абзаца):
<form>
<input type="button" value="Запустить ПК">
</form>
<p>ПК выключен.</p>
const button = document.querySelector('input'); const paragraph = document.querySelector('p'); button.addEventListener('click', updateButton); function updateButton() { if (button.
value === 'Запустить ПК') { button.value = 'Выключить ПК'; paragraph.textContent = 'ПК запущен!'; } else { button.value = 'Запустить ПК'; paragraph.textContent = 'ПК выключен.'; } }
Сценарий получает ссылку на объект HTMLInputElement
, представляющий <input>
в DOM, сохраняя этот параметр в переменной button
. Затем addEventListener()
используется для установки функции, которая будет запускаться, когда на кнопке происходят события click
.
Добавление сочетаний клавиш на кнопки
Keyboard shortcuts, also known as access keys and keyboard equivalents, let the user trigger a button using a key or combination of keys on the keyboard. To add a keyboard shortcut to a button — just as you would with any <input>
for which it makes sense — you use the accesskey
global attribute.
In this example, s is specified as the access key (you’ll need to press s plus the particular modifier keys for your browser/OS combination; see accesskey for a useful list of those).
<form>
<input type="button" value="Start machine" accesskey="s">
</form>
<p>The machine is stopped.</p>
Note: The problem with the above example of course is that the user will not know what the access key is! In a real site, you’d have to provide this information in a way that doesn’t intefere with the site design (for example by providing an easily accessible link that points to information on what the site accesskeys are).
Disabling and enabling a button
To disable a button, simply specify the disabled
global attribute on it, like so:
<input type="button" value="Disable me" disabled>
You can enable and disable buttons at run time by simply setting disabled
to true
or false
. In this example our button starts off enabled, but if you press it, it is disabled using button.disabled = true
. A
setTimeout()
function is then used to reset the button back to its enabled state after two seconds.
If the disabled
attribute isn’t specified, the button inherits its disabled
state from its parent element. This makes it possible to enable and disable groups of elements all at once by enclosing them in a container such as a <fieldset>
element, and then setting disabled
on the container.
The example below shows this in action. This is very similar to the previous example, except that the
attribute is set on the <fieldset>
when the first button is pressed — this causes all three buttons to be disabled until the two second timeout has passed.
Buttons don’t participate in constraint validation; they have no real value to be constrained.
The below example shows a very simple drawing app created using a <canvas>
element and some simple CSS and JavaScript (we’ll hide the CSS for brevity). The top two controls allow you to choose the color and size of the drawing pen. The button, when clicked, invokes a function that clears the canvas.
<div> <input type="color" aria-label="select pen color"> <input type="range" min="2" max="50" value="30" aria-label="select pen size"><span>30</span> <input type="button" value="Clear canvas"> </div> <canvas> <p>Add suitable fallback here.</p> </canvas>
var canvas = document.querySelector('.myCanvas'); var width = canvas.width = window.innerWidth; var height = canvas.height = window.innerHeight-85; var ctx = canvas.getContext('2d'); ctx.fillStyle = 'rgb(0,0,0)'; ctx.fillRect(0,0,width,height); var colorPicker = document.querySelector('input[type="color"]'); var sizePicker = document.querySelector('input[type="range"]'); var output = document.querySelector('.output'); var clearBtn = document.querySelector('input[type="button"]'); function degToRad(degrees) { return degrees * Math.
PI / 180; }; sizePicker.oninput = function() { output.textContent = sizePicker.value; } var curX; var curY; var pressed = false; document.onmousemove = function(e) { curX = (window.Event) ? e.pageX : e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); curY = (window.Event) ? e.pageY : e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); } canvas.onmousedown = function() { pressed = true; }; canvas.onmouseup = function() { pressed = false; } clearBtn.onclick = function() { ctx.fillStyle = 'rgb(0,0,0)'; ctx.fillRect(0,0,width,height); } function draw() { if(pressed) { ctx.fillStyle = colorPicker.value; ctx.beginPath(); ctx.arc(curX, curY-85, sizePicker.value, degToRad(0), degToRad(360), false); ctx.fill(); } requestAnimationFrame(draw); } draw();
BCD tables only load in the browser
— HTML | MDN
HTML-элемент <button>
создает кликабельную кнопку, которая может быть использована в формах или в любом другом месте документа, который требует простой, стандартной кнопки. По умолчанию, кнопки HTML обычно представлены в стиле, аналогичном стилю хост-платформы, на которой работает user agent, но вы можете изменить внешний вид кнопки, используя CSS.
Категории контента | Общий поток, текстовый контент, интерактивный контент, listed, labelable, и submittable form-associated элемент, очевидный контент. |
---|---|
Разрешённый контент | Текстовый контент. |
Tag omission | Нет, открывающий и закрывающий теги обязательны. |
Разрешённый родительский контент | Любой элемент с поддержкой текстового контета. |
Разрешённые роли ARIA |
|
DOM interface | HTMLButtonElement |
Тип | Строчный |
Элемент поддерживает глобальные атрибуты.
autofocus
HTML5- Данный булевый атрибут позволяет указать, будет ли кнопка автоматически сфокусирована после загрузки страницы, до тех пор, пока пользователь не изменит фокус в ручную, например выбрав другой элемент. Только один связанный с формой элемент в документе может иметь данный атрибут.
autocomplete
Это API не было стандартизировано.- Использование данного атрибута на элементе
<button>
не описано в стандарте и используется только в Firefox браузере. По умолчанию, в отличие от прочих браузеров, Firefox сохраняет назначенное динамически отключенное состояние для элемента<button>
при последующих загрузках страницы. Установка для данного атрибута значенияoff
отключает подобное поведение. Смотрите баг 654072. disabled
-
Булевый атрибут, указывающий, что пользователь не может взаимодействовать с кнопкой.
<fieldset>
; если отсутсвует элемент-контейнер, с установленным атрибутом disabled, то кнопка доступна для взаимодействия.Firefox по умолчанию, в отличие от прочих браузеров, сохраняет назначенное динамически отключенное состояние для элемента
<button>
, даже при обновлении страницы. Чтобы изменить поведение браузера в этом случае, используйте атрибутautocomplete
. form
HTML5- Атрибут form позволяет указать элемент
<form>
, с которым связана кнопка. Данный атрибут должен хранить значение id элемента<form>
. Если данный атрибут не установлен, то элемент<button>
будет связан с родительским элементом
, если последний существует. - Атрибут работает независимо от расположения элементов в документе, поэтому он позволяет связать элемент
<button>
с формой, даже в случае, если<button>
не является наследником элемента<form>
. formaction
HTML5- Ссылка на обработчик формы. Если атрибут определен — он переопределит атрибут
action
у формы-родителя. formenctype
HTML5- Если
button
имеет типsubmit
, то этот атрибут определяет тип контента, отправляемого на сервер. Возможные значения данного атрибута:application/x-www-form-urlencoded
: значение по умолчанию, если атрибут не указан.multipart/form-data
: следует использовать это значение, если форма содержит элемент<input>
со значением атрибутаtype
file
.text/plain
Если этот атрибут определен, он переопределяет атрибут
enctype
у формы-родителя. formmethod
HTML5- Если
button
имеет типsubmit
, то этот атрибут определяет метод HTTP-запроса для отправки данных на сервер.Возможные варианты:
post
: данные формы включаются в тело сообщения и отправляются на сервер.get
: данные формы отправляются на сервер в виде ссылки, состоящей из URI атрибутаaction
и непосредственно данных, отделенных знаком ‘?’. Данные формы будут иметь вид ключ/значение и разделены амперсандом, например name=Name&id=35. Следует использовать этот метод только если нет побочных эффектов и данные формы содержат лишь ASCII-символы.
Если этот атрибут определен, он переопределяет атрибут
method
у формы-родителя. formnovalidate
HTML5- Булевый атрибут. Указывает, что данные формы не будут валидироваться при отправке.
- Если этот атрибут определен, он переопределяет атрибут
novalidate
у формы-родителя. formtarget
HTML5- Если
button
имеет типsubmit
, этот атрибут является именем или ключевым словом,указывающим, где отображать ответ, полученный после отправки формы.
This is a name of, or keyword for, a browsing context (for example, tab, window, or inline frame). If this attribute is specified, it overrides the
target
attribute of the button’s form owner. The following keywords have special meanings:_self
: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified._blank
: Load the response into a new unnamed browsing context._parent
: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as_self
._top
: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as_self
.
name
- The name of the button, which is submitted with the form data.
type
- The type of the button. Possible values are:
submit
: The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.reset
: The button resets all the controls to their initial values.button
: The button has no default behavior. It can have client-side scripts associated with the element’s events, which are triggered when the events occur.- menu: The button opens a popup menu defined via its designated
<menu>
element.
value
- The initial value of the button.
<button name="button">Тык!</button>
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 1.![]() |
1.0 (1.7 или ранее) | (Да) | (Да) | (Да) |
formaction attribute |
9.0 | 4.0 (2.0) | 10 | ? | ? |
formenctype attribute |
9.0 | 4.0 (2.0) | 10 | 10.6 | ? |
formmethod attribute |
9.0 | 4.0 (2.0) | 10 | ? | ? |
autofocus attribute |
5.0 | 4.0 (2.0) | 10 | 9.6 | 5.0 |
menu value for type attribute |
Нет | Нет[1] | Нет | Нет | ? |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | (Да) | 1.![]() |
(Да) | (Да) | (Да) |
formaction attribute |
? | 4.0 (2.0) | ? | ? | ? |
formenctype attribute |
? | 4.0 (2.0) | ? | ? | ? |
formmethod attribute |
? | 4.0 (2.0) | ? | ? | ? |
menu value for type attribute |
? | ? | ? | ? | ? |
[1] Gecko does not implement this feature yet. See баг 1241353.
Clicking and focus
Whether clicking on a <button>
causes it to (by default) become focused varies by browser and OS. The results for <input>
of type="button"
and type="submit"
were the same.
Desktop Browsers | Windows 8.![]() |
OS X 10.9 |
---|---|---|
Firefox 30.0 | Yes | No (even with a tabindex ) |
Chrome 35 | Yes | Yes |
Safari 7.0.5 | N/A | No (even with a tabindex ) |
Internet Explorer 11 | Yes | N/A |
Presto (Opera 12) | Yes | Yes |
Mobile Browsers | iOS 7.1.2 | Android 4.4.4 |
---|---|---|
Safari Mobile | No (even with a tabindex ) |
N/A |
Chrome 35 | No (even with a tabindex ) |
Yes |
<button>
elements are much easier to style than <input>
elements. You can add inner HTML content (think <em>
, <strong>
or even <img>
), and make use of :after
and :before
pseudo-element to achieve complex rendering while <input>
only accepts a text value attribute.
IE7 has a bug where when submitting a form with <button type="submit" name="myButton" value="foo">Click me</button>
, the POST
data sent will result in myButton=Click me
instead of myButton=foo
.
IE6 has an even worse bug where submitting a form through a button will submit ALL buttons of the form, with the same bug as IE7.
This bug has been fixed in IE8.
Firefox will add, for accessibility purposes, a small dotted border on a focused button. This border is declared through CSS, in the browser stylesheet, but you can override it if necessary to add your own focused style using button
::-moz-focus-inner
{ }
Firefox will, unlike other browsers, by default, persist the dynamic disabled state of a <button>
across page loads. Setting the value of the autocomplete
attribute to off
disables this feature. See баг 654072.
Firefox <35 for Android sets a default background-image
gradient on all buttons (see баг 763671). This can be disabled using
background-image: none
.
Other elements that are used for creating forms: <form>
, <datalist>
, <fieldset>
, <input>
,<keygen>
, <label>
, <legend>
, <meter>
, <optgroup>
, <option>
, <output>
, <progress>
, <select>
, <textarea>
.
Использование JS для создания «умных» форм | Java Script | Статьи | Программирование Realcoding.Net
1. Введение
JS, или JavaScript язык сценариев, которые выполняются на стороне клиента и не требует перезагрузки страницы. JavaScript был разработан компанией Netscape в 1995 году.>lang=en-us>
Вы, наверное, видели на моем сайте в гостевой книге
или на форуме, формы добавления сообщений со специальными кнопками. И, если Вам
хотелось обзавестись такой же, то эта статья для Вас. style=’font-family:verdana’>
2. Основы JS
style=’font-family:verdana’>
Код JavaScript вставляется между тегами <script> и </script>style=’font-family:verdana’>style=’font-family:verdana’>
style=’font-family:verdana’>
Если в коде содержаться функции, то эти функции должны быть размещены в тегах <script></script> между тегов <head> и </head>.style=’font-family:verdana’>lang=en-us>style=’font-family:verdana’>
style=’font-family:verdana’>
Если JavaScript код вынесен в отдельный файл с расширением .js, то подключить такой файл к HTML-коду можно, указав имя файла в качестве параметра src тега <script>style=’font-family:verdana’>lang=en-us>style=’font-family:verdana’>lang=en-us>style=’font-family:verdana’>style=’font-family:verdana’>
lang=en-us>
Пример:style=’font-family:verdana’>
<html>lang=en-us>
<head>lang=en-us>
<script
src=”func. js”></script>lang=en-us>
</head>lang=en-us>
<body>lang=en-us>
…lang=en-us>
</body>lang=en-us>
</html>lang=en-us>
lang=en-us>
Таким образом, мы подключили к HTML файлу файл с JavaScript.style=’font-family:verdana’>lang=en-us>style=’font-family:verdana’>
style=’font-family:verdana’>
Использовать JavaScript можно, например, в качестве обработчика определенных событий. Например, при нажатии мышкой на какой-нибудь элемент управления, возникает событие OnClick. lang=en-us>style=’font-family:verdana’>
style=’font-family:verdana’>
Пример:style=’font-family:verdana’>
style=’font-family:verdana’>
<input type=”button” value=”Показать” OnClick=’javascript:alert(“Вы нажали на кнопку”)’>style=’font-size:10.0pt;font-family:verdana’>style=’font-size:10. 0pt;font-family:verdana’>style=’font-size:10.0pt;font-family:verdana’>lang=en-us>style=’font-size:10.0pt;font-family:verdana’>style=’font-size:10.0pt;font-family:verdana’>style=’font-size:10.0pt;font-family:verdana’>lang=en-us>style=’font-size:10.0pt;font-family:verdana’>
lang=en-us>
Для того, чтобы браузер «понял», что нужно выполнить скрипт, написанный на JS, мы указываем псевдопротокол javascript:style=’font-family:verdana’>style=’font-family:verdana’>
style=’font-family:verdana’>
Функция alert(string s) выводит на экран окно с текстом s и одной кнопкой “OK”.>lang=en-us>style=’font-family:verdana’>
lang=en-us>
В данном примере при нажатии на кнопку «Показать» выведется окно с текстом «Вы нажали на кнопку» и одной кнопкой «ОК».style=’font-family:verdana’>
style=’font-family:verdana’>
3. Формыstyle=’font-family:verdana’>
style=’font-size:16. 0pt;font-family:verdana’>
Доступ к элементам формы можно получить, через следующую конструкцию:style=’font-family:verdana’>
document.|имя_формы|.|имя_компонента|style=’font-family:verdana’>lang=en-us>
style=’font-family:verdana’>
Для элементов ввода информации (<input type=”text”…> и <textarea></textarea>) для доступа к самой введенной или не введенной информации доступно свойство value.style=’font-family:verdana’>lang=en-us>style=’font-family:verdana’>style=’font-family:verdana’>lang=en-us>style=’font-family:verdana’>
lang=en-us>
style=’font-family:verdana’>
style=’font-family:verdana’>
Пример:style=’font-family:verdana’>
lang=en-us>
<html>lang=en-us>
<head>lang=en-us>
<script> lang=en-us>
function AddText (text)lang=en-us>
{lang=en-us>
document. form1.edit1.value=text;lang=en-us>
}lang=en-us>
</script>lang=en-us>
</head>lang=en-us>
<body>lang=en-us>
<form name=”form1”>lang=en-us>
<input type=”text” name=”edit1”>lang=en-us>
<input type=”button” value=”Press me” OnClick=’javascript:AddText (“This is Edit”)’>lang=en-us>
</form>lang=en-us>
</body>lang=en-us>
</html>lang=en-us>
lang=en-us>
В данном примере после нажатия на кнопку “Press me” в текстовом поле ввода появиться текст “This is Edit”. Так
же в функции такого рода можно добавлять еще один параметр – объект в который
нужно записать текст. Например, у нас есть два поле ввода текстовой информации
и две кнопки. При нажатии на первую кнопку мы запишем некоторый текст в первое
поле ввода, а при нажатии на вторую кнопку – текст во второе поле. Для этого
нам не обязательно писать две функции, достаточно написать одну функцию, указав
в ее параметрах дополнительно к тексту, который мы хотим добавить, объект, в
который этот текст нужно добавить.lang=en-us>style=’font-family:verdana’>lang=en-us>style=’font-family:verdana’>
style=’font-family:verdana’>
function AddText2 (object, text)lang=en-us>
{lang=en-us>
object.value=text;lang=en-us>
}lang=en-us>
style=’font-size:10.0pt;font-family:verdana’>
Вот и вся функция, необходимая для изменения любого текста в любом элементе ввода текстовой информации. Давайте сохраним эту функцию в отдельном файле с именем addtext.jslang=en-us>style=’font-family:verdana’>
А вот и html страничка:style=’font-family:verdana’>
style=’font-family:verdana’>
<html>
<head>
<script
src=”addtext. js”></script>
</head>
<body>
<form name=”form1”>
<input type=”text” name=”edit1”>
<input type=”text” name=”edit2”>
<input type=”button” value=”edit1” OnClick=’javascript:AddText2(document.form1.edit1, “Text in edit1”)’>
<input type=”button” value=”edit2” OnClick=’javascript:AddText2(document.form1.edit2, “Text in edit2”)’>
</form>
</body>
</html>
Ну вот, пожалуй, и все что я хотел написать. Если у Вас будут вопросы, то пишите их на мой электронный адрес: [email protected]=ru>lang=en-us>style=’font-family:verdana’>
style=’font-family:verdana’>
© CPAS, 2004.lang=en-us>
| HTML (Примеры)
Тег <button>
(от англ. button — кнопка) создаёт на веб-странице кнопки и по своему действию напоминает результат, получаемый с помощью <input>
(с атрибутом type="button | reset | submit"
).
В отличие от этого элемента, <button>
предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML, в том числе изображения. Используя стили можно определить вид кнопки путём изменения шрифта, цвета фона, размеров и других параметров.
Синтаксис
Закрывающий тег обязателен.
Атрибуты
autofocus
- Устанавливает, что кнопка получает фокус после загрузки страницы.
disabled
- Блокирует доступ и изменение элемента.
form
- Связывает между собой форму и кнопку.
formaction
- Задаёт адрес, на который пересылаются данные формы при нажатии на кнопку.
formenctype
- Способ кодирования данных формы.
formmethod
- Указывает метод пересылки данных формы.
formnovalidate
- Отменяет проверку формы на корректность.
formtarget
- Открывает результат отправки формы в новом окне или фрейме.
name
- Определяет уникальное имя кнопки.
type
- Устанавливает тип кнопки: обычная; для отправки данных формы на сервер; для очистки формы.
value
- Значение кнопки, которое будет отправлено на сервер или прочитано с помощью скриптов.
Также для этого тега доступны универсальные атрибуты.
autofocus
Атрибут autofocus
устанавливает, что кнопка получает фокус после загрузки страницы. Такую кнопку можно нажать сразу без перевода на неё фокуса, например, с помощью клавиатуры.
Синтаксис
<button autofocus>...</button>
Значения
Нет.
Значение по умолчанию
По умолчанию это значение выключено.
disabled
Блокирует доступ к кнопке и её изменение. Она в таком случае отображается серым цветом и недоступна для активации пользователем. Кроме того, такая кнопка не может получить фокус путём нажатия на клавишу
Tab
, мышью или другим способом. Тем не менее, такое состояние кнопки можно изменять через скрипты. Значение блокированной кнопки не передаётся на сервер.
Синтаксис
<button disabled>...</button>
Значения
Нет.
Значение по умолчанию
По умолчанию это значение выключено.
form
Связывает кнопку с формой по её идентификатору. Такая связь необходима в случае, когда кнопка не располагается внутри элемента <form>
, например, при создании её программно.
Синтаксис
<button form="<идентификатор>">...</button>
Значения
Идентификатор формы (значение атрибута id
элемента <form>
).
Значение по умолчанию
Нет.
formaction
Определяет адрес обработчика формы — это программа, которая получает данные формы и производит с ними желаемые действия. Атрибут formaction
по своему действию аналогичен атрибуту action
элемента <form>
. Если одновременно указать action
и formaction
, то при нажатии на кнопку атрибут action
игнорируется и данные пересылаются по адресу, указанному в formaction
.
Синтаксис
<button formaction="<адрес>">...</button>
Значения
Нет.
formenctype
Устанавливает способ кодирования данных формы при их отправке на сервер. Обычно явно указывается в случае, когда используется поле для отправки файла (input type="file"
). Этот атрибут по своему действию аналогичен атрибуту enctype
элемента <form>
.
Синтаксис
<button
formenctype="application/x-www-form-urlencoded | multipart/form-data | text/plain"
>
...
</button>
Значения
application/x-www-form-urlencoded
- Вместо пробелов ставится
+
, символы вроде русских букв кодируются их шестнадцатеричными значениями (например,%D0%9F%D0%B5%D1%82%D1%8F
вместо Петя). multipart/form-data
- Данные не кодируются. Это значение применяется при отправке файлов.
text/plain
- Пробелы заменяются знаком
+
, буквы и другие символы не кодируются.
Значение по умолчанию
application/x-www-form-urlencoded
formmethod
Атрибут сообщает браузеру, каким методом следует передавать данные формы на сервер.
Синтаксис
<button formmethod="get | post">.
..</button>
Значения
Различают два метода — GET и POST.
GET
- Этот метод предназначен для передачи данных формы непосредственно в адресной строке в виде пар «
имя=значение
», которые добавляются к адресу страницы после вопросительного знака и разделяются между собой амперсандом (символ&
). Полный адрес к примеру будетhttp://site.ru/doc/?name=Vasya&password=pup
. Объём данных в методе ограничен 4 Кб. POST
- Посылает на сервер данные в запросе браузера, объём пересылаемых данных ограничен лишь настройками сервера.
formnovalidate
Отменяет встроенную проверку данных введённых пользователем в форме на корректность при нажатии на кнопку. Такая проверка делается браузером автоматически при отправке формы на сервер для полей <input type="email">
, <input type="url">
, а также при наличии атрибута pattern
или required
у элемента <input>
.
Синтаксис
<button formnovalidate>...</button>
Значения
Нет.
Значение по умолчанию
По умолчанию этот атрибут выключен.
formtarget
Определяет имя фрейма, в которое будет загружаться результат, возвращаемый обработчиком формы, в виде HTML-документа.
Синтаксис
<button
formtarget="<имя фрейма> | _blank | _self | _parent | _top"
>
...
</button>
Значения
В качестве значения используется имя фрейма, заданное атрибутом name элемента <iframe>
. Если установлено несуществующее имя, то будет открыта новая вкладка. В качестве зарезервированных значений можно указывать следующие.
_blank
- Загружает страницу в новую вкладку браузера.
_self
- Загружает страницу в текущую вкладку.
_parent
- Загружает страницу во фрейм-родитель; если фреймов нет, то это значение работает как
_self
. _top
- Отменяет все фреймы и загружает страницу в полном окне браузера; если фреймов нет, то это значение работает как
_self
.
name
Определяет уникальное имя кнопки. Как правило, это имя используется при отправке значения кнопки на сервер или для доступа к кнопке через скрипты.
Синтаксис
<button name="<имя>">...</button>
Значения
В качестве имени используется набор символов, включая числа и буквы. JavaScript чувствителен к регистру, поэтому при обращении к элементу по имени соблюдайте ту же форму написания, что и в атрибуте name
.
Значение по умолчанию
Нет.
type
Определяет тип кнопки, который устанавливает её поведение в форме. По внешнему виду кнопки разного типа никак не различаются, но у каждой такой кнопки свои функции.
Синтаксис
<button type="button | reset | submit">.
..</button>
Значения
button
- Обычная кнопка.
reset
- Кнопка для очистки введённых данных формы и возвращения значений в первоначальное состояние.
submit
- Кнопка для отправки данных формы на сервер.
menu
- Открывает меню, созданное с помощью элемента
<menu>
.
Значение по умолчанию
value
Определяет значение кнопки, которое будет отправлено на сервер. На сервер отправляется пара «имя=значение
», где имя задаётся атрибутом name элемента <button>
, а значение — атрибутом value
. Значение может как совпадать с текстом на кнопке, так быть и самостоятельным. Также атрибут value
применяется для доступа к данным через скрипты.
Синтаксис
<button value="<текст>">...</button>
Значения
Любая текстовая строка.
Значение по умолчанию
Нет.
Спецификации
Описание и примеры
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>BUTTON</title>
</head>
<body>
<p>
<button>Кнопка с текстом</button>
<button>
<img
src="image/umbrella.gif"
alt="Зонтик"
/>
Кнопка с рисунком
</button>
</p>
</body>
</html>
Ссылки
Установка онлайн-записи на сайт (произвольная кнопка) – База знаний YCLIENTS
После того как все настройки онлайн-записи выполнены, установите виджет на сайт.
Если вы самостоятельно разработали дизайн кнопки онлайн-записи и хотите, чтобы форма онлайн-записи открывалась при клике по ней, то этот способ для вас.
Пример:
Виджет онлайн-записи может быть привязан к любой кнопке на сайте компании. Поэтому, прежде всего, необходимо поставить на сайт код самой кнопки:
<a href="#">Записаться онлайн</a>
В основном меню перейдите в раздел Онлайн-запись – Вебсайт. Выберите нужную форму или добавьте новую (как это сделать, читайте в статье Создание виджетов онлайн-записи).
В открывшемся новом окне перейдите во вкладку Настройки кнопки и отключите создание круглой кнопки по умолчанию, для этого снимите галочку Включить кнопку.
Перейдите во вкладку Код кнопки. Скопируйте код кнопки и установите перед закрывающимся тегом </body>
на каждой странице сайта.
Код имеет следующий вид:
<script type="text/javascript" src="https://w11782.yclients.com/widgetJS" charset="UTF-8"></script>
где 11782 — уникальный идентификатор конкретной формы.
Однако, в данный код необходимо внести некоторые изменения. Уберите из него https: и поставьте на сайт получившийся вариант кода.
В данном случае:
<script type="text/javascript" src="//w11782.yclients.com/widgetJS" charset="UTF-8"></script>
Идентификатор для конкретной формы также можно получить на странице Онлайн-запись – Вебсайт (подробнее в статье Как узнать номер (ID) формы онлайн-записи (виджета)). В шаблоне сайта код формы записи должен располагаться под кодом кнопки.
button
Оглавление | Назад | Вперёд | Индекс
Кнопка, размещённая на форме HTML.
Клиентский объект | |
Реализован в | JavaScript 1.0
JavaScript 1.1: добавлено свойство JavaScript 1.2: добавлен метод |
Создание
HTML-тэг INPUT
с "button"
в качестве значения
атрибута TYPE
. Для данной формы машина выполнения JavaScript
создаёт соответствующие объекты Button
и помещает их в массив elements
соответствующего объекта Form
. Вы
получаете доступ к объекту
Button
по индексу в данном массиве. Можно индексировать массив по
числами или использовать значение атрибута NAME
.
Обработчики событий
Описание
Объект Button
на форме выглядит так:
Объект Button
это элемент формы и обязан
быть определён внутри тэга FORM
(теперь вроде уже нет — прим перев.).
Объект Button
это специальная кнопка,
которую можно использовать для выполнения определённой Вами акции. Кнопка
выполняет скрипт, специфицированный её обработчиком onClick
.
Свойства. Резюме.
Свойство | Описание |
---|---|
| Специфицирует форму, содержащую объект |
| Отражает атрибут |
| Отражает атрибут |
| Отражает атрибут |
Методы. Резюме.
Метод | Описание |
---|---|
|
Убирает фокус с кнопки. |
| Симулирует щелчок мышью по кнопке. |
| Передаёт фокус кнопке. |
| Вызывает обработчик специфицированного события. |
Кроме того,
этот объект наследует методы
watch
и
unwatch
из
Object
.
Примеры
В следующем примере создаётся кнопка с названием calcButton
.
Текст «Calculate» выводится на поверхности кнопки. При щелчке по кнопке вызывается функция
calcFunction
.
<INPUT TYPE="button" VALUE="Calculate" NAME="calcButton"
onClick="calcFunction(this.form)">
См. также
Form
,
Reset
,
Submit
blur
Убирает фокус с кнопки.
Метод из |
|
Реализован в | JavaScript 1.0 |
Синтаксис
blur()
Параметры
Отсутствуют.
Примеры
В этом примере фокус убирается с кнопки userButton:
userButton.blur()
Здесь предполагается, что кнопка определена так:
<INPUT TYPE="button" NAME="userButton">
См. также
Button.focus
click
Симулирует щелчок мыши по кнопке, но не запускает обработчик onClick
.
Метод из |
|
Реализован в | JavaScript 1.0 |
Синтаксис
click()
Параметры
Отсутствуют.
Безопасность
Отправка формы по URL mailto:
или news:
требует привилегии
UniversalSendMail
. О безопасности см.
Клиентский JavaScript.
Руководство.
focus
Передаёт фокус кнопке.
Метод из |
|
Реализован в | JavaScript 1. |
Синтаксис
focus()
Параметры
Отсутствуют.
См. также
Button.blur
form
Ссылка на объект, специфицирующая форму, которая содержит кнопку.
Свойство из |
|
Только для чтения | |
Реализовано в | JavaScript 1.0 |
Описание
Каждый элемент формы имеет свойство
form
, то есть ссылку на родительскую форму элемента. Это свойство
используется в обработчиках событий, где бывает необходимо обратиться к другому элементу текущей формы.
Примеры
Пример 1.
В следующем примере форма myForm
содержит объект
Text
и кнопку. Когда пользователь щёлкает по кнопке, в значение объекта
Text
устанавливается имя формы. Обработчик onClick
кнопки использует
this.
для обращения к родительской форме form
myForm
.
<FORM NAME="myForm">
Form name:<INPUT TYPE="text" NAME="text1" VALUE="Beluga">
<P>
<INPUT NAME="button1" TYPE="button" VALUE="Show Form Name"
onClick="this.form.text1.value=this.form.name">
</FORM>
Пример 2.
Здесь показана
форма с несколькими элементами. Когда пользователь щёлкает button2
,
функция showElements
отображает диалог alert, содержащий имена всех
элементов формы myForm
.
<script>
function showElements(theForm) {
str = "Form Elements of form " + theForm.name + ": \n "
for (i = 0; i < theForm.length; i++)
str += theForm.elements[i].name + "\n"
alert(str)
}
</script>
<FORM NAME="myForm">
Form name:<INPUT TYPE="text" NAME="text1" VALUE="Beluga">
<P>
<INPUT NAME="button1" TYPE="button" VALUE="Show Form Name"
onClick="this.form.text1.value=this.form.name">
<INPUT NAME="button2" TYPE="button" VALUE="Show Form Elements"
onClick="showElements(this.form)">
</FORM>
Диалог alert выведет следующий текст:
JavaScript Alert:
Form Elements of form myForm:
text1
button1
button2
Пример 3.
В этом примере
используется ссылка на объект вместо ключевого слова this
для
обращения к форме. Код возвращает ссылку на
myForm
, которая является формой, содержащей кнопку myButton
.
document.myForm.myButton.form
См. также
Form
handleEvent
Вызывает обработчик для специфицированного события.
Метод из |
|
Реализован в | JavaScript 1.2 |
Синтаксис
handleEvent(event)
Параметры
event |
Имя события, для которого объект имеет обработчик
события. |
Описание
Об обработке событий см. Клиентский JavaScript. Руководство.
name
Строка, специфицирующая имя кнопки.
Свойство из |
|
Реализовано в | JavaScript 1.0 |
Безопасность
JavaScript 1.1. По умолчанию значение этого свойства разрушено. О разрушении данных см. книгу Клиентский JavaScript. Руководство.
Описание
Свойство name
первоначально отражает значение атрибута
NAME
. Изменение свойства name
переопределяет эту установку.
Не путайте свойство name
с текстом,
отображаемым на поверхности кнопки. Свойство value
специфицирует
лэйбл кнопки. Свойство name
не выводится на экран; оно используется
для программного обращения к объекту.
Если несколько объектов формы имеют одно значение
атрибута NAME
,
автоматически создаётся массив с данным именем. Каждый элемент этого массива
представляет отдельный
Form
-объект. Элементы индексируются в порядке их появления в коде,
начиная с 0. Например, если два элемента Text
и элемент Button
в одной форме имеют атрибут NAME
со значением
"myField"
, создаётся массив из элементов myField[0]
,
myField[1]
и myField[2]
. Вы должны учитывать такую
ситуацию при создании кода и знать, ссылается myField
на
единственный элемент или на массив элементов.
Примеры
В следующем примере функция valueGetter
использует цикл for
для итерации по массиву элементов формы valueTest
. Окно msgWindow
выводит имена всех элементов формы:
newWindow=window.open("http://home.netscape.com")
function valueGetter() {
var msgWindow=window.open("")
for (var i = 0; i < newWindow.document.valueTest.elements.length; i++) {
msgWindow.document.write(newWindow.document.valueTest.elements[i].name + "<BR>")
}
}
В
следующем примере первый оператор создаёт окно netscapeWin
. Второй
оператор выводит значение
"netscapeHomePage"
в диалоговом окне Alert, поскольку "netscapeHomePage"
является значением аргумента windowName
окна netscapeWin
.
netscapeWin=window.open("http://home.netscape.com","netscapeHomePage")
alert(netscapeWin.name)
См. также
Button.value
type
Для всех объектов Button
значением свойства type
будет "button"
. Это свойство
специфицирует тип элемента формы.
Свойство из |
|
Только для чтения | |
Реализовано в | JavaScript 1. |
Примеры
В следующем примере записывается значение свойства type
каждого
элемента формы.
for (var i = 0; i < document.form1.elements.length; i++) {
document.writeln("<BR>type is " + document.form1.elements[i].type)
}
value
Строка — значение атрибута VALUE
кнопки.
Свойство из |
|
Только для чтения в Mac и UNIX; модифицируется в Windows | |
Реализовано в | JavaScript 1.0 |
Безопасность
JavaScript 1.1. По умолчанию значение этого свойства разрушено. О разрушении данных см. книгу Клиентский JavaScript. Руководство.
Описание
Эта строка отображается на поверхности кнопки.
Значение свойства value
является read-only в ОС Macintosh и UNIX.
В Windows Вы можете изменять это свойство.
Если
атрибут VALUE
не специфицирован в HTML, свойство value
является пустой строкой.
Не путайте свойство value
со свойством name
. Свойство name
не выводится на экран; оно используется для программного обращения к объекту.
Примеры
Эта функция вычисляет значение свойства value
группы кнопок и выводит его в окне
msgWindow
:
function valueGetter() {
var msgWindow=window.open("")
msgWindow.document.write("submitButton.value is " +
document.valueTest.submitButton.value + "<BR>")
msgWindow.document.write("resetButton.value is " +
document.valueTest.resetButton.value + "<BR>")
msgWindow.document.write("helpButton.value is " +
document.valueTest.helpButton.value + "<BR>")
msgWindow.document.close()
}
Будут выведены следующие значения:
Query Submit
Reset
Help
В предыдущем примере предполагается, что кнопки были определены так:
<INPUT TYPE="submit" NAME="submitButton">
<INPUT TYPE="reset" NAME="resetButton">
<INPUT TYPE="button" NAME="helpButton" VALUE="Help">
См.

Button.name
Оглавление | Назад | Вперёд | Индекс
Дата последнего обновления: 28 мая 1999 года.
Copyright (c) 1999 Netscape Communications Corporation
Как включить JavaScript в браузере — Справочный центр
Большая часть страниц сайта «Плантариум» работает с использованием программ, написанных на языке JavaScript. Поэтому, если в вашем браузере запрещено выполнение активных скриптов, Вы не сможете воспользоваться ни определителем растений, ни поиском растений по названию, ни большинством других функций, доступных зарегистрированным участникам проекта.
Ниже приведены инструкции, позволяющие разрешить выполнение JavaScript в следующих наиболее распространённых браузерах:
Internet Explorer
- Выберите пункт меню «Сервис/Свойства обозревателя».
- В открывшемся диалоговом окне выберите вкладку «Безопасность».
- В группе «Уровень безопасности для этой зоны» нажмите кнопку «Другой…»
- В открывшемся диалоговом окне в списке «Параметры» найлите пункт «Сценарии/Активные сценарии».
- Выберите опцию «Включить»
- Нажмите кнопку «ОК».
- Ответьте «Да» на вопрос «Вы действительно хотите изменить настройку для этой зоны?».
- Нажмите кнопку «ОК» в диалоговом окне «Свойства обозревателя».
- Нажмите клавишу F5, чтобы перезагрузить текущую страницу.
FireFox
- Выберите пункт меню «Инструменты/Настройки…».
- В открывшемся диалоговом окне выберите вкладку «Содержимое».
- Включите флаг «Использовать JavaScript».
- Нажмите кнопку «ОК».
- Нажмите клавишу F5, чтобы перезагрузить текущую страницу.
Opera
- Включите флаг в пункте меню «Инструменты/Быстрые настройки/Включить JavaScript».
- Нажмите клавишу F5, чтобы перезагрузить текущую страницу.
- Выберите пункт меню «Инструменты/Настройки…».
- В открывшемся диалоговом окне выберите вкладку «Дополнительно».
- В списке слева выберите пункт «Содержимое».
- Включите флаг «Включить JavaScript».
- Нажмите кнопку «ОК».
- Нажмите клавишу F5, чтобы перезагрузить текущую страницу.
Google Chrome
- Нажмите на панели инструментов кнопку с картинкой «Гаечный ключ».
- Выберите в меню пункт «Параметры».
- В открывшемся диалоговом окне выберите вкладку «Расширенные».
- Нажмите на кнопку «Настройки содержания…», находящуюся в разделе «Конфиденциальность».
- В открывшемся диалоговом окне выберите вкладку «JavaScript».
- Выберите опцию «Разрешить всем сайтам использовать JavaScript (рекомендуется)» или добавьте ‘www.plantarium.ru’ в список сайтов, где разрешено выполнение JavaScript, нажав на кнопку «Исключения».
- Нажмите кнопку «Закрыть».
- Нажмите кнопку «Закрыть».
- Нажмите клавишу F5, чтобы перезагрузить текущую страницу.
— HTML: язык разметки гипертекста
элементов типа button
отображаются как простые кнопки, которые можно запрограммировать для управления настраиваемыми функциями в любом месте веб-страницы по мере необходимости при назначении функции обработчика событий (обычно для события click
) .
Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https: // github.com / mdn / interactive-examples и отправьте нам запрос на перенос.
Примечание : хотя элементы
типа button
по-прежнему являются вполне допустимым HTML, новый элемент
теперь является предпочтительным способом создания кнопок. Учитывая, что текст ярлыка
вставлен между открывающим и закрывающим тегами, вы можете включать HTML в ярлык, даже изображения.
Атрибут
элементов
содержит DOMString
, который используется в качестве метки кнопки.
Если вы не укажете значение
, вы получите пустую кнопку:
элементов не имеют поведения по умолчанию (их родственники,
и
используются для отправки и сброса форм, соответственно ). Чтобы заставить кнопки делать что-либо, вам нужно написать код JavaScript, который сделает эту работу.
Простая кнопка
Мы начнем с создания простой кнопки с обработчиком события click
, который запускает нашу машину (ну, он переключает значение
кнопки и текстовое содержимое следующего абзаца):
<форма>
Машина остановлена.
const button = document.querySelector ('ввод');
const параграф = document.querySelector ('p');
button.addEventListener ('щелчок', updateButton);
function updateButton () {
if (button.value === 'Запустить машину') {
button.value = 'Остановить машину';
paragraph.textContent = 'Машина запустилась!';
} еще {
button.value = 'Запустить машину';
paragraph.textContent = 'Машина остановлена.';
}
}
Сценарий получает ссылку на объект HTMLInputElement
, представляющий
в DOM, сохраняя эту ссылку в переменной button
. addEventListener ()
затем используется для создания функции, которая будет запускаться при щелчках
событий на кнопке.
Добавление сочетаний клавиш к кнопкам
Сочетания клавиш, также известные как клавиши доступа и эквиваленты клавиатуры, позволяют пользователю запускать кнопку с помощью клавиши или комбинации клавиш на клавиатуре. Чтобы добавить сочетание клавиш к кнопке — так же, как и с любым
, для которого это имеет смысл — вы используете глобальный атрибут accesskey
.
В этом примере s указано как клавиша доступа (вам нужно будет нажать s плюс определенные клавиши-модификаторы для комбинации вашего браузера / ОС; полезный их список см. В разделе Accesskey).
<форма>
Машина остановлена.
Примечание : Проблема с приведенным выше примером, конечно, заключается в том, что пользователь не будет знать, что такое ключ доступа! На реальном сайте вам придется предоставить эту информацию таким образом, чтобы это не мешало дизайну сайта (например, предоставляя легкодоступную ссылку, указывающую на информацию о ключах доступа к сайту).
Отключение и включение кнопки
Чтобы отключить кнопку, укажите для нее глобальный атрибут disabled
, например:
Вы можете включать и отключать кнопки во время выполнения, задав для отключено
значение true
или false
. В этом примере наша кнопка начинает отключаться включенной, но если вы ее нажмете, она будет отключена с помощью
button.disabled = true
.Затем используется функция setTimeout ()
для возврата кнопки в активированное состояние через две секунды.
Если атрибут disabled
не указан, кнопка наследует состояние disabled
от своего родительского элемента. Это позволяет включать и отключать все группы элементов одновременно, заключая их в контейнер, такой как элемент
, а затем устанавливая disabled
в контейнере.
Пример ниже показывает это в действии.Это очень похоже на предыдущий пример, за исключением того, что атрибут disabled
устанавливается в
при нажатии первой кнопки — это приводит к отключению всех трех кнопок до истечения двухсекундного тайм-аута.
Кнопки не участвуют в проверке ограничений; у них нет реальной ценности, которую нужно ограничивать.
В приведенном ниже примере показано очень простое приложение для рисования, созданное с использованием элемента
и некоторых простых CSS и JavaScript (для краткости мы скроем CSS).Два верхних элемента управления позволяют выбрать цвет и размер пера для рисования. При нажатии кнопки вызывается функция, очищающая холст.
30
<холст>
Добавьте сюда подходящий запасной вариант.
var canvas = document.querySelector ('. myCanvas');
var width = canvas.width = window.innerWidth;
var height = canvas.height = window.innerHeight-85;
var ctx = canvas.getContext ('2d');
ctx.fillStyle = 'rgb (0,0,0)';
ctx.fillRect (0,0, ширина, высота);
var colorPicker = document.querySelector ('input [type = "color"]');
var sizePicker = document.
querySelector ('input [type = "range"]');
var output = document.querySelector ('. output'););
var clearBtn = document.querySelector ('input [type = "button"]');
function degToRad (градусов) {
вернуть градусы * Math.PI / 180;
};
sizePicker.oninput = function () {
output.textContent = sizePicker.value;
}
var curX;
var curY;
var Press = false;
document.onmousemove = function (e) {
curX = (window.Event)? e.pageX: e.clientX + (document.documentElement.scrollLeft? document.documentElement.scrollLeft: document.body.scrollLeft);
curY = (window.Event)? e.pageY: e.clientY + (document.documentElement.scrollTop? document.documentElement.scrollTop: document.body.scrollTop);
}
canvas.onmousedown = function () {
нажата = правда;
};
холст.onmouseup = function () {
нажата = ложь;
}
clearBtn.onclick = function () {
ctx.fillStyle = 'rgb (0,0,0)';
ctx.fillRect (0,0, ширина, высота);
}
function draw () {
if (нажато) {
ctx.fillStyle = colorPicker.value;
ctx.beginPath ();
ctx.
arc (curX, curY-85, sizePicker.value, degToRad (0), degToRad (360), false);
ctx.fill ();
}
requestAnimationFrame (рисовать);
}
рисовать();
таблицы BCD загружаются только в браузере
40 кнопок JavaScript
Коллекция бесплатных кнопок ванильного JavaScript примеров кода: анимированные, множественные, подтверждение, удаление, загрузка / выгрузка, отправка и с эффектами наведения / щелчка / удержания .
- CSS-кнопки
- Кнопки начальной загрузки
- Кнопки jQuery
- Кнопки React
Сделано из
- HTML (мопс) / CSS (Stylus) / JS (Babel)
О коде
Футболка Cannon Button
Футболка с пуговицей-пушкой с GreenSock.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: расщепление.js, gsap.js
О коде
Кнопка подтверждения конфетти
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: gsap.js
О коде
Станок для гибки кнопок
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: gsap.js
Автор
- Аарон Икер
О коде
Кнопка корзины
Кнопка «Удалить» с анимированной корзиной на ванильном JavaScript.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: —
Автор
- Райан Маллиган
О коде
Кнопка отказа от подписки
Подводные камни при попытке отписаться в 2020 году.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: расщепление.css, splitting.js
Автор
- Аарон Икер
О коде
Сжать файлы
Простое микровзаимодействие с кнопкой «Архивирование файлов».
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: —
Автор
- Аарон Икер
О коде
Кнопки переключения сетки / списка
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: —
Автор
- Аарон Икер
О коде
Анимация кнопки удаления
Простое микровзаимодействие «Кнопка удаления» в HTML, CSS и JS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: —
Автор
- Аарон Икер
О коде
Скачать и загрузить анимацию при наведении
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: gsap.js
Автор
- Аарон Икер
О коде
Кнопка «Разбить, чтобы отправить»
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: gsap.js
О коде
Кнопка загрузки при наведении
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: gsap. js
Автор
- Крис Смит
О коде
Анимация рисования кнопок
Анимация псевдоэлементов для создания эффекта рисования кнопки.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
- Влад Ракоар
О коде
Анимация состояний кнопок
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: font-awesome.css
Автор
- Аарон Икер
О коде
Кнопка «Нравится пиво»
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: gsap. js
Автор
- Аарон Икер
О коде
Анимация кнопки корзины
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: —
Автор
- alphardex
Сделано из
- HTML / CSS (SCSS) / JS (TypeScript)
О коде
Кнопка загрузки файла
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: —
Автор
- Луи Хёбрегтс
О коде
Кнопочный переключатель
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: —
Автор
- @keyframers
О коде
SMASH, что нравится кнопка
Любимая кнопка, микровзаимодействие в JavaScript.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
- gitSushi
Сделано из
- HTML (мопс) / CSS (Sass) / JS
О коде
Неоморфизм, Сердечный
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: —
Автор
- Аарон Икер
О коде
В корзину Анимация
Классная анимация добавления в корзину с JavaScript.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: —
Автор
- Габриэле Корти
О коде
Материальные кнопки
Практикуйтесь с настраиваемыми свойствами, clip-path
, псевдоэлементами и CSS в целом, чтобы создать серию кнопок, вдохновленных пользовательским интерфейсом материала. С достаточным количеством JavaScript, чтобы сделать события мыши особенными.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: —
Автор
- Аарон Икер
О коде
Скачать анимацию прогресса
Совместимые браузеры: Chrome, Edge, Opera, Safari
Адаптивный: нет
Зависимости: gsap.js
Автор
- Кассандра
О коде
Мульти-кнопки
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: font-awesome.css
Автор
- Аарон Икер
О коде
Анимация кнопки заказа
Анимированная кнопка подтверждения заказа с HTML, CSS и небольшим количеством JavaScript,
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: gsap. js
Автор
- Габриэле Корти
О коде
Нажмите и удерживайте кнопку
Поэкспериментируйте с синтаксисом SVG и переходами CSS, чтобы создать кнопку, позволяющую открыть еще три параметра.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: —
Автор
- Аарон Икер
О коде
Кнопка обработки
Микроанимация для кнопки, которая отправляет, обрабатывает и подтверждает взаимодействие.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: —
О коде
Кнопка + холст = Потрясающе
Использование элемента холста, чтобы вывести эффекты наведения кнопок на новый уровень! Это всего лишь несколько примеров, использующих тот же подход с частицами, а теперь представьте безграничные возможности!
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
- Лукас Ланг
О коде
Фон динамически движущихся кнопок-таблеток
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: —
Автор
- ‹МАЙКО /›
О коде
Мульти-кнопки — Животные
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: font-awesome. css
Автор
- Леннарт Хасе
Сделано из
- HTML / CSS (SCSS) / JS (Babel)
О коде
Таблетка с несколькими кнопками
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: font-awesome.css
Автор
- Сикрити Дакуа
О коде
Неуморфные кнопки
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: —
Автор
- Аарон Икер
О коде
Кнопка загрузки отказов
Совместимые браузеры: Chrome, Edge, Opera, Safari
Адаптивный: нет
Зависимости: gsap. js
Автор
- Тимоти Уильямс-Фаулер
О коде
Кнопка загрузки SVG CSS JS
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: —
Автор
- Аарон Икер
О коде
Кнопки загрузки
Некоторые кнопки загрузки анимации.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: gsap.js
Автор
- Аарон Икер
О коде
Кнопка воспроизведения и паузы
Кнопка воспроизведения. Несколько шутливых экспериментов.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: —
Автор
- Милан Раринг
О коде
Скачать Взаимодействие
Отличное взаимодействие загрузки в HTML, CSS и JS.
Совместимые браузеры: Chrome, Edge, Opera, Safari
Адаптивный: нет
Зависимости: —
Автор
- Аарон Икер
О коде
Кнопка добавления / удаления
Исследование микровзаимодействия дополнительных кнопок.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: —
Автор
- Moustafa Jazzar
О коде
Программные кнопки интерфейса Neumorphism
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: —
О коде
Кнопка музыкального проигрывателя
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: —
О коде
Простые кнопки для холста с ZIMjs
Простые кнопки с ролловерами, подложками, значками, состояниями переключения и ожидания, шаблонами, вкладками и многим другим! ZIM предоставляет возможности JavaScript, компоненты и элементы управления для Canvas и работает на CreateJS с его твердой моделью растровых объектов (BOM).
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: zim.js
Создайте индивидуальное соединение с кнопкой PayPal
Сгенерированный сниппет
Протестируйте созданную кнопку. Как только это сработает, скопируйте на свой сайт следующий сгенерированный фрагмент кода HTML.
Обязательные поля отсутствуют или имеют неверный формат.
Для получения рекомендаций о том, где разместить эту кнопку на своем сайте, см. Рекомендации и рекомендации по размещению кнопок Connect with PayPal .
Чтобы понять, как работает кнопка Connect with PayPal , просмотрите последовательность действий пользователя — то, что клиент должен увидеть после нажатия кнопки Connect with PayPal.
Параметры кнопки JavaScript
Чтобы изменить сгенерированный код кнопки JavaScript, см. Следующую таблицу параметров:
Параметр | Требуется | Описание |
---|---|---|
приложение |
Идентификатор приложения (идентификатор клиента из создания приложения PayPal). Примечание: Термины идентификатора приложения и идентификатора клиента взаимозаменяемы. |
|
аутентификация |
Дополнительно | URL-адрес сервера авторизации:
Пройдите sandbox для тестовой среды. В противном случае, в прямом эфире, опустите это значение. |
области применения |
Запрошенная информация профиля (доступные области). | |
регион |
Указатель языка и страны.![]() |
|
кнопка Размер |
Указатель размера кнопки:
|
|
кнопка Форма |
Спецификатор формы кнопки:
|
|
тема |
Дополнительно | Стиль кнопки: синий или нейтральный PayPal. |
returnurl |
Страница, на которую нужно вернуться после успешного входа в систему. |
|
responseType |
Спецификатор типа ответа:
|
|
полностраничный |
Спецификатор полной страницы:
|
|
nonce |
Дополнительно | Спецификатор nonce может быть случайным числом, например 11111111.
|
Дополнительные шаги по интеграции см. В руководстве по интеграции Connect with PayPal.
Как тип ввода кнопки создает кнопку формы в JavaScript »
- Значение
- Как определить тип ввода в HTML (все значения и атрибуты)
- Что делает
Как тип ввода кнопки создает кнопку формы в JavaScript
? - Определяет ввод в виде кнопки.
Пример кода
В основном для JavaScript
Тип ввода button
создает кнопку формы, значение
которой отображается как текст или метка на кнопке.Кнопка input
выглядит идентично submit
, но они не взаимозаменяемы — кнопка input
input не отправляет форму. По большей части, кнопка input
используется в сочетании с JavaScript.
vs.
В дополнение к типу ввода button
существует отдельный элемент
, который функционально очень похож.По умолчанию они оба отображаются в виде кнопок, и оба они обычно полагаются на JavaScript в своей полезности — ни один из них не имеет особого смысла в строгой парадигме ввода и отправки формы. Разница в том, что элемент
может иметь содержимое, а элемент
имеет значение null
(то есть не имеет закрывающего тега и не может содержать никакого содержимого. Это означает, что
< Элемент button>
может иметь изображение или размеченный текст, тогда как элемент button
не может иметь ни того, ни другого.
Зачем использовать
Итак, если элемент
в основном тот же, за исключением лучшего, зачем вообще использовать тип ввода button
? Ответ — значение атрибута
. При вводе типа кнопки
значение
отображается на самой кнопке. С элементом
кнопка отображает его содержимое. Это означает, что если вы хотите обновить или использовать значение
и отображаемый контент одновременно, вам нужно будет использовать ввод кнопки или выполнить гораздо больше сценариев для синхронизации значения
с его содержание.Если значение
не имеет значения, любой элемент работает нормально.
Браузер Поддержка кнопки
Все значения типа
Имя значения | Примечания |
---|---|
кнопка | Определяет ввод, подобный кнопке. |
флажок | Определяет флажок, который пользователь может включить или выключить. |
файл | Определяет окно загрузки файла с кнопкой обзора. |
скрыто | Определяет поле в форме, которое не видно пользователю. |
изображение | Определяет изображение, по которому щелкают, чтобы отправить форму. |
пароль | Отображает скрытое поле ввода пароля. |
радио | Определяет круглую кнопку выбора в форме. |
reset | Определяет кнопку в форме, которая вернет всем полям значения по умолчанию. |
submit | Определяет кнопку, которую нажимают для отправки формы. |
текст | Определяет поле ввода текста в форме.![]() |
Все атрибуты ввода
Имя атрибута | Значения | Примечания |
---|---|---|
step | Задает интервал между допустимыми значениями в числовом вводе. | |
требуется | Указывает, что поле ввода является обязательным; запрещает отправку формы и предупреждает пользователя, если обязательное поле пусто. | |
только для чтения | Запрещает пользователю редактировать значение ввода. | |
заполнитель | Задает текст-заполнитель в текстовом вводе. | |
шаблон | Задает регулярное выражение, по которому проверяется значение ввода. | |
несколько | Позволяет пользователю вводить несколько значений при загрузке файла или электронной почты. | |
мин | Задает минимальное значение для полей ввода числа и даты. | |
макс.![]() | Задает максимальное значение для полей ввода числа и даты. | |
список | Задает идентификатор элемента | |
высота | Задает высоту входного изображения. | |
formtarget | Задает контекст просмотра, в котором открывается ответ от сервера после отправки формы.Для использования только с типами ввода «отправить» или «изображение». | |
formmethod | Задает метод HTTP (GET или POST), который будет использоваться при отправке данных формы на сервер. Только для использования с типами ввода «отправить» или «изображение». | |
formenctype | Определяет, как данные формы должны отправляться на сервер. Только для использования с типами ввода «отправить» и «изображение». | |
formaction | Задает URL-адрес для отправки формы.![]() | |
форма | Задает форму, которой принадлежит поле ввода. | |
автофокус | Указывает, что поле ввода должно быть в фокусе сразу после загрузки страницы. | |
accesskey | Определяет сочетание клавиш для элемента. | |
автозаполнение | Указывает, должен ли браузер пытаться автоматически завершить ввод на основе ввода данных пользователем в аналогичные поля. | |
граница | Используется для указания границы на входе. Устарело. Вместо этого используйте CSS. | |
проверено | Указывает, следует ли по умолчанию устанавливать флажок или переключатель формы ввода. | |
отключено | Отключает поле ввода. | |
maxlength | Задает максимальное количество символов, которое может быть введено при вводе текстового типа.![]() | |
язык | Используется для указания языка сценариев, используемого для событий, запускаемых вводом. | |
имя | Задает имя элемента ввода. Имя и значение каждого элемента ввода включаются в HTTP-запрос при отправке формы. | |
размер | Задает ширину ввода в символах. | |
src | Определяет исходный URL-адрес для ввода изображения. | |
тип | кнопка флажок файл скрыто изображение пароль радио сброс отправить текст | Определяет тип ввода. |
значение | Определяет начальное значение или выбор по умолчанию для поля ввода. |
JavaScript · Bootstrap
Индивидуальные или составленные
Плагины могут быть включены индивидуально (с использованием отдельных файлов Bootstrap * .js
) или все сразу (с использованием bootstrap.
или уменьшенного js
bootstrap.min.js
).
Использование скомпилированного JavaScript
Оба файла bootstrap.js
и bootstrap.min.js
содержат все плагины в одном файле. Включите только один.
Зависимости плагинов
Некоторые плагины и компоненты CSS зависят от других плагинов. Если вы включаете плагины по отдельности, обязательно проверьте эти зависимости в документации. Также обратите внимание, что все плагины зависят от jQuery (это означает, что jQuery должен быть включен за до файлов плагинов). Проконсультируйтесь с нашим bower.json
, чтобы узнать, какие версии jQuery поддерживаются.
Атрибуты данных
Вы можете использовать все плагины Bootstrap только через API разметки, не написав ни одной строчки JavaScript. Это первоклассный API Bootstrap, и вы должны в первую очередь учитывать его при использовании плагина.
Тем не менее, в некоторых ситуациях может потребоваться отключить эту функцию. Таким образом, мы также предоставляем возможность отключить API атрибутов данных, отключив все события в документе с пространством имен
data-api
.Это выглядит так:
$ (document) .off ('. Data-api')
В качестве альтернативы, чтобы настроить таргетинг на конкретный плагин, просто включите имя плагина в качестве пространства имен вместе с пространством имен data-api, например:
$ (документ) .off ('. Alert.data-api')
Только один плагин на элемент через атрибуты данных
Не используйте атрибуты данных из нескольких плагинов в одном элементе. Например, кнопка не может одновременно иметь всплывающую подсказку и переключать модальное окно.Для этого используйте оборачивающий элемент.
Программный API
Мы также считаем, что вы сможете использовать все плагины Bootstrap исключительно через JavaScript API. Все общедоступные API-интерфейсы являются одиночными, объединяемыми в цепочку методами и возвращают коллекцию, на которую были выполнены действия.
$ ('. Btn.danger'). Button ('toggle'). AddClass ('fat')
Все методы должны принимать необязательный объект параметров, строку, нацеленную на конкретный метод, или ничего (что инициирует плагин с поведением по умолчанию):
$ ('# myModal').modal () // инициализируется значениями по умолчанию
$ ('# myModal'). modal ({keyboard: false}) // инициализируется без клавиатуры
$ ('# myModal'). modal ('show') // немедленно инициализирует и вызывает show
Каждый плагин также предоставляет свой необработанный конструктор в свойстве Constructor
: $ .fn.popover.Constructor
. Если вы хотите получить конкретный экземпляр плагина, получите его прямо из элемента: $ ('[rel = "popover"]'). Data ('popover')
.
Настройки по умолчанию
Вы можете изменить настройки по умолчанию для плагина, изменив его объект Constructor.DEFAULTS
:
$ .
fn.modal.Constructor.DEFAULTS.keyboard = false // изменяет значение по умолчанию для опции `keyboard` модального плагина на false
Нет конфликта
Иногда необходимо использовать плагины Bootstrap с другими фреймворками пользовательского интерфейса. В этих обстоятельствах иногда могут возникать конфликты пространств имен.Если это произойдет, вы можете позвонить по номеру .noConflict
для плагина, значение которого вы хотите вернуть.
var bootstrapButton = $ .fn.button.noConflict () // вернуть $ .fn.button к ранее присвоенному значению
$ .fn.bootstrapBtn = bootstrapButton // дать $ (). bootstrapBtn функциональность Bootstrap
События
Bootstrap предоставляет настраиваемые события для уникальных действий большинства плагинов. Как правило, они бывают в форме инфинитива и причастия прошедшего времени, где инфинитив (напр. show
) запускается в начале события, а его форма прошедшего причастия (например, показано
) запускается при завершении действия.
Начиная с 3.0.0, все события Bootstrap имеют пространство имен.
Все инфинитивные события обеспечивают функциональность preventDefault
. Это дает возможность остановить выполнение действия до его запуска.
$ ('# myModal'). On ('show.bs.modal', function (e) {
if (! data) return e.preventDefault () // останавливает отображение модального окна
})
Дезинфицирующее средство
Всплывающие подсказки и всплывающие подсказки используют наше встроенное дезинфицирующее средство для очистки параметров, которые принимают HTML.ария - [\ w -] * $ / i var DefaultWhitelist = { // Глобальные атрибуты разрешены для любого указанного ниже элемента. '*': ['класс', 'каталог', 'идентификатор', 'язык', 'роль', ARIA_ATTRIBUTE_PATTERN], a: ['target', 'href', 'title', 'rel'], площадь: [], b: [], br: [], col: [], код: [], div: [], em: [], час: [], h2: [], h3: [], h4: [], h5: [], h5: [], h6: [], я: [], img: ['src', 'alt', 'title', 'width', 'height'], li: [], ол: [], п: [], pre: [], s: [], маленький: [], охватывать: [], sub: [], Как дела: [], сильный: [], u: [], ul: [] }
Если вы хотите добавить новые значения в этот белый список по умолчанию
, вы можете сделать следующее:
var myDefaultWhiteList = $.
data-my-app - [\ w -] + /
myDefaultWhiteList ['*']. push (myCustomRegex)
Если вы хотите обойти наше средство очистки, потому что вы предпочитаете использовать выделенную библиотеку, например DOMPurify, вы должны сделать следующее:
$ ('# yourTooltip'). Tooltip ({
sanitizeFn: function (content) {
вернуть DOMPurify.sanitize (контент)
}
})
Браузеры без
document.implementation.createHTMLDocument
В случае браузеров, которые не поддерживают документ .implementation.createHTMLDocument
, как и в Internet Explorer 8, встроенная функция sanitize возвращает HTML как есть.
Если вы хотите выполнить дезинфекцию в этом случае, укажите sanitizeFn
и используйте внешнюю библиотеку, например DOMPurify.
Номера версий
Доступ к версии каждого из подключаемых модулей jQuery Bootstrap можно получить через свойство VERSION
конструктора подключаемого модуля. Например, для плагина всплывающей подсказки:
$.fn.tooltip.Constructor.VERSION // => "3.4.1"
Никаких специальных резервных вариантов при отключенном JavaScript
Плагины Bootstrap не очень изящно отключаются, когда JavaScript отключен. Если вы заботитесь о пользовательском опыте в этом случае, используйте
, чтобы объяснить ситуацию (и как повторно включить JavaScript) вашим пользователям и / или добавить свои собственные резервные варианты.
Сторонние библиотеки
Bootstrap официально не поддерживает сторонние библиотеки JavaScript , такие как Prototype или jQuery UI.Несмотря на .noConflict
и события в пространстве имен, могут возникнуть проблемы совместимости, которые необходимо исправить самостоятельно.
О переходах
Для простых эффектов перехода включите transition.js
один раз вместе с другими файлами JS. Если вы используете скомпилированный (или минифицированный)
bootstrap.js
, нет необходимости включать его — он уже есть.
Что внутри
Transition.js — это базовый помощник для событий transitionEnd
, а также эмулятор перехода CSS.Он используется другими плагинами для проверки поддержки переходов CSS и для обнаружения зависших переходов.
Отключение переходов
Переходы можно глобально отключить с помощью следующего фрагмента кода JavaScript, который должен быть после загрузки transition.js
(или bootstrap.js
или bootstrap.min.js
, в зависимости от обстоятельств):
$ .support.transition = false
Модальные окна — это упрощенные, но гибкие диалоговые окна с минимально необходимой функциональностью и интеллектуальными настройками по умолчанию.
Несколько открытых модальных окон не поддерживаются
Не открывайте модальное окно, пока другое все еще видно. Для одновременного отображения нескольких модальных окон требуется специальный код.
Размещение модальной разметки
Всегда старайтесь размещать HTML-код модального окна на верхнем уровне в вашем документе, чтобы другие компоненты не влияли на внешний вид и / или функциональность модального окна.
Из-за того, как HTML5 определяет свою семантику, атрибут autofocus
HTML не действует в модальных окнах Bootstrap. Чтобы добиться того же эффекта, используйте собственный код JavaScript:
$ ('# myModal'). On ('shown.bs.modal', function () {
$ ('# myInput'). фокус ()
})
Примеры
Статический пример
Визуализированное модальное окно с заголовком, телом и набором действий в нижнем колонтитуле.
Модальный заголовок
Одно прекрасное тело & hellip;
модальное содержание ->
Живая демонстрация
Переключите модальное окно с помощью JavaScript, нажав кнопку ниже. Он будет скользить вниз и исчезать из верхней части страницы.
Текст в модальном окне
Duis mollis, est nonmodo luctus, nisi erat porttitor ligula.
Поповер в модальном окне
Эта кнопка должна вызывать всплывающее окно при нажатии.
Подсказки в модальном окне
Эта ссылка и эта ссылка должны иметь всплывающие подсказки при наведении курсора.
Переполнение текста для отображения поведения прокрутки
Cras mattis conctetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac conctetur ac, vestibulum at eros.
Praesentmodo cursus magna, vel scelerisque nisl consctetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed Conctetur. Praesentmodo cursus magna, vel scelerisque nisl conctetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis conctetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac conctetur ac, vestibulum at eros.
Praesentmodo cursus magna, vel scelerisque nisl consctetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed Conctetur. Praesentmodo cursus magna, vel scelerisque nisl conctetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis conctetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac conctetur ac, vestibulum at eros.
Praesentmodo cursus magna, vel scelerisque nisl consctetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed Conctetur. Praesentmodo cursus magna, vel scelerisque nisl conctetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Запустить демонстрационный модальный режим
Модальный заголовок
...
Сделать модальные окна доступными
Не забудьте добавить role = "dialog"
и aria-labelledby = ".
со ссылкой на модальный заголовок в .."
.modal
и role = "document"
в .modal- сам диалог
.
Кроме того, вы можете дать описание вашего модального диалога с помощью aria, описанного
на .modal
.
Встраивание видео с YouTube
Встраивание видео YouTube в модальные окна требует дополнительного JavaScript не в Bootstrap для автоматической остановки воспроизведения и т. Д. См. Этот полезный пост о переполнении стека для получения дополнительной информации.
Дополнительные размеры
Модалы имеют два дополнительных размера, доступных через классы модификаторов, которые можно разместить на .модальный диалог
.
Большой модальный Малый модальный
.
..
...
Удалить анимацию
Для модальных окон, которые просто появляются, а не исчезают при просмотре, удалите класс .fade
из модальной разметки.
...
Использование системы сеток
Чтобы воспользоваться преимуществами системы сеток Bootstrap в модальном окне, просто вложите .row
в .modal-body
, а затем используйте обычные классы системы сеток.
.col-md-4
.col-md-4 .col-md-offset-4
. col-md-3 .col-md-offset-3
.col-md-2 .col-md-offset-4
.col-md-6 .col-md-offset-3
Уровень 1: .col-sm-9Уровень 2: .col-xs-8 .col-sm-6
Уровень 2: .col-XS-4 .col-sm-6
Запустить демонстрационный модальный режим
Модальный заголовок
.col-md-4
.col-md-4 .col-md-offset-4
.
col-md-3 .col-md-offset-3
.col-md-2 .col-md-offset-4
.col-md-6 .col-md-offset-3
Уровень 1: .col-sm-9
Уровень 2: .col-XS-8 .col-sm-6
Уровень 2: .col-xs-4 .col-sm-6
У вас есть несколько кнопок, которые запускают одно и то же модальное окно, только с немного разным содержанием? Используйте атрибуты event.relatedTarget
и HTML data- *
(возможно, через jQuery), чтобы изменять содержимое модального окна в зависимости от того, какая кнопка была нажата. См. Документацию по модальным событиям для получения подробной информации о
relatedTarget
,
...больше кнопок ...
Новое сообщение
<форма>
$ ('# exampleModal').
on ('show.bs.modal', функция (событие) {
var button = $ (event.relatedTarget) // Кнопка, запускающая модальное окно
var recipient = button.data ('Any') // Извлекаем информацию из атрибутов data- *
// При необходимости вы можете инициировать здесь запрос AJAX (а затем выполнить обновление в обратном вызове).
// Обновляем содержимое модального окна. Здесь мы будем использовать jQuery, но вместо этого вы можете использовать библиотеку привязки данных или другие методы.
var modal = $ (это)
modal.find ('. modal-title'). text ('Новое сообщение для' + получатель)
модальный.find ('. ввод модального тела'). val (получатель)
})
Использование
Модальный плагин переключает ваш скрытый контент по запросу с помощью атрибутов данных или JavaScript. Он также добавляет .modal-open
к
, чтобы переопределить поведение прокрутки по умолчанию, и генерирует .modal-backdrop
, чтобы предоставить область щелчка для закрытия отображаемых модальных окон при щелчке вне модального окна.
Через атрибуты данных
Активировать модальное окно без написания JavaScript.Установите data-toggle = "modal"
на элементе контроллера, например кнопке, вместе с data-target = "# foo"
или href = "# foo"
, чтобы выбрать конкретный модальный элемент для переключения.
Через JavaScript
Вызов модального окна с идентификатором myModal
с помощью одной строки JavaScript:
$ ('# myModal'). Modal (опции)
Опции
Параметры могут передаваться через атрибуты данных или JavaScript.Для атрибутов данных добавьте имя параметра к data-
, как в data-backdrop = ""
.
Имя | тип | по умолчанию | описание |
---|---|---|---|
фон | boolean или строка 'static' |
правда | Включает элемент модального фона.![]() static для фона, который не закрывает модальное окно при щелчке. |
клавиатура | логическое | правда | Закрывает модальное окно при нажатии клавиши выхода |
показать | логическое | правда | Показывает модальное окно при инициализации. |
удаленный | путь | ложь |
Эта опция устарела, начиная с версии v3.3.0 и был удален в v4. Вместо этого мы рекомендуем использовать клиентские шаблоны или структуру привязки данных или самостоятельно вызывать jQuery.load. Если предоставлен удаленный URL-адрес, содержимое будет загружено один раз с помощью метода jQuery |
Методы
.modal (опции)
Активирует ваш контент как модальный. Принимает необязательные параметры , объект
.
$ ('# myModal'). Modal ({
клавиатура: ложь
})
.modal ('toggle')
Переключает модальное окно вручную. Возврат к вызывающей стороне до того, как модальное окно было фактически показано или скрыто (т.е. перед событием shown.bs.modal
или hidden.bs.modal
).
$ ('# myModal'). Modal ('toggle')
.modal ('показать')
Открывает модальное окно вручную. Возврат к вызывающей стороне до того, как модальное окно будет фактически показано (то есть до того, как произойдет событие shown.
). bs.modal
$ ('# myModal'). Modal ('show')
.modal ('скрыть')
Вручную скрывает модальное окно. Возврат к вызывающей стороне до фактического скрытия модального окна (т.е. до того, как произойдет событие hidden.bs.modal
).
$ ('# myModal'). Modal ('hide')
.modal ('handleUpdate')
Перенастраивает положение модального окна для противодействия полосе прокрутки в случае ее появления, что приведет к переходу модального окна влево.
Требуется только при изменении высоты модального окна, когда оно открыто.
$ ('# myModal').модальный ('handleUpdate')
События
Модальный классBootstrap предоставляет несколько событий для подключения к модальным функциям.
Все модальные события запускаются в самом модальном окне (то есть в Добавляйте раскрывающиеся меню практически ко всему с помощью этого простого плагина, включая панель навигации, вкладки и таблетки. С помощью атрибутов данных или JavaScript подключаемый модуль раскрывающегося списка переключает скрытое содержимое (раскрывающиеся меню) путем переключения класса На мобильных устройствах открытие раскрывающегося списка добавляет Примечание. Атрибут Добавьте Чтобы URL-адреса оставались неизменными с кнопками ссылок, используйте атрибут Вызов раскрывающихся списков с помощью JavaScript: Независимо от того, вызываете ли вы раскрывающийся список через JavaScript или вместо этого используете data-api, Нет Переключает раскрывающееся меню данной панели навигации или навигации с вкладками. Все события dropdown запускаются в родительском элементе Все раскрывающиеся события имеют свойство Плагин ScrollSpy предназначен для автоматического обновления навигационных целей в зависимости от положения прокрутки. Рекламные леггинсы keytar, brunch id art party dolor labore. Pitchfork yrim lo-fi, прежде чем они распроданы qui.Tumblr права велосипеда с фермы на стол, что угодно. Кардиган Anim keffiyeh carles. Фотобудка Velit seitan mcsweeney 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie минимум, вы, вероятно, не слышали о них и кардиган трастовый фонд culpa biodiesel эстетика Уэса Андерсона. Нихил татуировал акусамус, ирония судьбы, биодизель, куфия, ремесленник, улламко, конскват. Veniam marfa, скейтборд с усами, жирная борода с вилами. Freegan борода aliqua cupidatat mcsweeney’s vero.Cupidatat four loko nisi, ea helvetica nulla carles. Татуированный свитер с косби, фургон с едой, винил mcsweeney’s quis non freegan. Lo-fi wes anderson +1 портной. Occaecat Commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bike rights adipisicing banh mi, velit ea sunt next level locavore, кофе одного происхождения в magna veniam. Виниловая пластинка High Life, Echo Park Concequat Quis Aliquip Banh Mi Willy.Vero VHS очень популярный. Сумка-мессенджер Consectetur nisi DIY Minim. Cred ex in, прочная сумка на пояс delectus Conctetur для iphone. В парке Incididunt Echo, видный мастер службы deserunt mcsweeney очищает thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel Laborum крафтовое пиво. Кофе-подорожники одного происхождения irure four loko, cupidatat terry richardson master cleanse. Предположим, вы, вероятно, не слышали о них: поясная сумка для арт-вечеринки, временная реклама татуированного кардигана nulla.Proident wolf nesciunt sartorial keffiyeh eu banh mi устойчивый. Рекламные леггинсы keytar, brunch id art party dolor labore. Pitchfork yrim lo-fi, прежде чем они распроданы qui. Tumblr права велосипеда с фермы на стол, что угодно. Кардиган Anim keffiyeh carles. Фотобудка Velit seitan mcsweeney 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie минимум, вы, вероятно, не слышали о них и кардиган трастовый фонд culpa biodiesel эстетика Уэса Андерсона.Нихил татуировал акусамус, ирония судьбы, биодизель, куфия, ремесленник, улламко, конскват. Keytar twee blog, сумка-мессенджер culpa marfa something delectus food truck. Sapiente synth id предположительно. Locavore sed helvetica cliche ирония, thundercats, о которых вы, вероятно, не слышали, conquat безглютеновый lo-fi fap aliquip. Элитное место работы перед распродажей, Terry Richardson Proident Brunch Nesciunt Quis Cosby Sweater Pariatur Keffiyeh ut Helvetica Artisan. Независимо от метода реализации, scrollspy требует использования Чтобы легко добавить поведение прокрутки к вашей навигации на верхней панели, добавьте После добавления При использовании scrollspy в сочетании с добавлением или удалением элементов из DOM вам необходимо вызвать метод обновления следующим образом: Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя опции к Добавьте быстрые динамические вкладки для перехода между панелями локального контента, даже через раскрывающиеся меню. Вложенные вкладки не поддерживаются. Необработанный деним Вы наверняка не слышали о джинсовых шортах Austin. Nesciunt tofu stumptown aliqua, мастер очистки ретро-синтезатора. Усы cliche tempor, williamsburg carles vegan helvetica. Репрезендерит мясник ретро кефиех ловец снов синтезатор. Свитер Cosby eu banh mi, qui irure terry richardson ex squid. Food truck fixie locavore, кофейный кальмар одного происхождения accusamus mcsweeney’s marfa nulla. Exercitation +1 labore velit, блог портняжные леггинсы PBR следующего уровня wes anderson artisan four loko-farm to table craft beer twee. Qui photo booth высокой печати, коммодо enim craft пиво млкшк аликвип джинсовые шорты ullamco ad винил cillum PBR. Homo nostrud organic, предположительно, работает эстетическая magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown.Vegan fanny pack odio cillum wes anderson 8-битные экологически чистые джинсовые шорты с бородами, этическая вина Терри Ричардсон, биодизель, сделанная своими руками. Художественная вечеринка Sceneter Stumptown, tumblr butcher vero sint qui sapiente accusamus, татуированный эхо-парк. Etsy mixtape wayfarers, этичный тофу уэса андерсона до того, как они распродали органический ломо-ретро фанни-пакет от mcsweeney в готовом виде. трастовый фонд seitan высокой печати, keytar raw denim keffiyeh etsy art party перед распродажей свитера master cleanse без глютена с кальмарами.Fanny pack portland seitan DIY, арт-вечеринка locavore волк клише светская жизнь эхо-парк в Остине. Кред винил keffiyeh DIY salvia PBR, banh mi до того, как они распродали свитер VHS с вирусом locavore cosby. Lomo wolf viral, готовые усы thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan. Включить вкладки с вкладками через JavaScript (каждую вкладку нужно активировать отдельно): Активировать отдельные вкладки можно несколькими способами: Вы можете активировать навигацию по вкладкам или таблеткам без написания кода JavaScript, просто указав для элемента Чтобы вкладки постепенно появлялись, добавьте
Активирует элемент вкладки и контейнер содержимого. Вкладка должна иметь либо Выбирает данную вкладку и показывает связанное с ней содержимое. При отображении новой вкладки события запускаются в следующем порядке: Если ни одна вкладка еще не была активна, то события На основе отличного jQuery.подвыпивший плагин, написанный Джейсоном Фреймом; Всплывающие подсказки — это обновленная версия, которая не полагается на изображения, использует CSS3 для анимации и атрибуты данных для локального хранения заголовков. Всплывающие подсказки с заголовками нулевой длины никогда не отображаются. Наведите указатель мыши на ссылки ниже, чтобы увидеть всплывающие подсказки: Доступны четыре варианта: по верхнему, правому, нижнему и левому краям. Плагин всплывающих подсказок генерирует контент и разметку по запросу и по умолчанию помещает всплывающие подсказки после их триггерного элемента. Запуск всплывающей подсказки через JavaScript: Требуемая разметка для всплывающей подсказки — это только Параметры могут передаваться через атрибуты данных или JavaScript.Для атрибутов данных добавьте имя параметра к Добавляет всплывающую подсказку к определенному элементу.Пример: Задержка показа и скрытия всплывающей подсказки (мс) — не относится к ручному типу запуска Если номер указан, задержка применяется к скрытию / отображению Структура объекта: Как разместить всплывающую подсказку — вверху | внизу | слева | право | авто. Когда функция используется для определения размещения, она вызывается с помощью узла DOM всплывающей подсказки в качестве первого аргумента и узла DOM инициирующего элемента в качестве второго. Базовый HTML-код для использования при создании всплывающей подсказки. Заголовок Самый внешний элемент оболочки должен иметь класс Значение заголовка по умолчанию, если атрибут Если функция задана, она будет вызываться со своей ссылкой Сохраняет всплывающую подсказку в пределах этого элемента.Пример: Если функция задана, она вызывается с запускающим элементом DOM-узлом в качестве единственного аргумента. Присоединяет обработчик всплывающей подсказки к коллекции элементов. Показывает всплывающую подсказку элемента. Возврат к вызывающей стороне до того, как всплывающая подсказка будет фактически показана (т. Скрывает всплывающую подсказку элемента. Возврат к вызывающей стороне до того, как всплывающая подсказка была фактически скрыта (т.е. до того, как произойдет событие Переключает всплывающую подсказку элемента. Возврат к вызывающей стороне до того, как всплывающая подсказка была фактически показана или скрыта (т.е. перед событием Скрывает и уничтожает всплывающую подсказку элемента. Всплывающие подсказки, использующие делегирование (которые создаются с использованием опции селектора Добавьте небольшие наложения контента, как на iPad, в любой элемент для размещения вторичной информации. всплывающих окон, заголовок и содержимое которых имеют нулевую длину, никогда не отображаются. По соображениям производительности API данных всплывающей подсказки и всплывающего окна являются дополнительными, что означает, что вы должны инициализировать их самостоятельно. Один из способов инициализировать все всплывающие окна на странице - выбрать их по их атрибуту При использовании всплывающих окон на элементах в пределах Вызов Чтобы добавить всплывающее окно к элементу Иногда вы хотите добавить всплывающее окно к гиперссылке, которая переносит несколько строк. По умолчанию плагин popover центрирует его по горизонтали и вертикали. Добавьте Доступны четыре варианта: по верхнему, правому, нижнему и левому краям. Sed posuere consctetur est at lobortis. Sed posuere consctetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consctetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consctetur est at lobortis.Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Нажмите, чтобы переключить всплывающее окно
Всплывающее окно справа
Поповер сверху
Поповер внизу
Поповер слева
Используйте триггер Для правильного кроссбраузерного и кросс-платформенного поведения необходимо использовать тег Включить всплывающие окна через JavaScript: Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра к Обратите внимание, что по соображениям безопасности параметры Добавляет всплывающее окно к определенному элементу. Значение содержимого по умолчанию, если атрибут Если задана функция, она будет вызываться со своей ссылкой Задержка показа и скрытия всплывающего окна (мс) - не относится к ручному типу триггера Если номер указан, задержка применяется к скрытию / отображению Структура объекта: Как разместить всплывающее окно - вверху | внизу | слева | право | авто. Когда функция используется для определения размещения, она вызывается с помощью узла DOM всплывающего окна в качестве первого аргумента и узла DOM элемента запуска в качестве второго. Базовый HTML-код для использования при создании всплывающего окна. Заголовок Содержимое Самый внешний элемент оболочки должен иметь класс Значение заголовка по умолчанию, если атрибут Если задана функция, она будет вызываться со своей ссылкой Сохраняет всплывающее окно в пределах этого элемента.Пример: Если функция задана, она вызывается с запускающим элементом DOM-узлом в качестве единственного аргумента. Опции для отдельных всплывающих окон можно также указать с помощью атрибутов данных, как описано выше. Инициализирует всплывающие окна для коллекции элементов. Показывает всплывающее окно элемента. Возврат к вызывающей стороне до того, как всплывающее окно будет фактически показано (т.е. до того, как произойдет событие Скрывает всплывающее окно элемента. Возвращает вызывающему абоненту до фактического скрытия всплывающего окна (т.е. до того, как произойдет событие Переключает всплывающее окно элемента. Возврат к вызывающей стороне до того, как всплывающее окно было фактически показано или скрыто (т.е. до того, как произойдет событие Скрывает и уничтожает всплывающее окно элемента. Всплывающие окна, использующие делегирование (которые создаются с использованием опции селектора С помощью этого подключаемого модуля добавляйте функцию закрытия ко всем предупреждающим сообщениям. При использовании кнопки
×
Святой гуакамоле! Проверьте себя, вы не слишком хорошо выглядите. Измените то и то и попробуйте еще раз. Duis mollis, est nonmodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis conctetur purus sit amet fermentum.
Выполните это действие
Или сделай это
Просто добавьте Чтобы ваши оповещения использовали анимацию при закрытии, убедитесь, что к ним уже применены классы Заставляет предупреждение прослушивать события щелчка на дочерних элементах, которые имеют атрибут Закрывает предупреждение, удаляя его из модели DOM. Если классы Bootstrap предоставляет несколько событий для подключения к функциям предупреждений. Делайте больше с помощью кнопок. Управляйте состояниями кнопок или создавайте группы кнопок для дополнительных компонентов, таких как панели инструментов. Добавьте Эта функция устарела, начиная с версии 3.3.5, и была удалена в версии 4.
Состояние загрузки
Добавьте Для кнопок с предварительным переключением необходимо самостоятельно добавить класс
Одиночный переключатель
Добавьте Для предварительно выбранных опций необходимо самостоятельно добавить класс Если отмеченное состояние кнопки флажка обновляется без запуска события Переключает состояние push. Придает кнопке вид, что она была активирована. Сбрасывает состояние кнопки - заменяет текст исходным текстом. Этот метод является асинхронным и возвращается до фактического завершения сброса. Меняет текст на любое текстовое состояние, определенное данными. Гибкий плагин, который использует несколько классов для легкого переключения. Collapse требует, чтобы плагин переходов был включен в вашу версию Bootstrap. Нажмите кнопки ниже, чтобы показать или скрыть другой элемент с помощью изменений класса: Можно использовать ссылку с атрибутом
Ссылка на href
Кнопка с целью данных
Anim pariatur cliche correhenderit, enim eiusmod high life accusamus terry richardson ad squid.Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент.
Расширить поведение сворачивания по умолчанию, чтобы создать гармошку с компонентом панели.
Anim pariatur cliche correhenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, бранч со скейтбордом без купидатата. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар, кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo.Леггинсы occaecat craft beer farm-to-table, необработанный деним, эстетичный синтезатор, о которых вы, вероятно, не слышали, accusamus labore, устойчивые VHS.
Anim pariatur cliche correhenderit, enim eiusmod high life accusamus terry richardson ad squid.
Anim pariatur cliche correhenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, бранч со скейтбордом без купидатата.Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар, кофе одного происхождения nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Также можно заменить Не забудьте добавить Кроме того, если ваш элемент управления нацелен на единственный складной элемент, т. Е.Атрибут Плагин коллапса использует несколько классов для работы с тяжелыми грузами: Эти классы можно найти в Просто добавьте Чтобы добавить управление группами в виде гармошки к складному элементу управления, добавьте атрибут данных Включить вручную с помощью: Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра к Активирует ваш контент как сворачиваемый элемент. Переключает складной элемент на отображение или скрытие. Возврат к вызывающей стороне до того, как сворачиваемый элемент был фактически показан или скрыт (то есть до того, как произойдет событие Показывает складной элемент. Возврат к вызывающей стороне до того, как складной элемент будет фактически показан (т.е. перед событием Скрывает складной элемент. Возврат к вызывающей стороне до того, как сворачиваемый элемент был фактически скрыт (т.е. до того, как произойдет событие Класс коллапса Bootstrap предоставляет несколько событий для подключения к функциональности коллапса. Компонент слайд-шоу для циклического просмотра элементов, например карусели. Вложенные карусели не поддерживаются. Компонент карусели обычно не соответствует стандартам доступности. Bootstrap использует исключительно CSS3 для своей анимации, но Internet Explorer 8 и 9 не поддерживает необходимые свойства CSS. Таким образом, при использовании этих браузеров анимация перехода между слайдами отсутствует. Мы намеренно решили не включать в переходы резервные копии на основе jQuery. Модель Классы Легко добавляйте подписи к слайдам с помощью Nulla vitae elit libero, pharetra augue mollis interdum. Lorem ipsum dolor sit amet, conctetur adipiscing elit. Praesentmodo cursus magna, vel scelerisque nisl consctetur. ... Карусели требуют использования Используйте атрибуты данных, чтобы легко управлять положением карусели. Атрибут Вызов карусели вручную с помощью: Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя опции к Инициализирует карусель с дополнительным объектом options Перебирает элементы карусели слева направо. Запрещает карусели циклически перемещаться по элементам. Циклический переход карусели к определенному кадру (на основе 0, аналогично массиву). Переход к предыдущему элементу. Переход к следующему элементу. Bootstrap предоставляет два события для подключения к функциональности карусели. Оба события имеют следующие дополнительные свойства: Все события карусели запускаются в самой карусели (то есть в Плагин аффикса переключает положение Используйте подключаемый модуль аффиксов через атрибуты данных или вручную с помощью собственного JavaScript. Примечание. Не используйте подключаемый модуль аффикса к элементу, содержащемуся в относительно позиционированном элементе, таком как вытягиваемый или выталкиваемый столбец, из-за ошибки рендеринга Safari. Плагин affix переключает между тремя классами, каждый из которых представляет определенное состояние: Вот как работает плагин affix: Выполните указанные выше действия, чтобы настроить CSS для любого из вариантов использования, указанных ниже. Чтобы легко добавить поведение аффикса к любому элементу, просто добавьте Вызов плагина affix через JavaScript: Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя опции к Активирует ваш контент как прикрепленный контент. Принимает необязательные параметры Пересчитывает состояние аффикса на основе размеров, положения и положения прокрутки соответствующих элементов. Bootstrap предоставляет несколько событий для подключения к функциям аффиксов. Обычно нам нужно всего несколько строк кода, чтобы создать кнопку в HTML, довольно легко, да? Однако самое интересное при работе с интерфейсом - это фактическое применение JavaScript, чтобы сделать вещи «динамическими». В этой статье мы попрактикуемся в написании JavaScript вместе с HTML и CSS для создания динамической кнопки. Концепция довольно проста, но с этой небольшой проблемой я хочу продемонстрировать некоторые важные концепции DOM, создание и стилизацию кнопки с помощью HTML и CSS, как обрабатывать события и делать вещи динамическими с помощью JavaScript. Если вы никогда раньше не работали с JavaScript, HTML и CSS одновременно, вот шаблон, который поможет вам наглядно представить, как писать код JavaScript и CSS в файле HTML: Как и в приведенном выше шаблоне, вы можете написать CSS внутри тегов Примечание. HTML-комментариев начинаются с Вместо того, чтобы писать HTML, CSS и JavaScript в одном файле, вы должны отделить их от отдельных файлов, чтобы упростить обслуживание, редактирование, минимизацию и уменьшить громоздкость, которую может иметь один файл. Представьте, что у нас есть 3 файла: Мы используем файлы cookie на нашем веб-сайте.Некоторые из них очень важны, а другие помогают нам улучшить этот веб-сайт и улучшить ваш опыт.
Принять все
Сохранять
Индивидуальные настройки конфиденциальности
Подробная информация о файлах cookie
Политика конфиденциальности
Отпечаток
Здесь вы найдете обзор всех используемых файлов cookie.Вы можете дать свое согласие на использование целых категорий или отобразить дополнительную информацию и выбрать определенные файлы cookie.
Тип события
Описание
показать модальный
Это событие запускается немедленно при вызове метода экземпляра
show
.Если это вызвано щелчком, выбранный элемент доступен как свойство relatedTarget
события. показан модальный
Это событие вызывается, когда модальное окно становится видимым для пользователя (будет ожидать завершения переходов CSS). Если он вызван щелчком, выбранный элемент доступен как свойство
relatedTarget
события. hide.bs.modal
Это событие запускается сразу после вызова метода экземпляра
hide
. hidden.bs.modal
Это событие вызывается, когда модальное окно перестает быть скрытым от пользователя (будет ожидать завершения переходов CSS).
загруженный модальный
Это событие вызывается, когда модальное окно загружает контент с помощью опции
remote
.
$ ('# myModal'). On ('hidden.bs.modal', function (e) {
// сделай что-нибудь...
})
Примеры
Внутри панели навигации
Внутри таблеток
Использование
.open
в родительском элементе списка. .dropdown-backdrop
в качестве области касания для закрытия раскрывающихся меню при нажатии вне меню, что является требованием для надлежащей поддержки iOS. Это означает, что переключение из открытого раскрывающегося меню в другое раскрывающееся меню требует дополнительного нажатия на мобильном устройстве.
data-toggle = "dropdown"
используется для закрытия раскрывающихся меню на уровне приложения, поэтому рекомендуется всегда использовать его. Через атрибуты данных
data-toggle = "dropdown"
к ссылке или кнопке, чтобы переключить раскрывающийся список.
...
data-target
вместо href = "#"
.
.
..
Через JavaScript
.
$ ('.dropdown-toggle '). dropdown ()
data-toggle = "dropdown"
все еще требуется
data-toggle = "dropdown"
всегда должен присутствовать в элементе триггера раскрывающегося списка. Опции
Методы
$ (). Раскрывающийся список ('переключение')
События
.dropdown-menu
. relatedTarget
, значение которого является переключаемым элементом привязки.
Тип события
Описание
показать.bs.dropdown
Это событие запускается немедленно при вызове метода экземпляра шоу.
Показано .bs.dropdown
Это событие вызывается, когда раскрывающийся список становится видимым для пользователя (ожидает завершения переходов CSS).
hide.bs.dropdown
Это событие запускается сразу после вызова метода экземпляра hide.
hidden.bs.dropdown
Это событие вызывается, когда раскрывающийся список перестает быть скрытым от пользователя (будет ожидать завершения переходов CSS).
$ ('# myDropdown'). On ('show.bs.dropdown', function () {
// сделай что-нибудь…
})
Прокрутите область под панелью навигации и посмотрите, как меняется активный класс. Подпункты раскрывающегося списка также будут выделены.
@fat
@mdo
Карлес неэстетическое упражнение quis jentrify. Brooklyn adipisicing Craft Beer Vice Keytar deserunt.
одна
два
Элитный волк сладострастный, lo-fi ea portland, прежде чем они продали четыре локо. Locavore enim nostrud mlkshk brooklyn nesciunt.
три
Кардиган крафтовый пивной сейтан готовый велит.VHS chambray labouris tempor veniam. Anim mollit Minimum Commodo Ullamco Thundercats.
Требуется относительное позиционирование
position: relative;
на элементе, за которым вы шпионите. В большинстве случаев это
. При прокрутке элементов, отличных от
, убедитесь, что для задана высота и overflow-y: scroll; Подано
. Через атрибуты данных
data-spy = "scroll"
к элементу, за которым вы хотите следить (чаще всего это
). Затем добавьте атрибут data-target
с идентификатором или классом родительского элемента любого компонента Bootstrap .nav
.
кузов {
положение: относительное;
}
.
..
...
Через JavaScript
позиция: относительная;
в вашем CSS, вызовите scrollspy через JavaScript:
$ ('body'). Scrollspy ({target: '# navbar-example'})
Методы
.scrollspy ('обновить')
$ ('[data-spy = "scroll"]').each (function () {
var $ spy = $ (это) .scrollspy ('обновить')
})
Опции
data-
, как в data-offset = ""
.
Имя
тип
по умолчанию
описание
смещение
номер
10
Пикселей для смещения сверху при вычислении положения прокрутки.
События
Тип события
Описание
activate.bs.scrollspy
Это событие срабатывает всякий раз, когда scrollspy активирует новый элемент.
$ ('# myScrollspy'). On ('activate.bs.scrollspy', function () {
// сделай что-нибудь…
})
Примеры вкладок
Аликвип плац для шалфея cillum iphone. Кардиган Seitan aliquip quis американская одежда, мясник сладострастный nisi qui.
Сумка-мессенджер с татуировкой в виде вилок, крафтовое пиво, iphone skateboard locavore carles etsy salvia banksy с капюшоном helvetica.DIY synth PBR Банки ирония. Поножи джентрификации кальмара 8-битный кредит вилами. Williamsburg banh mi без глютена, карлес вилы биодизель fixie etsy retro mlkshk Vice blog. Вы, наверное, никогда о них не слышали, блог о крафтовом пиве, виниловом пиве, stumptown. Вилы из экологически чистого тофу, синтезатор, шамбре г.
Использование
$ ('# myTabs a').
click (function (e) {
e.preventDefault ()
$ (это) .tab ('показать')
})
$ ('# myTabs a [href = "# profile"]'). Tab ('show') // Выбрать вкладку по имени
$ ('# myTabs a: first'). tab ('show') // Выбрать первую вкладку
$ ('# myTabs a: last'). tab ('show') // Выбрать последнюю вкладку
$ ('# myTabs li: eq (2) a'). tab ('show') // Выбрать третью вкладку (с индексом 0)
Разметка
data-toggle = "tab"
или data-toggle = "pill"
.Добавление классов nav
и nav-tabs
на вкладку ul
применит стиль вкладки Bootstrap, а добавление классов nav
и nav-pills
применит стиль таблетки.
..
Эффект затухания
.fade
к каждой .tab-pane
. Первая панель вкладок также должна иметь . В
, чтобы исходное содержимое было видимым.
Методы
$ (). Вкладка
data-target
, либо href
, нацеленный на узел контейнера в DOM. В приведенных выше примерах вкладки — это
с атрибутами data-toggle = "tab"
.
.tab ('показать')
Любая другая вкладка, которая была выбрана ранее, становится невыделенной, а связанное с ней содержимое скрывается. Возврат к вызывающему абоненту до фактического отображения панели вкладок (т.е. до того, как произойдет событие
shown.bs.tab
).
$ ('# someTab'). Tab ('show')
События
скрыть.bs.tab
(на текущей активной вкладке) show.bs.tab
(на вкладке для показа) hidden.bs.tab
(на предыдущей активной вкладке такая же, как для события hide.bs.tab
) показано.bs.tab
(на только что активной только что показанной вкладке та же, что и для события show.bs.tab
) hide.bs.tab
и hidden.bs.
запускаться не будут. tab
Тип события
Описание
показать.bs.tab
Это событие возникает при отображении вкладок, но до отображения новой вкладки. Используйте
Показано event.target
и event.relatedTarget
для таргетинга на активную вкладку и предыдущую активную вкладку (если есть) соответственно. .bs.tab
Это событие запускается при отображении вкладок после того, как вкладка была показана.Используйте
event.target
и event.relatedTarget
для таргетинга на активную вкладку и предыдущую активную вкладку (если есть) соответственно. hide.bs.tab
Это событие возникает, когда должна быть показана новая вкладка (и, таким образом, предыдущая активная вкладка должна быть скрыта). Используйте
event.target
и event.
для таргетинга на текущую активную вкладку и новую вкладку, которая скоро станет активной, соответственно. relatedTarget
скрыто.bs.tab
Это событие возникает после отображения новой вкладки (и, таким образом, предыдущая активная вкладка скрыта). Используйте
event.target
и event.relatedTarget
для нацеливания на предыдущую активную вкладку и новую активную вкладку соответственно.
$ ('a [data-toggle = "tab"]'). On ('shown.bs.tab', function (e) {
e.target // недавно активированная вкладка
e.relatedTarget // предыдущая активная вкладка
})
Статическая подсказка
Четыре направления
$ ('# example'). Tooltip (options)
Разметка
атрибутов данных
и заголовка
в элементе HTML, для которого вы хотите иметь всплывающую подсказку. Сгенерированная разметка всплывающей подсказки довольно проста, хотя для нее требуется позиция (по умолчанию плагином установлено значение top
).
Наведите указатель мыши на меня
Опции
data-
, как в data-animation = ""
.
Имя
Тип
По умолчанию
Описание
анимация
логическое
правда
Применить переход затухания CSS к всплывающей подсказке
контейнер
строка | ложь
ложь
контейнер: 'body'
. Этот параметр особенно полезен тем, что позволяет вам размещать всплывающую подсказку в потоке документа рядом с элементом запуска, что предотвращает отрыв всплывающей подсказки от элемента запуска во время изменения размера окна. задержка
Номер | объект
0
задержка: {"show": 500, "hide": 100}
HTML
логическое
ложь
Вставить HTML во всплывающую подсказку.
Если false, метод jQuery
text
будет использоваться для вставки содержимого в DOM. Используйте текст, если вас беспокоят XSS-атаки. размещение
строка | функция
‘верх’
Если задано «auto», всплывающая подсказка будет динамически переориентирована. Например, если для размещения выбрано значение «автоматически влево», всплывающая подсказка будет отображаться слева, когда это возможно, в противном случае — справа. контекст
установлен для экземпляра всплывающей подсказки. селектор
строка
ложь
Если предусмотрен селектор, объекты всплывающей подсказки будут делегированы указанным целям.
На практике это также используется для применения всплывающих подсказок к динамически добавляемым элементам DOM (
jQuery.на опоре
). См. Этот и информативный пример. шаблон
строка
'
всплывающей подсказки
будет вставлен в .tooltip-inner
. .tooltip-arrow
станет стрелкой всплывающей подсказки. .tooltip
. название
строка | функция
»
заголовок
отсутствует. this
, установленной на элемент, к которому прикреплена всплывающая подсказка.
триггер
строка
‘hover focus’
Как запускается всплывающая подсказка — щелкните | зависать | фокус | руководство. Вы можете передать несколько триггеров; разделите их пробелом.
ручной
нельзя комбинировать с другими триггерами. окно просмотра
строка | объект | функция
{селектор: ‘тело’, отступ: 0}
viewport: '#viewport'
или {"selector": "#viewport", "padding": 0}
контекст
установлен для экземпляра всплывающей подсказки. продезинфицировать
логическое
правда
Включение или отключение очистки.
Если активирован
«шаблон»
, «контент»
и «заголовок»
параметры будут очищены. белый список
объект
Значение по умолчанию
Объект, содержащий разрешенные атрибуты и теги
sanitizeFn
null | функция
null
Здесь вы можете указать свою собственную функцию дезинфекции. Это может быть полезно, если вы предпочитаете использовать специальную библиотеку для выполнения очистки.
Методы
$ ().всплывающая подсказка (параметры)
.tooltip ('показать')
е. до того, как произойдет событие
shown.bs.tooltip
). Это считается «ручным» запуском всплывающей подсказки. Всплывающие подсказки с заголовками нулевой длины никогда не отображаются.
$ ('# element'). Tooltip ('show')
.всплывающая подсказка ('скрыть')
hidden.bs.tooltip
). Это считается «ручным» запуском всплывающей подсказки.
$ ('# element'). Tooltip ('hide')
.tooltip ('toggle')
shown.bs.tooltip
или hidden.bs.tooltip
). Это считается «ручным» запуском всплывающей подсказки.
$ ('# element'). Tooltip ('toggle')
.tooltip ('destroy')
), не могут быть уничтожены индивидуально для дочерних триггерных элементов.
$ ('# элемент').tooltip ('destroy')
События
Тип события
Описание
показать.bs.tooltip
Это событие запускается немедленно при вызове метода экземпляра
Показано show
. .bs.tooltip
Это событие вызывается, когда всплывающая подсказка становится видимой для пользователя (ожидает завершения переходов CSS).
hide.
bs.tooltip
Это событие запускается сразу после вызова метода экземпляра
hide
. hidden.bs.tooltip
Это событие вызывается, когда всплывающая подсказка перестает быть скрытой от пользователя (будет ожидать завершения переходов CSS).
Insert.bs.tooltip
Это событие запускается после события
show.bs.tooltip
, когда шаблон всплывающей подсказки был добавлен в DOM.
$ ('# myTooltip'). On ('hidden.bs.tooltip', function () {
// сделай что-нибудь…
})
Возможность подписки
.
data-toggle
:
$ (function () {
$ ('[data-toggle = "popover"]'). popover ()
})
Всплывающие окна в группах кнопок, группах ввода и таблицах требуют специальной настройки
.btn-group
или .input-group
, или на элементах, связанных с таблицами (
,
,
, < thead>
, ,
), вам нужно будет указать опцию
container: 'body'
(задокументировано ниже), чтобы избежать нежелательных побочных эффектов (таких как расширение элемента и / или теряет закругленные углы при срабатывании всплывающего окна).
Не пытайтесь отображать всплывающие окна на скрытых элементах
$ (.
, когда целевой элемент - ..). Popover ('show')
display: none;
приведет к неправильному расположению всплывающего окна. Для всплывающих окон на отключенных элементах требуются элементы-оболочки
disabled
или .disabled
, поместите элемент внутри
Многострочные ссылки
пробелов: nowrap;
к вашим якорям, чтобы избежать этого. Примеры
Статическое всплывающее окно
Верхняя часть с верхом
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Выдвижной правый
Вытяжное дно
Поповер слева
Живая демонстрация
Четыре направления
Закрыть при следующем нажатии
focus
, чтобы закрыть всплывающие окна при следующем щелчке, сделанном пользователем. Специальная разметка, необходимая для закрытия при следующем нажатии
, не тег
, а также необходимо включить role = "button"
и tabindex
атрибутов.
Раскрывающееся всплывающее окно
Использование
$ ('# example'). Popover (options)
Options
data-
, как в data-animation = ""
. sanitize
, sanitizeFn
и whiteList
не могут быть предоставлены с использованием атрибутов данных.
Имя
Тип
По умолчанию
Описание
анимация
логическое
правда
Применить переход CSS fade к всплывающему окну
контейнер
строка | ложь
ложь
Пример:
контейнер: 'body'
. Этот параметр особенно полезен тем, что позволяет вам размещать всплывающее окно в потоке документа рядом с элементом запуска, что предотвращает перемещение всплывающего окна от элемента запуска во время изменения размера окна. содержание
строка | функция
''
data-content
отсутствует. this
, установленной на элемент, к которому прикреплено всплывающее окно. задержка
Номер | объект
0
задержка: {"show": 500, "hide": 100}
HTML
логическое
ложь
Вставить HTML во всплывающее окно.
Если false, метод jQuery
text
будет использоваться для вставки содержимого в DOM. Используйте текст, если вас беспокоят XSS-атаки. размещение
строка | функция
'правый'
Когда указано "auto", всплывающее окно будет динамически переориентировано. Например, если для размещения выбрано значение «автоматически влево», всплывающее окно будет отображаться слева, когда это возможно, в противном случае оно будет отображаться справа. контекст
установлен для экземпляра всплывающего окна. селектор
строка
ложь
Если предусмотрен селектор, всплывающие объекты будут делегированы указанным целям.
На практике это используется для включения всплывающих окон динамического HTML-содержимого.См. Этот и информативный пример.
шаблон
строка
'
всплывающего окна
будет вставлен в .popover-title
. всплывающего окна
будет вставлено в .Поповер-контент
. .arrow
станет стрелкой всплывающего окна. .popover
. название
строка | функция
''
заголовок
отсутствует.
this
, установленной на элемент, к которому прикреплено всплывающее окно. триггер
строка
'нажмите'
Как запускается всплывающее окно - щелкните | зависать | фокус | руководство. Вы можете передать несколько триггеров; разделите их пробелом.
ручной
нельзя комбинировать с другими триггерами. окно просмотра
строка | объект | функция
{селектор: 'тело', отступ: 0}
viewport: '#viewport'
или {"selector": "#viewport", "padding": 0}
контекст
установлен для экземпляра всплывающего окна.
продезинфицировать
логическое
правда
Включение или отключение очистки. Если активирован
«шаблон»
, «контент»
и «заголовок»
параметры будут очищены. белый список
объект
Значение по умолчанию
Объект, содержащий разрешенные атрибуты и теги
sanitizeFn
null | функция
null
Здесь вы можете указать свою собственную функцию дезинфекции. Это может быть полезно, если вы предпочитаете использовать специальную библиотеку для выполнения очистки.
Атрибуты данных для отдельных всплывающих окон
Методы
$ (). Всплывающее окно (опции)
.popover ('показать')
shown.bs.popover
). Это считается "ручным" запуском всплывающего окна. Всплывающие окна, заголовок и содержимое которых имеют нулевую длину, никогда не отображаются.
$ ('# элемент'). Popover ('показать')
.popover ('скрыть')
hidden.bs.popover
). Это считается "ручным" запуском всплывающего окна.
$ ('# элемент').
Popover ('скрыть')
.popover ('переключить')
shown.bs.popover
или hidden.bs.popover
). Это считается "ручным" запуском всплывающего окна.
$ ('# элемент'). Popover ('переключение')
.popover ('уничтожить')
), не могут быть уничтожены индивидуально для дочерних триггерных элементов.
$ ('# element'). Popover ('destroy')
События
Тип события
Описание
show.
bs.popover
Это событие запускается немедленно при вызове метода экземпляра
Показано show
. .bs.popover
Это событие вызывается, когда всплывающее окно становится видимым для пользователя (ожидает завершения переходов CSS).
hide.bs.popover
Это событие запускается сразу после вызова метода экземпляра
hide
. hidden.bs.popover
Это событие вызывается, когда всплывающее окно перестает быть скрытым от пользователя (будет ожидать завершения переходов CSS).
вставлено.bs.popover
Это событие запускается после события
show.bs.popover
, когда шаблон всплывающего окна был добавлен в DOM.
$ ('# myPopover'). On ('hidden.bs.popover', function () {
// сделай что-нибудь…
})
Примеры предупреждений
.close
она должна быть первым дочерним элементом кнопки .alert-dismiss
, и перед ней в разметке не должно быть текстового содержимого. Ах да! У вас ошибка!
Использование
data-dismiss = "alert"
к кнопке закрытия, чтобы автоматически включить функцию закрытия предупреждения.Закрытие предупреждения удаляет его из DOM.
.
и fade
.in
. Методы
$ (). Alert ()
data-dismiss = "alert"
.(Не требуется при использовании автоматической инициализации data-api.)
$ (). Alert ('закрыть')
.fade
и .in
присутствуют в элементе, предупреждение исчезнет, прежде чем оно будет удалено. События
Плагин предупреждений
Тип события
Описание
закрыть.bs.alert
Это событие возникает сразу после вызова метода экземпляра
close
. closed.
bs.alert
Это событие вызывается, когда предупреждение закрывается (ожидает завершения переходов CSS).
$ ('# myAlert'). On ('closed.bs.alert', function () {
// сделай что-нибудь…
})
с сохранением состояния
data-loading-text = "Loading ..."
, чтобы использовать состояние загрузки для кнопки.
<сценарий>
$ ('# myButton'). on ('щелчок', function () {
var $ btn = $ (это) .button ('загрузка')
// бизнес-логика.
..
$ btn.button ('сбросить')
})
Одиночный переключатель
data-toggle = "button"
, чтобы активировать переключение на одной кнопке. Предварительно переключенным кнопкам необходимо
.active
и aria -olved = "true"
.active
и атрибут aria -hibited = "true"
к кнопке button
.
Флажок / Радио
data-toggle = "buttons"
в .btn-group
, содержащий флажки или радиовходы, позволяющие переключаться между соответствующими стилями. Требуется предварительно выбранные опции
.
активно
.active
к метке
входа. Состояние визуальной проверки обновляется только при нажатии
click
на кнопке (например,через
или установив свойство checked
для входа), вам нужно будет самостоятельно переключить класс .active
на метку
входа.
Методы
$ ().
кнопка ('переключение')
$ (). Кнопка ('сброс')
$ (). Кнопка (строка)
<сценарий>
$ ('# myStateButton'). on ('щелчок', function () {
$ (this) .button ('complete') // текст кнопки будет "готово!"
})
Зависимость плагина
Пример
.
скрывает содержимое свернуть
. Свертывание
применяется во время переходов .collapse.in
показывает содержимое href
или кнопку с атрибутом data-target
. В обоих случаях требуется data-toggle = "collapse"
.
Ссылка на href
..
Пример «Аккордеон»
3 wolf moon officia aute, бранч со скейтбордом без купидатата. Продовольственный грузовик квиноа nesciunt labourum eiusmod. Бранч 3 волк лунный темпор, загар аликва положи на него птицу кальмар, кофе одного происхождения nulla acceptnda shoreditch et.Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo. Леггинсы occaecat craft beer farm-to-table, необработанный деним, эстетичный синтезатор, о которых вы, вероятно, не слышали, accusamus labore, устойчивые VHS.
Объявление vegan excepteur butcher vice lomo. Леггинсы occaecat craft beer farm-to-table, необработанный деним, эстетичный синтезатор, о которых вы, вероятно, не слышали, accusamus labore, устойчивые VHS.
Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo. Леггинсы occaecat craft beer farm-to-table, необработанный деним, эстетичный синтезатор, о которых вы, вероятно, не слышали, accusamus labore, устойчивые VHS.
Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo. Леггинсы occaecat craft beer farm-to-table, необработанный деним, эстетичный синтезатор, о которых вы, вероятно, не слышали, accusamus labore, устойчивые VHS.
Nihil anim keffiyeh helvetica, крафтовый пивной труд уэс андерсон кредит несуант сапиенте еа проидент. Объявление vegan excepteur butcher vice lomo. Леггинсы occaecat craft beer farm-to-table, необработанный деним, эстетичный синтезатор, о которых вы, вероятно, не слышали, accusamus labore, устойчивые VHS.
.panel-body
s на .list-group
s.
Сделать доступными элементы управления разворачиванием / свертыванием
aria-extended
к элементу управления. Этот атрибут явно определяет текущее состояние сворачиваемого элемента для программ чтения с экрана и аналогичных вспомогательных технологий.Если складной элемент закрыт по умолчанию, он должен иметь значение aria-extended = "false"
. Если вы установили открываемый складной элемент по умолчанию с использованием класса
в
, вместо этого установите aria-extended = "true"
в элементе управления. Плагин автоматически переключает этот атрибут в зависимости от того, был ли открыт или закрыт складной элемент. data-target
указывает на селектор id
- вы можете добавить дополнительный атрибут aria-controls
к элементу управления, содержащий id
сворачиваемого элемента. Современные средства чтения с экрана и аналогичные вспомогательные технологии используют этот атрибут, чтобы предоставить пользователям дополнительные ярлыки для перехода непосредственно к самому складному элементу. Использование
.collapse
скрывает содержимое .
показывает содержимое collapse.in
.collapsing
добавляется при запуске перехода и удаляется при его завершении component-animations.less
. Через атрибуты данных
data-toggle = "collapse"
и data-target
к элементу, чтобы автоматически назначить управление сворачиваемым элементом.Атрибут data-target
принимает селектор CSS для применения коллапса. Обязательно добавьте к складному элементу класс collapse
. Если вы хотите, чтобы он был открыт по умолчанию, добавьте дополнительный класс в
. data-parent = "# selector"
. Обратитесь к демонстрации, чтобы увидеть это в действии. Через JavaScript
$ ('.
collapse '). collapse ()
Опции
data-
, как в data-parent = ""
.
Имя
тип
по умолчанию
описание
родитель
селектор
ложь
Если предусмотрен селектор, то все сворачиваемые элементы в указанном родительском элементе будут закрыты при отображении этого сворачиваемого элемента.(аналогично традиционному поведению аккордеона - это зависит от панели
класса
) переключатель
логическое
правда
Переключает сворачиваемый элемент при вызове
Методы
. Свернуть (опции)
Принимает необязательные параметры
, объект
.
$ ('# myCollapsible').крах({
toggle: false
})
.collapse ('переключение')
shown.bs.collapse
или hidden.bs.collapse
).
.collapse ('показать')
shown.bs.collapse
).
.collapse ('скрыть')
hidden.
). bs.collapse
События
Тип события
Описание
показать.bs.collapse
Это событие запускается немедленно при вызове метода экземпляра
show
. Показано .bs.collapse
Это событие вызывается, когда элемент свертывания становится видимым для пользователя (ожидает завершения переходов CSS).
hide.bs.collapse
Это событие запускается сразу после вызова метода
hide
.
скрыто.bs.collapse
Это событие вызывается, когда элемент сворачивания был скрыт от пользователя (будет ожидать завершения переходов CSS).
$ ('# myCollapsible').
On ('hidden.bs.collapse', function () {
// сделай что-нибудь…
})
Примеры
Проблема доступности
Если вам нужно соответствовать требованиям, рассмотрите другие варианты представления вашего контента.
Анимация перехода не поддерживается в Internet Explorer 8 и 9
Требуется начальный активный элемент
.Активный класс
необходимо добавить на один из слайдов. В противном случае карусель не будет видна. Глификоны не нужны
.glyphicon .glyphicon-chevron-left
и .glyphicon .glyphicon-chevron-right
не обязательно нужны для элементов управления. Bootstrap предоставляет .icon-prev
и .icon-next
как простые альтернативы Unicode.
Дополнительные подписи
.carousel-caption
в любом элементе .item
. Поместите туда практически любой необязательный HTML, и он будет автоматически выровнен и отформатирован.
Этикетка первого слайда
Этикетка второго слайда
Третья этикетка слайда
...
Использование
Несколько каруселей
id
на самом внешнем контейнере (.карусель
) для правильной работы элементов управления каруселью. При добавлении нескольких каруселей или при изменении идентификатора карусели
обязательно обновите соответствующие элементы управления. Через атрибуты данных
data-slide
принимает ключевые слова prev
или next
, которые изменяют положение слайда относительно его текущего положения. В качестве альтернативы используйте data-slide-to
, чтобы передать необработанный индекс слайда в карусель data-slide-to = "2"
, который сдвигает положение слайда на конкретный индекс, начиная с 0
.
data-ride = "carousel"
используется для обозначения карусели как анимированной, начиная с загрузки страницы. Не может использоваться в сочетании с (избыточной и ненужной) явной инициализацией JavaScript той же карусели. Через JavaScript
$ ('. Карусель'). Карусель ()
Опции
data-
, как в data-interval = ""
.
Имя
тип
по умолчанию
описание
интервал
номер
5000
Время задержки между автоматическим циклическим переключением элемента. Если false, карусель не будет автоматически повторяться.
пауза
строка | null
«парение»
Если установлено значение
"hover"
, приостанавливает цикл карусели на mouseenter
и возобновляет цикл карусели на mouseleave
.Если установлено значение null
, при наведении курсора на карусель она не приостанавливается. обертка
логическое
правда
Должна ли карусель двигаться непрерывно или иметь жесткие остановки.
клавиатура
логическое
правда
Должна ли карусель реагировать на события клавиатуры.
Методы
.карусель (опции)
и начинает циклический просмотр элементов.
$ ('.
Carousel'). Carousel ({
интервал: 2000
})
. Карусель ('цикл')
. Карусель ('пауза')
. Карусель (номер)
.carousel ('пред.')
. Карусель ('далее')
События
Класс карусели
направление
: направление, в котором движется карусель ( «влево»
или «вправо»
). relatedTarget
: элемент DOM, который вставляется на место в качестве активного элемента.
Тип события
Описание
слайд.б. карусель
Это событие запускается немедленно при вызове метода экземпляра
slide
. сдвинуто.bs.carousel
Это событие вызывается, когда карусель завершает переход между слайдами.
$ ('# myCarousel'). On ('slide.bs.carousel', function () {
// сделай что-нибудь…
})
Пример
: фиксированное;
вкл. И выкл., Имитируя эффект, обнаруженный с позицией : липкое;
. Поднавигация справа - это живая демонстрация плагина аффиксов.
Использование
В обоих случаях вы должны предоставить CSS для позиционирования и ширины вашего прикрепленного контента.
Позиционирование через CSS
.affix
, .affix-top
и .affix-bottom
.Вы должны предоставить стили, за исключением position: fixed;
на .affix
, чтобы эти классы самостоятельно (независимо от этого плагина) обрабатывали фактические позиции.
.affix-top
, чтобы указать, что элемент находится в самой верхней позиции. На этом этапе позиционирование CSS не требуется.
.affix
заменяет .affix-top
и устанавливает position: fixed;
(предоставляется CSS Bootstrap). .affix
на .affix-bottom
. Поскольку смещения являются необязательными, для их настройки необходимо установить соответствующий CSS. В этом случае добавьте position: absolute;
при необходимости. Плагин использует атрибут данных или параметр JavaScript, чтобы определить, где разместить элемент оттуда. Через атрибуты данных
data-spy = "affix"
к элементу, за которым вы хотите следить. Используйте смещения, чтобы определить, когда следует переключать закрепление элемента.
Через JavaScript
$ ('# myAffix').affix ({
компенсировать: {
верх: 100,
внизу: function () {
return (this.bottom = $ ('. footer'). outerHeight (true))
}
}
})
Опции
data-
, как в data-offset-top = "200"
.
Имя
тип
по умолчанию
описание
смещение
Номер | функция | объект
10
Пикселей для смещения от экрана при вычислении положения прокрутки.
Если указано одно число, смещение будет применяться как в верхнем, так и в нижнем направлениях. Чтобы обеспечить уникальное смещение снизу и сверху, просто укажите смещение объекта
: {top: 10}
или смещение: {top: 10, bottom: 5}
. Используйте функцию, когда вам нужно динамически вычислить смещение. цель
Селектор | узел | Элемент jQuery
окно
объект Задает целевой элемент аффикса.
Методы
. Крепление (опции)
, объект
.
$ ('# myAffix'). Affix ({
смещение: 15
})
.affix ('checkPosition')
.affix
, .affix-top
и .affix-bottom
классы добавляются или удаляются из прикрепленного содержимого в соответствии с новым состоянием. Этот метод необходимо вызывать всякий раз, когда изменяются размеры прикрепленного содержимого или целевого элемента, чтобы гарантировать правильное позиционирование прикрепленного содержимого.
$ ('# myAffix'). Affix ('checkPosition')
События
Плагин аффиксов
Тип события
Описание
аффикс.bs.affix
Это событие запускается непосредственно перед прикреплением элемента.
прикрепленный аффикс
Это событие вызывается после прикрепления элемента.
affix-top.bs.affix
Это событие возникает непосредственно перед прикреплением элемента вверху.
прикрепленный верхний аффикс
Это событие вызывается после того, как элемент был прикреплен сверху.
affix-bottom.bs.affix
Это событие запускается непосредственно перед прикреплением элемента снизу.
прикрепленное нижнее крепление
Это событие вызывается после того, как элемент был прикреплен снизу.
JavaScript на практике: создание динамических кнопок с помощью JavaScript, HTML и CSS
Обратите внимание, что вы должны иметь базовые знания HTML, прежде чем двигаться дальше. Вот несколько полезных ресурсов для изучения HTML и CSS, если вы этого не сделали:
Шаблоны и визуализированные коды
Базовый формат
в
и кода JavaScript в тегах
внутри вашего HTML тело
.
- это не тег, это как грамматика, которая отмечает, что это HTML5. и заканчиваются
->
. Эти комментарии не отображаются на веб-странице, но мы можем прочитать их, если просмотрим исходный код страницы. Для содержимого между тегами, которые содержат фактический код (например, стиль и сценарий ), мы заключаем комментарии между
/ *
и * /
. HTML, CSS и JavaScript в отдельных файлах
index.html
, style.css
и script.js
:
, где style.css
- это путь к файлу .css
в заголовке . (то есть между тегами
и
), мы говорим документу использовать таблицу стилей в том месте, на которое ссылается атрибут href
.
Имя
Borlabs Cookie
Провайдер
Владелец сайта
Назначение
Сохраняет предпочтения посетителей, выбранные в поле Cookie Borlabs Cookie.
Имя файла cookie
борлабс-печенье
Срок действия cookie
1 год
Имя
Полиланг
Провайдер
Владелец сайта
Назначение
Сохраняет текущий язык.