Shortcodes /
April 4, 2017
Dial (Knobs)
Shortcode Formats
The following format example can be invoked manually outside the VisualComposer to generate the element.
Note : Wordpress doesn't allow new line inside the shortcode, you must remove all new lines and replace them with space when using the shortcode.
[jqknob width="xxxpx" displayinput="true|false" value="numeric" cursor="true|gauge" thickness="0.x" fgcolor="#xxxxxx" displayprevious="true|false" angleoffset="0 - 360" linecap="butt|round" anglearc="0 - 360" step="numeric" min="numeric" max="numeric" readonly="true|false" inputcolor="text color" ]
Shortcodes Attributes
The shortcode above will accepts the following attributes.
Attributes | Valid Value | Description |
---|---|---|
width | numeric plus px eg. 100px | the total width of the knob element in pixels |
displayInput | true or false | display or hide the input elements |
value | numeric | the actual value for the dial |
cursor | numeric or string "gauge" | display mode "cursor", cursor size could be changed passing a numeric value to the option, default width is used when passing boolean value "true" | default=gauge. |
thickness | 0.1 - 1 | the dial thickness as 1 is the thickest and 0.1 is the thinnest |
fgcolor | CSS Hex color value | the dial color |
displayprevious | true or false | display the previous value, only applicable if read only is set to false |
angleoffset | 0 - 360 | starting angle in degrees | default=0. |
linecap | butt or round | gauge stroke endings. |
anglearc | 0 - 360 | arc size in degrees | default=360 |
step | numeric | step size |
max | numeric | maximum value |
min | numeric | minimum value |
readonly | true or false | disable changing value |
id | valid css id | optional css id |
class | valid css class multiple classes can be separated by space or comma | optional css class |