Buttons Path Filter Control

This control works like checkbox or radio button but has a button layout. It's used to filter content that contains / doesn't contain the specified CSS selector.

HTML Structure

Buttons path filter control is defined by required data-jplist-control="buttons-path-filter" data attribute. The data-group attribute defines group of elements that should be filtered. The full list of data attributes can be found here.

See the Pen jPList Buttons Path Filter Control by 1rosehip (@1rosehip) on CodePen.

Radio Buttons Mode

In radio mode all buttons should have the same name or data-name attribute. Also data-mode attribute should be radio.

<!-- jplist styles - should not be added if bootstrap or other CSS framework is used -->
<link href="jplist.styles.css" rel="stylesheet" type="text/css" />

<!-- filter all items that have .title class -->
<button
        type="button"
        data-jplist-control="buttons-path-filter"
        data-path=".title"
        data-group="group1"
        data-mode="radio"
        data-selected="true"
        data-name="filter-1">
    Items with .title class
</button>

<!-- filter all items that have .likes class -->
<button
        type="button"
        data-jplist-control="buttons-path-filter"
        data-path=".likes"
        data-group="group1"
        data-mode="radio"
        data-name="filter-1">
    Items with .likes class
</button>

<!-- content to filter -->
<div data-jplist-group="group1">

    <!-- item -->
    <div data-jplist-item>
        <div class="title">Title value 1</div>
        ....
    </div>

    <!-- item -->
    <div data-jplist-item>
        <div class="likes">Title value 1</div>
        ....
    </div>

    <!-- item -->
    <div data-jplist-item>
        <div class="title">Title value 1</div>
        ....
    </div>

</div>

<!-- jplist library -->
<script src="jplist.min.js"></script>
<script>
    jplist.init();
</script>

Checkbox Mode

In checkbox mode all buttons should have data-mode="checkbox" attribute.

<!-- jplist styles - should not be added if bootstrap or other CSS framework is used -->
<link href="jplist.styles.css" rel="stylesheet" type="text/css" />

<!-- filter all items that have .title class -->
<button
        type="button"
        data-jplist-control="buttons-path-filter"
        data-path=".title"
        data-group="group1"
        data-selected="true"
        data-mode="checkbox">
    Items with .title class
</button>

 <!-- filter all items that have .likes class -->
<button
        type="button"
        data-jplist-control="buttons-path-filter"
        data-path=".likes"
        data-group="group1"
        data-mode="checkbox">
    Items with .likes class
</button>

<!-- content to filter -->
<div data-jplist-group="group1">

    <!-- item -->
    <div data-jplist-item>
        <div class="title">Title value 1</div>
        ....
    </div>

    <!-- item -->
    <div data-jplist-item>
        <div class="likes">Title value 1</div>
        ....
    </div>

    <!-- item -->
    <div data-jplist-item>
        <div class="title">Title value 1</div>
        ....
    </div>

</div>

<!-- jplist library -->
<script src="jplist.min.js"></script>
<script>
    jplist.init();
</script>

Inverted Filter

It's possible to find all items that don't contain the specified CSS selector using data-inverted="true" attribute:

<!-- find all items that don't have .title class -->
<button
        type="button"
        data-jplist-control="buttons-path-filter"
        data-path=".title"
        data-inverted="true"
        data-group="group1"
        data-selected="true"
        data-mode="checkbox">
    Items with .title class
</button>

Top and bottom panels

Button path filter controls can be placed in both top and bottom panels for the better user experience. In this case data-name attribute with the same value should be added to all controls. All other data attributes should also have the same values:

<!-- TOP PANEL CONTROLS -->

<!-- filter all items that have .title class -->
<button
        type="button"
        data-jplist-control="buttons-path-filter"
        data-path=".title"
        data-group="group1"
        data-mode="radio"
        data-selected="true"
        data-name="filter-1">
    Items with .title class
</button>

<!-- filter all items that have .likes class -->
<button
        type="button"
        data-jplist-control="buttons-path-filter"
        data-path=".likes"
        data-group="group1"
        data-mode="radio"
        data-name="filter-1">
    Items with .likes class
</button>
                
<!-- content to filter -->
<div data-jplist-group="group1">

    <!-- item -->
    <div data-jplist-item>
        <div class="title">Title value 1</div>
        ....
    </div>

    <!-- item -->
    <div data-jplist-item>
        <div class="title">Title value 1</div>
        ....
    </div>

    <!-- item -->
    <div data-jplist-item>
        <div class="title">Title value 1</div>
        ....
    </div>

</div>

<!-- BOTTOM PANEL CONTROLS -->
<!-- filter all items that have .title class -->
<button
        type="button"
        data-jplist-control="buttons-path-filter"
        data-path=".title"
        data-group="group1"
        data-mode="radio"
        data-selected="true"
        data-name="filter-1">
    Items with .title class
</button>

<!-- filter all items that have .likes class -->
<button
        type="button"
        data-jplist-control="buttons-path-filter"
        data-path=".likes"
        data-group="group1"
        data-mode="radio"
        data-name="filter-1">
    Items with .likes class
</button>

Jump to top

data-jump data attribute can be used to scroll page to the specified location when user clicks a button. data-jump="top" scrolls page to the top. Any CSS selector can be used instead of top keyword.

<!-- filter all items that have .title class -->
<button
        type="button"
        data-jplist-control="buttons-path-filter"
        data-path=".title"
        data-group="group1"
        data-mode="radio"
        data-jump="top"
        data-name="filter-1">
    Items with .title class
</button>

Deep Linking

Deep links can be used to keep user selections and control states after the page refresh. To implement them data-id attribute should be added to HTML structure and deepLinking setting should be true in jPList parameters.

<!-- jplist styles - should not be added if bootstrap or other CSS framework is used -->
<link href="jplist.styles.css" rel="stylesheet" type="text/css" />

<!-- filter all items that have .title class -->
<button
        type="button"
        data-jplist-control="buttons-path-filter"
        data-path=".title"
        data-group="group1"
        data-mode="radio"
        data-selected="true"
        data-id="title"
        data-name="filter-1">
    Items with .title class
</button>

<!-- filter all items that have .likes class -->
<button
        type="button"
        data-jplist-control="buttons-path-filter"
        data-path=".likes"
        data-group="group1"
        data-mode="radio"
        data-id="likes"
        data-name="filter-1">
    Items with .likes class
</button>

<!-- content to filter -->
<div data-jplist-group="group1">

    <!-- item -->
    <div data-jplist-item>
        <div class="title">Title value 1</div>
        ....
    </div>

    <!-- item -->
    <div data-jplist-item>
        <div class="likes">Title value 1</div>
        ....
    </div>

    <!-- item -->
    <div data-jplist-item>
        <div class="title">Title value 1</div>
        ....
    </div>

</div>

<!-- jplist library -->
<script src="jplist.min.js"></script>
<script>
    jplist.init({
        deepLinking: true
    });
</script>

Storage

Local storage, session storage or cookies can be used to keep user selections and control states after the page refresh. To implement them data-id attribute should be added to HTML structure and storage setting should be passed to jPList constructor.

<!-- jplist styles - should not be added if bootstrap or other CSS framework is used -->
<link href="jplist.styles.css" rel="stylesheet" type="text/css" />

<!-- filter all items that have .title class -->
<button
        type="button"
        data-jplist-control="buttons-path-filter"
        data-path=".title"
        data-group="group1"
        data-mode="radio"
        data-selected="true"
        data-id="title"
        data-name="filter-1">
    Items with .title class
</button>

<!-- filter all items that have .likes class -->
<button
        type="button"
        data-jplist-control="buttons-path-filter"
        data-path=".likes"
        data-group="group1"
        data-mode="radio"
        data-id="likes"
        data-name="filter-1">
    Items with .likes class
</button>

<!-- content to filter -->
<div data-jplist-group="group1">

    <!-- item -->
    <div data-jplist-item>
        <div class="title">Title value 1</div>
        ....
    </div>

    <!-- item -->
    <div data-jplist-item>
        <div class="likes">Title value 1</div>
        ....
    </div>

    <!-- item -->
    <div data-jplist-item>
        <div class="title">Title value 1</div>
        ....
    </div>

</div>

<!-- jplist library -->
<script src="jplist.min.js"></script>
<script>
    jplist.init({
        storage: 'localStorage', //'localStorage', 'sessionStorage' or 'cookies'
        storageName: 'jplist'
    });
</script>

Data Attributes

The full list of control data attributes.

Name	Description	Values
`data-jplist-control`	Defines buttons path filter control.	"buttons-path-filter"
`data-group`	Defines group of items that should be filtered. For example, if a control has data-group="group1" then items group should have data-jplist-group="group1" data attribute.	any text value
`data-path`	CSS selector that defines the HTML element that should be filtered	"default" keyword for the initial value or any CSS selector
`data-mode`	Defines filter behaviour.	"radio" (the default) or "checkbox"
`data-selected`	Defines if a button is selected.	"true" or "false"
`data-name`	The data-name attribute is used to identify the same controls in different panels or the group of buttons in radio mode. Different controls should have different data-name attributes. By default, data-name attribute has default value.	any text value
`data-jump`	This data attribute can be used to scroll page to the specified location when user selects an option. data-jump="top" scrolls page to the top. Any CSS selector can be used instead of top keyword.	top keyword or any CSS selector
`data-id`	This attribute is used for deep linking.	any text value that may contain letters, digits, underscores or dashes
`data-or`	Defines a group of controls that should be filtered though the "OR" logic	any text value, for example data-or="bags"
`data-inverted`	If true, it's used to find all items that are not contained in the specified path.	true or false