Document DOM events
This closes https://github.com/select2/select2/pull/4115.
This commit is contained in:
parent
7f8e9dc62a
commit
37dbe059fc
@ -7,7 +7,38 @@
|
||||
What events will Select2 trigger?
|
||||
</h3>
|
||||
|
||||
{% include options/not-written.html %}
|
||||
<p>
|
||||
Select2 will trigger a few different events when different actions are taken using the component, allowing you to add custom hooks and perform actions.
|
||||
</p>
|
||||
|
||||
<dl class="s2-docs-panels">
|
||||
<dt>change</dt>
|
||||
<dd>Triggered whenever an option is selected or removed.</dd>
|
||||
|
||||
<dt>select2:close</dt>
|
||||
<dd>Triggered whenever the dropdown is closed.</dd>
|
||||
|
||||
<dt>select2:closing</dt>
|
||||
<dd>Triggered before the dropdown is closed. This event can be prevented.</dd>
|
||||
|
||||
<dt>select2:open</dt>
|
||||
<dd>Triggered whenever the dropdown is opened.</dd>
|
||||
|
||||
<dt>select2:opening</dt>
|
||||
<dd>Triggered before the dropdown is opened. This event can be prevented.</dd>
|
||||
|
||||
<dt>select2:select</dt>
|
||||
<dd>Triggered whenever a result is selected.</dd>
|
||||
|
||||
<dt>select2:selecting</dt>
|
||||
<dd>Triggered before a result is selected. This event can be prevented.</dd>
|
||||
|
||||
<dt>select2:unselect</dt>
|
||||
<dd>Triggered whenever a selection is removed.</dd>
|
||||
|
||||
<dt>select2:unselecting</dt>
|
||||
<dd>Triggered before a selection is removed. This event can be prevented.</dd>
|
||||
</dl>
|
||||
|
||||
<h3>
|
||||
How can I attach listeners for these events?
|
||||
|
24
docs/_sass/_dl-panels.scss
Normal file
24
docs/_sass/_dl-panels.scss
Normal file
@ -0,0 +1,24 @@
|
||||
.s2-docs-panels {
|
||||
dt, dd {
|
||||
border: 1px solid $panel-default-border;
|
||||
}
|
||||
|
||||
dt {
|
||||
background-color: $panel-default-heading-bg;
|
||||
border-top-left-radius: $panel-border-radius;
|
||||
border-top-right-radius: $panel-border-radius;
|
||||
padding: 5px 7.5px;
|
||||
}
|
||||
|
||||
dd {
|
||||
background-color: $panel-bg;
|
||||
border-bottom-left-radius: $panel-border-radius;
|
||||
border-bottom-right-radius: $panel-border-radius;
|
||||
margin-bottom: 0.75em;
|
||||
padding: 7.5px;
|
||||
}
|
||||
|
||||
dt + dd {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
@ -1,6 +1,8 @@
|
||||
---
|
||||
---
|
||||
|
||||
@import "vendor/bootstrap/variables";
|
||||
|
||||
@import "result-repository";
|
||||
@import "sidenav";
|
||||
@import "hamburger";
|
||||
@ -19,3 +21,4 @@
|
||||
@import "prettify";
|
||||
@import "syntax-highlighting";
|
||||
@import "typography";
|
||||
@import "dl-panels";
|
Loading…
x
Reference in New Issue
Block a user