Layout Control

Layout control allows to change wrapper class on button click.

See the Pen jPList Layout Control by 1rosehip (@1rosehip) on CodePen.

HTML Structure

Layout control is defined by required data-jplist-control="layout" data attribute. The data-class attribute contains a class name that will be added to the group container on button click: 

<button
        data-jplist-control="layout"
        type="button"
        data-class="jplist-list"
        data-group="group1"
        data-name="name1">List</button>

<button
        type="button"
        data-jplist-control="layout"
        data-class="jplist-grid"
        data-group="group1"
        data-name="name1"
        data-selected="true">Grid</button>

<button
        type="button"
        data-jplist-control="layout"
        data-class="jplist-thumb"
        data-group="group1"
        data-name="name1">Thumb</button>

<!-- content to sort -->
<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>

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

Data Attributes

The full list of control data attributes.

Name Description Values
data-jplist-control Defines layout control. "layout"
data-group Defines group of items that should be influenced. For example, if a control has data-group="group1" then items group should have data-jplist-group="group1" data attribute. any text value
data-class Defines a class name that should be added to the group container on button click CSS class name without the dot
data-name The data-name attribute is used to identify the same controls in different panels. Different controls should have different data-name attributes. By default, data-name attribute has default value. any text value
data-selected Defines if a button is selected. "true" or "false"