Description
The autoCheck widget makes it simple to select checkboxes of a certain type on a page. This is useful for moderation tools, for example - simply by specifying a filter, topics that match that filter can be selected.
Note: The autoCheck widget works in conjunction with the ips.ui.menu widget. It will not work on other kinds of elements.
Example
@todo
Usage
The widget itself is initialized on the menu trigger element:
<!-- The trigger --> <a href='#elMyMenu_menu' id='elMyMenu' data-ipsMenu data-ipsAutoCheck data-ipsAutoCheck-context='#elContext'> Open Menu </a>
Each menu option then receives the special data attribute data-ipsMenuValue (as described in the menu widget documentation) which contains the filter type that the option will check:
<li class='ipsMenu_item' data-ipsMenuValue='unapproved'> <a href='...'>Has Unapproved</a> </li>
And finally, each checkbox within the context element (see options below) can receive another special data attribute data-state, to indicate which filters it matches:
<input type='checkbox' data-state='unread unapproved'>
Multiple filter values are simply separated by a space.
Options
context
(Selector; required)
A CSS selector which indicates the wrapper element that contains all of the checkboxes which will be checked for filter matches. For example, if a Data List structure is used, this option might be set to the ID of the root list element.
Events
Events are emitted on the menu trigger element.
autoChecked
Triggered when the user selects an option that has a data-ipsMenuValue attribute.
Event data:
-
menu
Reference to the menu trigger element -
currentFilter
The filter that has been selected -
count
The number of checkboxes that matched
Report Guide