A simple example of an inline dialog:
The AUI Dialog should be used for the following scenarios:
- When you want to show extended information about an object that helps the user understand more about that object's state or expose additional actions for the object.
- If you have a space-constricted area and it's good to provide expansion of the object above the page, rather than within the page.
do NOT use Dialog for these situations:
- When your user action is primary and needs to be easily discoverable. A menu hides functionality until it is clicked.
NOTE: These are the recommended use-cases, if you have others that you feel requires a dialog please be sure to consider all other options before doing so.
This HTML Code uses a hyperlink, however InlineDialog can be applied to any other element types as long as it has an ID.
id="inlineDialog". Clicking this trigger element displays a container element with
id="inline-dialog-myDialog" and sets its
innerHTML value to the content fetched from "dialog-content.html".
NOTE: "content.html" could have something like the following HTML:
You just need the fragment, not a whole document.
You don't have to have a separate file; you can inject content directly:
Primary Instantiation Function
AUI Inline Dialog uses a function to attach and inline-dialog to a DOM element.
items - The elements that will trigger the inline-dialog, use a jQuery Selector to select items.
identifier - A unique identifier for the inline-dialog.
url - The URL of the dialog contents
options - A number of different options may be passed in as an associative array, options explained below.
- If no options are changed the Inline Dialog will be default display below the trigger aligned to the left of the trigger.
- If the dialog is drawn offscreen to the right it will be re-positioned such that it is on-screen.
- If the dialog is drawn off-screen to the bottom it will be displayed above the trigger with the arrow flipped.
- In all cases the arrow will be drawn in the middle of the trigger.
Passing a function instead of a URL String
You can pass a function into the url parameter of inlineDialog instead of a url string. Your function must be:
- Contents is the div element that will contain your custom content
- trigger is the element of your dialog trigger
- showPopup is the function from within InlineDialog that shows the popup (your function should call this at the end)
This function will override the contents loading section in Inline-Dialog.
To pass options into the InlineDialog function you must use an associative array:
Below is a table of options, possible values and examples of usage:
determines whether the inline-Dialog will show on a mouseOver or mouseClick of the trigger.
determines if the inline-Dialog will bind the event-handler to the trigger event, use this option if you wish to bind the event handler programatically at a different point.
determines the fade in and fade out duration of the dialog in milliseconds.
determines how long (in milliseconds) the inline-dialog will stay visible for until it is hidden (if no other trigger for hiding the dialog is fired) if null is passed auto-hide is disabled for this inline-Dialog
determines how long in milliseconds after a show trigger is fired (such as a trigger click) until the dialog is shown.
Sets how wide the inline-dialog is in pixels.
Sets an offset distance of the inline-dialog from the trigger element along the x-axis in pixels
Sets an offset distance of the inline-dialog from the trigger element along the y-axis in pixels
The element in which the dialog itself will be appended.
determines if the contents of the dialog are cached. If set to false the contents will be reloaded everytime the dialog is shown.
a function that will be called after the popup has faded out.
a function that will be called after the popup contents have been loaded
determines if the dialog should be shown relative to where the mouse is at the time of the event trigger (normally a click) if set to false the dialog will show aligned to the left of the trigger with the arrow showing at the center.
determines if all other dialogs on the screen are closed when this one is opened
a function that determines how the content retrieval response is handled, the default assumes that the data returned is html. The implemented function must handle the three variables: data, status, xhr and at the end return html
determines if the dialog should be shown above the trigger or not. If this option is true but there is insufficient room above the trigger the inline-dialog will be flipped to display below it.
AUI supports jQuery live events. If you choose this option, AUI will bind all events on the page to the HTML body element instead of to each individual element. This means that your events can be bound to all current elements and to elements that do not yet exist. You no longer need to rebind everything on an Ajax load. This is essential on a page which has, for example, a number of user avatars that react on hover. Binding can cause a performance problem when there is a large number of such elements.
Instructs the InlineDialog on rendering the shadow.
Returns a string representation of an SVG path that will represent the arrow being drawn. This function takes one argument, positions which is the return value of the calculatePositions method.
Returns an object which has attributes to be applied to the arrow svg element.
Instructs the InlineDialog to add the 'active' class.
Allows the consumer of InlineDialog to manually determine or calculate the position that the InlineDialog should be drawn at.
|arrowOffsetX||As of 5.0; arrowOffsetX defines an X axis offset in pixels for placement of the arrow (default is zero).|
|persistent||As of 5.1: if persistent: true the inline dialog can only be dismissed programatically by calling .hide(). This option, ignores the 'closeOthers' option. (inline-dialogs with closeOthers set to true will not close this one) and the hideDelay option.|
The options should be properties on an object in the fourth parameter:
Here is a list of functions that can be called on the DOM object returned by the Inline Dialog constructer. You can call these by assigning the constructor to a DOM object such as:
after that you can call them directly from the object (as per the table below)
shows the inline-dialog
hides the inline-dialog
redraws the inline-dialog. Use this function when you need to add contents to the inline dialog and you need it to be redrawn after your contents are inserted