Component Selectors

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);