Child pages
  • Component Selectors

Documentation for a historical release of Infusion: 1.3
Please view the Infusion Documentation site for the latest documentation.
If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.

Skip to end of metadata
Go to start of metadata

This information is a work in progress. If you have any questions or comments, feel free to contact Anastasia Cheetham.

All Fluid components have a concept of the different 'parts' of the mark-up they are working with. For example, the Uploader has (among other things) an 'add files' button and a 'cancel' button; the Reorderer has items that are orderable; the Pager has a bar of links at the top (and possibly at the bottom); the Inline Edit has the text that is to be editable.

However, Fluid components are designed to be as "DOM-agnostic" as possible. That is, they try not to make assumptions or requirements when it comes to the particular mark-up. While the Inline Edit has the concept of the text that is to be editable, it doesn't require that the text be contained within a particular type of HTML element. Instead, it is designed to work with any element: p, span, div...

To support this DOM-agnosticism, Fluid components use selectors to identify the different 'parts' of a component. Each component understands its own list of applicable selectors. For example, the Reorderer has selectors for the movable items and for any grab handles on those items; the Uploader has a selector for the 'add files' button.

Each component defines its own defaults for the selectors that it understands - they are usually class names (for example, the default Reorderer movables selector is ".movables"). But implementors can override the defaults simply by informing the component of the selectors they would like to use. So for example, if you're using the Reorderer and all of your orderable items have an ID that starts with "ntb-", then you could override the default selector with "[fluid:id^='ntb-']".

Implementors can override the default selectors by creating a selectors object defining the selectors they want to use, and passing it to the component creator function as an option. So for the movables example described above, you might have

var mySelectors = {
    movables: "[id^='ntb-']"

var opts = {
    selectors: mySelectors

fluid.reorderList(myContainer, opts);

Notice in this example that only the movables selector was specified. Implementors are free to override only some of the default selectors. If nothing is specified for a given selector, the default will be used.

  • No labels