JavaScript Events

Последнее обновление not available | История страницы | Улучшить эту страницу | Сообщить о проблеме

Support the team building MODX with a monthly donation.

The budget raised through OpenCollective is transparent, including payouts, and any contributor can apply to be paid for their work on MODX.

Backers

Budget

$204 per month—let's make that $500!

Learn more

FredElementDrop¶

Событие срабатывает, когда любой Element сбрасывают в dropzone. Объект fredEl доступен в event.detail.fredEl.

Пример¶

document.body.addEventListener("FredElementDrop", function() {
    $owl();
});

FredElementSettingChange¶

Событие срабатывает при изменении setting любого Element. Объект fredEl доступен в event.detail.fredEl.

Пример¶

document.body.addEventListener("FredElementSettingChange", function() {
    $owl();
});

Полный пример¶

Пример повторной инициализации jQuery-слайдера при изменениях.

Slider Element¶

Element создаёт столько слайдов, сколько задано в options.

Markup¶

<div class="col-md-8 owl-init slider-main owl-carousel">
    {% for i in 0..(slides - 1) %}
        <div class="item-slide">
            <div class="card-banner" style="height:600px;">
                <div class="overlay-cover d-flex align-items-center justify-content-center">
                    <div class="text-center">
                        <h3 data-fred-name="slider_header{{i}}">Default Value {{i+1}}</h3>
                        <p data-fred-name="slider_text{{i}}">This is some default text.</a>
                    </div>
                </div>
            </div>
        </div>
    {% endfor %}
</div>

Options¶

{
    "settings": [
        {
            "name": "slides",
            "label": "Slides",
            "type": "slider",
            "value": 3,
            "min": 1,
            "max": 6
        }
    ]
}

Script в Template¶

Template инициализирует слайдер при первой загрузке и при сбросе или изменении Element.

<link
    rel="stylesheet"
    href="//unpkg.com/owl.carousel/dist/assets/owl.carousel.min.css"
/>
<link
    rel="stylesheet"
    href="//unpkg.com/owl.carousel/dist/assets/owl.theme.default.min.css"
/>
<script src="//unpkg.com/jquery/dist/jquery.js"></script>
<script src="//unpkg.com/owl.carousel/dist/owl.carousel.js"></script>
<script>
    var $owl = function() {
        $(".owl-carousel").owlCarousel({
            loop: true,
            margin: 10,
            nav: true,
            items: 1
        });
    };
    document.body.addEventListener("FredElementDrop", function() {
        $owl();
    });
    document.body.addEventListener("FredElementSettingChange", function() {
        $owl();
    });
    $(document).ready(function() {
        $owl();
    });
</script>