Fork me on GitHub

jQuery jPList plugin is deprecated. Please check pure JavaScript (ES6) jPList Library alternative instead.

Checkbox Dropdown Control Settings

Checkbox Dropdown Control

Control Settings:

Data Attribute Description Values Example
data-path jQuery path to the items to filter jQuery path data-path=".architecture"
data-no-selected-text the text that appears when no checkbox is selected text value; the following wildcards could be used:
{selected} - select items separated by comma
{num} - the number of selected items
data-no-selected-text="Filter by category:"
data-one-item-text the text that appears when only one checkbox is selected text value; the following wildcards could be used:
{selected} - selected items separated by comma
{num} - the number of selected items
data-one-item-text="Filtered by {selected}"
data-many-items-text the text that appears when more than one checkbox is selected text value; the following wildcards could be used:
{selected} - selected items separated by comma
{num} - the number of selected items
data-many-items-text="{num} selected"

General Settings:

Data Attribute Description Values Example
data-control-type="checkbox-dropdown" panel control type definition 'checkbox-dropdown' data-control-type="checkbox-dropdown"
data-control-name="name" panel control name; it should be the same in the top and bottom panels string value data-control-name="category-checkbox-dropdown"
data-control-action="filter" panel control action definition 'filter' data-control-action="filter"
data-control-storage="false" exclude control from storage (when cookies/localstorage is enabled) 'true' ot 'false' data-control-storage="false"
data-control-deep-link="false" exclude control from deep link (when deep linking is enabled) 'true' ot 'false' data-control-deep-link="false"
data-control-animation="false" exclude control from animation effects 'true' ot 'false' data-control-animation="false"
data-control-animate-to-top="false" perform "animate to top" effect for the given control; as a rule, used in bottom panel 'true' ot 'false' data-control-animate-to-top="false"