magento2 内置javascript插件

菜单

<ul data-mage-init='{"menu":{"responsive":true, "expanded":true, "position":{"my":"left top","at":"left bottom"}}}'>
    <li class="level-top parent">
        <a href="{{store url="url1"}}" class="level-top" ><span>Level 1</span></a>
        <ul class="submenu">
            <li><a href="{{store url="url2"}}"><span>Level 2</span></a></li>
        </ul>
    </li>
</ul>

折叠

<div data-mage-init='{"accordion":{"openedState": "active", "collapsible": true, "active": false, "multipleCollapsible": false}}'>
    <div data-role="collapsible">content 1</div>
    <div data-role="collapsible">content 2</div>
</div>

下拉对话框

<div id="button1">show</div>
<div data-mage-init='{ "dropdownDialog": {
                "appendTo": "#switcher-language > .options",
                "triggerTarget": "#button1",
                "closeOnMouseLeave": false,
                "triggerClass": "active",
                "parentClass": "active",
                "buttons": null } }'>content</div>

tab标签

<div data-mage-init='{"tabs":{"openedState":"active"}}'>
    <div data-role="collapsible">
        <a data-toggle="switch" href="#tab1"></a>
    </div>
    <div class="data item content" id="tab1" data-role="content"></div>
    <div data-role="collapsible">
        <a data-toggle="switch" href="#tab2"></a>
    </div>
    <div class="data item content" id="tab2" data-role="content"></div>
</div>

zoom

<script data-zoom-template="zoom-display" type="text/x-magento-template">
    <div data-zoom-role="zoom-container">
        <div data-zoom-role="zoom-inner"></div>
    </div>
</script>
<script data-zoom-template="zoom-enlarged-image" type="text/x-magento-template">
   <img data-zoom-role="enlarged-image" src="<%= data.img %>" />
</script>
<script data-zoom-template="zoom-track" type="text/x-magento-template">
   <div data-zoom-role="zoom-track"></div>
</script>
<script data-zoom-template="zoom-lens" type="text/x-magento-template">
   <div data-zoom-role="zoom-lens"></div>
</script>
<script data-zoom-template="notice" type="text/x-magento-template">
   <p data-zoom-role="notice" class="notice"><%= data.text %></p>
</script>
<div class="zoom" data-zoom-role="zoom">
    <img data-zoom-role="zoom-image" src="xxx" />
</div>
<script type="text/x-magento-init">
{
    "[data-zoom-role=zoom]": {
        "selectors": {
            "image": "[data-zoom-role=zoom-image]",
            "imageContainer": "[data-zoom-role=gallery-base-image-container]",
            "zoomInner": "[data-zoom-role=zoom-inner]",
            "track": "[data-zoom-role=zoom-track]",
            "notice": "[data-zoom-role=notice]"
        },
        "controls": {
            "lens": { "template": "[data-zoom-template=zoom-lens]" },
            "track": { "template": "[data-zoom-template=zoom-track]" },
            "display": { "template": "[data-zoom-template=zoom-display]" },
            "notice": { "template": "[data-zoom-template=notice]" }
        }
    }
}
</script>

局部loading KO版(isLoading: boolean)

<div data-bind="fadeVisible: visible(), blockLoader: isLoading">
content...
</div>

局部loading 静态版

<div data-role="loader" class="loading-mask">
    <div class="loader">
        <img src="<?php echo $block->getViewFileUrl('images/loader-1.gif'); ?>"
             alt="<?php echo __('Loading...') ?>">
    </div>
</div>

激活全屏loading

// 插件来源于mage/loader
require(['jquery'], function ($){
    // show loader
    $('body').trigger('processStart');
    // hide loader
    $('body').trigger('processStop');
});