...
Section |
---|
Column |
---|
Excerpt |
---|
Decorators allow users of the Renderer to attach various things, such as functions, class names, etc., to the components at render time. A number of different types of decorators are currently supported. |
Using DecoratorsTo use a decorator, include it in the component tree for the component in question, using the decorators field. This field contains an array of objects providing configuration information for the desired decorators. The contents of each object will vary based on the decorator type. For example, the addClass decorator will specify a string of class names, the jQuery decorator will specify a function name and a list of parameters. Decorators are specified using a notation similar to that of Subcomponents in an options structure. They include a type field and whatever other fields are necessary, based on the type: Code Block |
---|
|
{
ID: "my-id",
value: aValue,
decorators: [
{type: "typeName",
field: value,
field: value
}
]
}
|
|
Column |
---|
| Panel |
---|
borderColor | #566b30 |
---|
bgColor | #fff |
---|
titleBGColor | #D3E3C4 |
---|
borderStyle | solid |
---|
title | On This Page | borderStyle
---|
| | solid |
Panel |
---|
borderColor | #321137 |
---|
bgColor | #fff |
---|
titleBGColor | #c1b7c3 |
---|
borderStyle | solid |
---|
title | See Also | borderStyle | solid |
---|
| |
Panel |
---|
borderColor | #321137 |
---|
bgColor | #fff |
---|
titleBGColor | #cccccc |
---|
borderStyle | solid |
---|
title | Still need help? |
---|
borderStyle | solid |
---|
| Join the fluid-talk mailing list and ask your questions there. |
|
|
...
The following table provides an overview of the currently-supported decorators. The sections that follow discuss each decorator in turn.
Wiki Markup |
{style} Style |
---|
/* copied from Confluence main-actions.css */
.mytable, .mytable td, .mytable th {
border:1px solid #CCCCCC;
padding:3px 4px;
vertical-align:top;
border-collapse: collapse;
}
.mytable th {
background-color: #eee;
}
.duckrow {
background-color: #f6f6f6;
}
{style} |
...
...
...
...
jQuery decorator
Perhaps the most frequently used decorator is the jQuery decorator. This will accept any jQuery function and its arguments, and invoke that function, as the rendered markup is placed into the document. Here is an example of specifying a UILink component together with a jQuery-bound click()
handler:
...