邮件群发-邮件群发软件|邮件批量发送工具|群发邮件平台|批量邮箱发送系统公司在Magento2中使用弹出窗口小部件jQuery
在本文中，我们将看一个在Magento 2中使用jQuery弹出窗口小部件的示例。为了清晰起见，我们将使用这个小部件创建一个模态窗口，在其中放置搜索表单，搜索表单默认位于header中。首先，让我们看看现有的小部件选项。以下选项是默认可用的:
- autoOpen
- buttons
- clickableOverlay
- focus
- innerScroll
- modalClass
- modalLeftMargin
- responsive
- title
- type
但是，这个列表不是最终的列表，您可以自由地添加所需的选项，从而扩展这个小部件的原始功能。
让我们仔细看看每个选项。
autoOpen
此属性的默认值为“false”。属性确定小部件初始化后是否立即显示模态窗口。
buttons
该属性的值是一个数组，其中包含一个对象，您可以在该对象中传递按钮、CSS类和处理程序函数的文本，单击按钮时将触发处理程序函数。
clickableOverlay
此属性确定在单击叠加时是否可以关闭模态窗口。默认值为true。
focus
此属性确定在窗口打开后立即处于焦点位置的元素。具有CSS类名称的字符串被接受为值。在我们的例子中，在打开一个弹出窗口之后，重点应该放在搜索输入字段上。
innerScroll
如果模态窗口超过了屏幕的大小，这个属性将确定滚动位置，并且在打开弹出窗口时，我们需要滚动位于特定位置。
modalClass
有了这个属性，我们可以定义样式化所需的任何CSS属性
modalLeftMargin
此属性设置模态窗口之间的缩进。
responsive
定义模态窗口的自适应行为。默认情况下，该值设置为false。
title
定义模态窗口的标题。
type
此属性接受两个值作为字符串弹出或模态。根据所选的值，将定义一个用于呈现弹出窗口的模板。这些模板默认位于下列文件夹中:
- <Magento_Ui_module_dir>/view/base/web/templates/modal/modal-popup.html popup template.
- <Magento_Ui_module_dir>/view/base/web/templates/modal/modal-slide.html slide template.
如果需要，可以在theme文件夹中覆盖它们。
由于我们将为标题搜索表单创建一个弹出窗口，因此需要覆盖form.mini并稍微修改它。phtml模板。
该模板位于vendor/magento/module-search中。让我们覆盖它，把它放在下面的文件夹:
Vendor_Name/Vendor_Theme/Magento_Search/templates/form.mini.phtml.
在搜索块前面添加一个标记，它将显示搜索按钮，单击该按钮后，我们的模态窗口将弹出。
|
1
2
3
4
5
6
|
<
div
class=
"block-search-toggle"
id=
"search-popup-toggle"
>
<
span
class=
"block-search-toggle-icon"
>
<
img
src=
"<?php echo $block->getViewFileUrl('images/search-icon.svg'); ?>"
alt=
"search-icon"
>
</
span
>
<
span
class=
"block-search-toggle-text"
>
Search
</
span
>
</
div
>
|
从技术上讲，这并不一定是一个按钮元素。这可以是任何DOM元素，稍后我们将向其附加事件处理程序。
下一步是连接RequireJS模块，在这个模块中我们定义了弹出窗口的设置。为了连接模块，我们使用了一个声明性的符号，通过<script type=”text/x-magento-init” /> 标签
在模板的末尾添加以下代码:
|
1
2
3
4
5
6
7
|
<script
type=
"text/x-magento-init"
>
{
"#search-popup-toggle"
:
{
"Magento_Search/js/search-popup"
:
{
}
}
}
</script>
|
在这个JSON对象中，我们传递#search-popup-toggle元素和search-popup.js脚本，我们将在下一步创建。请注意，在上面的代码中，我们指定了没有扩展名的js文件的名称。
Vendor_Name/Vendor_Theme/Magento_Search/we/js文件夹中，我们创建了一个新文件search-popup.js
在文件中放入以下代码:
|
<?php
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
// @codingStandardsIgnoreFile
?>
<?php
/** @var $block \Magento\Framework\View\Element\Template */
/** @var $helper \Magento\Search\Helper\Data */
$helper
=
$this-
>
helper
(
\
Magento
\
Search
\
Helper
\
Data::
class
)
;
?>
<
div
class=
"block-search-toggle"
id=
"search-popup-toggle"
>
<
span
class=
"block-search-toggle-icon"
>
<
img
src=
"<?php echo $block->getViewFileUrl('images/search-icon.svg'); ?>"
alt=
"search-icon"
>
</
span
>
<
span
class=
"block-search-toggle-text"
>
Search
</
span
>
</
div
>
<
div
class=
"block block-search"
id=
"search-block"
>
<
div
class=
"block block-title"
>
<
strong
>
<?=
/* @escapeNotVerified */
__
(
'Search'
)
?>
</
strong
>
</
div
>
<
div
class=
"block block-content"
>
<
form
class=
"form minisearch"
id=
"search_mini_form"
action=
"<?= /* @escapeNotVerified */ $helper->getResultUrl() ?>"
method=
"get"
>
<
div
class=
"field search"
>
<
label
class=
"label"
for=
"search"
data-
role=
"minisearch-label"
>
<
span
>
<?=
/* @escapeNotVerified */
__
(
'Search'
)
?>
</
span
>
</
label
>
<
div
class=
"control"
>
<
input
id=
"search"
data-
mage-
init=
'{"quickSearch":{
"formSelector":"#search_mini_form",
"url":"<?= /* @escapeNotVerified */ $helper->getSuggestUrl()?>",
"destinationSelector":"#search_autocomplete"}
}'
type=
"text"
name=
"<?= /* @escapeNotVerified */ $helper->getQueryParamName() ?>"
value=
"<?= /* @escapeNotVerified */ $helper->getEscapedQueryText() ?>"
placeholder=
"Search By Typing"
class=
"input-text"
maxlength=
"<?= /* @escapeNotVerified */ $helper->getMaxQueryLength() ?>"
role=
"combobox"
aria-
haspopup=
"false"
aria-
autocomplete=
"both"
autocomplete=
"off"/
>
<
div
id=
"search_autocomplete"
class=
"search-autocomplete"
>
</
div
>
<?=
$block-
>
getChildHtml
(
)
?>
</
div
>
</
div
>
<
div
class=
"actions"
>
<
button
type=
"submit"
title=
"<?= $block->escapeHtml(__('Search')) ?>"
class=
"action search"
>
<
span
>
<?=
/* @escapeNotVerified */
__
(
'Search'
)
?>
</
span
>
</
button
>
</
div
>
</
form
>
</
div
>
</
div
>
<script
type=
"text/x-magento-init"
>
{
"#search-popup-toggle"
:
{
"Magento_Search/js/search-popup"
:
{
}
}
}
</script>
|
这就是jQuery弹出窗口小部件在Magento 2中的样子，感谢您的阅读!在下面的部分留下你的评论和问题，我很乐意回答。
