Plugin options

Some of the Frontfire UI plugins can be configured with options. These options can affect the appearance or behaviour of the plugin. The page about the plugin describes the options that are supported by the plugin. This page explains the different ways to specify them.

Any option that is not set through the methods described here has its default value (documented with the plugin). That default value may also be used for set invalid values in some cases.

Combined data-opt attribute

Set all options as a combined data-opt attribute on the HTML element that the plugin is applied to. This method can be used for explicit plugin use through JavaScript code or the autostart feature which is available as a CSS class for some plugins.

The content of the data-opt attribute uses a similar syntax as the style attribute, but with option names instead of style properties. Option names and values are separated by a colon (:) and different name-value entries are separated by a semicolon (;).

Name

Option names are case-sensitive but can be written in camelCase or dash-style.

Value

Values can be written directly, or quoted with double or single quotes. Backslash escape sequences (like \n, \x1A, \u12AB and \u{123ABC}) are only interpreted in quoted strings. Quoted strings also preserve leading and trailing white-space and allow the semicolon as content. Unquoted strings are interpreted following the same rules as explained for separate attributes below.

Example

These examples will set option1 as boolean true and secondOption as number 123.
<div … data-opt="option1: true; secondOption: 123">
<div … data-opt="option1: true; second-option: 123;">

These examples will set option1 as string “123” and option2 as string “abc”.
<div … data-opt="option1: '123'; option2: 'abc';">
<div … data-opt='option1: "123"; option2: abc;'>

This example will set message as string “A man's shoes; flying”.
<div … data-opt="message: 'A man\'s shoes; flying';">

Separate data-opt-… attributes

Set each option with a separate data-opt-… attribute on the HTML element that the plugin is applied to. This method can be used for explicit plugin use through JavaScript code or the autostart feature which is available as a CSS class for some plugins.

Options specified with this method override options set from the combined data-opt attribute.

Name

The case-sensitive option name is converted to dash-style as per the conversion rules of the data attributes.

Value

The content of the attribute is passed on to the options object. Internally, all attribute values are strings, but some interpretation is applied on these values:

• If a converter function was provided by the plugin for the option name, the string value is passed to that function and its return value is used for the options. The presence of such converters should be documented on the plugin page.
• Next, the strings “true” and “false” are converted to the corresponding boolean values. No white-space or spelling or casing variations are accepted.
• Next, anything that looks like a fully written decimal number (e.g. 2, 23.0, -345.6, 0.07) is converted to a number. A leading minus sign is allowed for negative numbers. The decimal separator is a point. If a decimal separator is used, a digit must occur before and after it. No white-space or other number formats are accepted.
• Finally, anything else is left as the string that was specified in the attribute.

Example

This example will set option1 as boolean true and secondOption as number 123.
<div … data-opt-option1="true" data-opt-second-option="123">

Object for the options parameter

Pass all options as an object to the options parameter of the plugin create function. This method can only be used when explicitly using the plugin through JavaScript code.

Options specified with this method have the highest priority and override all options set from other methods. Only the options that are defined in this object will override other options.

Name

Option names are case-sensitive.

Example

This example will set option1 as boolean true and secondOption as number 123, which should be obvious.
F("#id").myPlugin({ option1: true, secondOption: 123 });