CSS Policy toggler
A XBL binding is available to add a CSS policy toggler to your dialogs. It provides the user with the following choice:
- set HTML attributes only
- set CSS inline styles when possible
- set CSS style rules or inline styles when possible
- reuse existing styles rules
You must add the following stylesheet to your XUL dialog:
<?xml-stylesheet href="chrome://bluegriffon/skin/bluegriffonDialogs.css"
type="text/css"?>
Then insert the <csstoggler>
element in the XUL
markup of your dialog. This element can have children, they will be
displayed only in the cases 2 and 3 of the available CSS policies above.
The <csstoggler>
element can hold the controls
attribute. The value of that attribute is a comma-separated list of IDs
in the dialog. When the CSS policy disables the OK button of the
dialog, the corresponding elements will be disabled too.
Example taken from the Table Insertion dialog (chrome://bluegriffon/content/dialogs/insertTable.xul):
<csstoggler id="cssToggler"
controls="sizeSelector">
<groupbox orient="vertical">
<caption label="&cssExtras.label;"/>
<checkbox id="collapseBorders"
label="&collapseBorders.label;"/>
<checkbox id="hideEmptyCells"
label="&hideEmptyCells.label;"/>
<checkbox id="fixedLayout"
label="&fixedLayout.label;"/>
</groupbox>
</csstoggler>
Initialization
The <csstoggler> binding must be initialized
through its init() method.
Properties
cssPolicy |
integer |
|
| newID newClass |
strings | if cssPolicy is equal to 3, these properties hold the ID and class the user typed in the dialog |
| reusedID reusedClass |
strings | if cssPolicy is equal to 4, these properties hold the ID and class the user chose in the dialog |
Visual example from the Table Insertion dialog:




Published on Friday, October 17 2008 by BlueGriffon




