Example
AخA
<button class="aui-button" data-aui-trigger aria-controls="inline-dialog-example">
Click me
</button>
<aui-inline-dialog id="inline-dialog-example">
<p>Lorem ipsum.</p>
</aui-inline-dialog>
The trigger is a generic interactive element, which matches the ID specified in the <aria-controls>
Associate a button that acts as the inline dialog's trigger
(aui-trigger attribute
) to the
inline dialog (<aui-inline-dialog>
aria-controls
attribute to the id
of the inline dialog.
<button class="aui-button" data-aui-trigger aria-controls="inline-dialog-example">
Click me
</button>
<aui-inline-dialog id="inline-dialog-example">
<p>Lorem ipsum.</p>
</aui-inline-dialog>
To receive messages from an aui trigger add a message
function. The trigger will respond to the following events:
var trigger = document.querySelector('[data-aui-trigger]');
var enablingButton = document.querySelector('#enabling-button');
var messageDiv = document.querySelector('#message-box');
var messageHandler = function(message) {
if(message.type === 'mouseenter') {
this.innerHTML = 'Hovering!';
}
else if (message.type === 'mouseleave') {
this.innerHTML = 'Not hovering';
}
//ignore focus, blur and click
};
var toggleEnabled = function() {
if(trigger.isEnabled()) {
trigger.disable();
messageDiv.innerHTML = 'Trigger disabled';
this.innerHTML = 'Enable Trigger';
}
else {
trigger.enable();
messageDiv.innerHTML = 'Trigger enabled';
this.innerHTML = 'Disable Trigger';
}
};
//.message will receive messages from our trigger
messageDiv.message = messageHandler;
enablingButton.addEventListener("click", toggleEnabled);
Function | Arguments | Description | Example Usage |
---|---|---|---|
disable | Disables the trigger. |
trigger.disable(); |
|
enabled | Enables the trigger. |
trigger.enabled(); |
|
isEnabled | Checks whether the trigger is enabled. |
trigger.isEnabled(); |