Jump to content

Guides

ips.ui.autoCheck

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


×