| Warning |
|---|
DRAFT, still incomplete |
| Div |
|---|
| style | max-width: 30%; |
|---|
| class | floatRight |
|---|
|
|
...
It is expected that composite panels will be quite simple in most cases, functioning strictly as a container for subpanels. It may contain some labels that All they typically need is are any selectors and prototrees needed for a label, or heading, or anything general to the entire composite panel.
Subpanels are defined with the regular the fluid.prefs.panel grade, the same grade used for defining regular panels.
| Code Block |
|---|
|
fluid.defaults("my.panels.subanel", {
gradeNames: ["fluid.prefs.panel |
...
Composite Panel Definition
...
In the code block above, the panels list on line 7 is an array of string subpanel names used as names. These are derived from the keys in the auxiliary schema to define the subpanelsthat associate panels with preferences.
Templates
A composite panel and its subpanels each have their own HTML template. The composite panel template must contain elements that will serve as a container containers for the subpanels.
Auxiliary Schema Declarations
...
| Section |
|---|
| Column |
|---|
Composite panel HTML template: | Code Block |
|---|
| <div class="my-composite-panel">
<div class="subpanel-1-container"></div>
<div class="subpanel-12-container"></div>
</div> |
|
| Column |
|---|
Auxiliary schema section defining panels: | Code Block |
|---|
| preference1: {
"type": "fluid.prefs.preference1",
"panel": {
"type": "fluid.prefs.panel.subpanel1",
// Reference to the selector defined in the composite panel template for subpanel1
"container": ".subpanel-1-container",
"template": "%prefix/subpanel1.html",
"message": "%prefix/subpanel1.json"
}
},
preference2: {
"type": "fluid.prefs.preference2",
"panel": {
"type": "fluid.prefs.panel.subpanel2",
// Reference to the selector defined in the composite panel template for this subpanel2
"container": ".subpanel-2-container",
"template": "%prefix/subpanel2.html",
"message": "%prefix/subpanel2.json"
}
},
groups: {
composite1: {
"container": ".my-composite-1",
"template": "%prefix/composite1.html",
"message": "%prefix/composite1.json",
"type": "fluid.prefs.panel.composite1",
"panels": ["preference1", "preference2"]
}
} |
|
|
...