菜单
<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');
});
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。