浏览文章
文章信息
Magento2 模块中引入js文件 | Magento2引入js | Magento2 include js file in module
13207
以模块根目录为准:以引入zoomify为例。
1、js下载后放到
web/zoomify/dist/zoomify.min.js
2、编辑web/requirejs-config.js
/** * Copyright © Magento, Inc. All rights reserved. * See COPYING.txt for license details. */ var config = { // paths: { // "jquery.bootstrap.3.3.7.min.js": "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min" // }, map: { '*': { 'jquery.bootstrap.3.3.7.min.js': 'Aiweline_ProductHowToStyle/bootstrap/3.3.7/js/bootstrap.min', 'zoomify': 'Aiweline_ProductHowToStyle/zoomify/dist/zoomify.min', } }, shim: { 'jquery.bootstrap.3.3.7.min.js': { 'deps': ['jquery'] }, 'zoomify': { 'deps': ['jquery'] }, } };3、使用在phtml中,或者自定义一个模块js
<script> require(['jquery','zoomify'], function ($) { let how_to_style_click = $('#how-to-style-click') let tab_pane = $('#how-to-style'); let showing = false; how_to_style_click.click(function (e) { if (showing) { // $('#how-to-style-tab').tab('hide') $(e.target).attr('style', 'background: #f8f6f6'); tab_pane.hide(); } else { tab_pane.show(); $(e.target).attr('style', "background:#e2e2e2;color:black"); } showing = !showing } ) ) </script>