Page options

(Since v.2.4.1)

In order to make page options works, add these files. assets/css/rdta/components/rdta-page-options.css, assets/js/rdta/components/rdta-page-options.js

Start by use the HTML elements as shown below.

Source

<div class="rd-page-options-container">
    <div class="rd-page-options-buttons-row">
        <button class="rd-button small rd-page-options-button" type="button" aria-controls="rd-page-options-wrap" aria-expanded="false">
            <i class="fa-solid fa-sliders"></i> Page Options
        </button>
        <button class="rd-button small rd-page-options-button" type="button" aria-controls="rd-page-options-help-wrap" aria-expanded="false">
            <i class="fa-solid fa-question"></i> Help
        </button>
    </div><!--.rd-page-options-buttons-row-->
    <div class="rd-page-options-contents-row">
        <div id="rd-page-options-wrap" aria-label="Page Options">
            ...
        </div>
        <div id="rd-page-options-help-wrap" aria-label="Help">
            ...
        </div>
    </div><!--.rd-page-options-contents-row-->
</div>

Copy the HTML above and paste them before the element that contain class .rd-page-content.

Source

<div class="rd-page-options-container">
    ...
</div>
<div class="rd-page-content">
    <!-- Yout admin page start here. -->
</div>

Then enable its functional.

Source

document.addEventListener('DOMContentLoaded', function() {
    RDTAPageOptions.init();
});

Events

RDTA page options have few events for hooking.

Event type	Description
rdta.pageoptions.opened	This event is fired when page option was completely opened. This means after other page option was closed except currently active.
rdta.pageoptions.closed	This event is fired when page option was closed.
rdta.pageoptions.closed.other	This event is fired when other page options was closed except the active one.

The sample events will be show below this line. Open browser console to see more details.