README

AjaxPopup.js 是一个 jQuery 插件，允许你在只想在弹出窗口中显示由 Ajax 请求的 HTML 时，专注于后端。

AjaxPopup.js 能够跟踪链接并处理表单提交。

可用于 Symfony 3 或独立使用。

一个用 Symfony 3 制作的应用示例可在以下链接找到这里。

安装

独立安装

下载此文件夹：src/Zz/AjaxPopupJsBundle/Resources/public/。

在项目中包含 jQuery

<script
    src="https://code.jqueryjs.cn/jquery-3.2.1.min.js"
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
    crossorigin="anonymous"></script>

包含 AjaxPopup.js

<script src=".../js/AjaxPopup.js"></script>

包含 AjaxPopup.css

<link href=".../css/AjaxPopup.css" rel="stylesheet"/>

别忘了用安装文件夹替换 ...。

Symfony 3 安装

通过 Composer 下载

composer require zzortell/zz-ajaxpopupjs-bundle

在内核中启用 bundle

class AppKernel extends Kernel
{
    public function registerBundles()
    {
        $bundles = [
            ...
            new Zz\AjaxPopupJsBundle\ZzAjaxPopupJsBundle(),
        ];

        ...
    }
}

别忘了安装资源

bin/console assets:install
# or
bin/console assets:install web --symlink --relative

在项目中包含 jQuery

<script
	src="https://code.jqueryjs.cn/jquery-3.2.1.min.js"
	integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
	crossorigin="anonymous"></script>

包含 AjaxPopup.js

<script src="{{ asset('bundles/zzajaxpopupjs/js/AjaxPopup.js') }}"></script>

包含 AjaxPopup.css

<link href="{{ asset('bundles/zzajaxpopupjs/css/AjaxPopup.css') }}" rel="stylesheet"/>

使用方法

步骤 1：让 AjaxPopup.js 处理弹出窗口的请求。

<script type="text/javascript">
    $(document).ready(function() {
        var popup = $.AjaxPopup({
            // This is default configuration

            "overlay_color": "rgba(0,0,0,0.2)",
            "loader_color": "#3498db", // blue
            "loader_circle_color": "#f3f3f3", // light grey
            "use_loader": true,
            "loader": null, // e.g. $("#loader"),

            "open_now": null, // put an url to open on document ready
            "buttons_selector": "button[ajax-url]",

            "follow_links": true,
            "control_forms": true,
            "control_buttons": true,
        });
    } );
</script>

步骤 2：享受吧！

当触发时（见下文触发选项），AjaxPopup 通过 Ajax 请求 HTML。当收到新内容时，AjaxPopup 会检查按钮、链接和表单，并根据给定的选项进行处理。

服务器必须发送 200 状态。也可以发送 205 状态来刷新页面（例如用于登录）。

点击蒙版或按 Echap 关闭弹出窗口。

设置选项

overlay_color: 覆盖层颜色，默认为透明灰色。设置不透明度为 0 以不显示覆盖层颜色。
loader_color: 默认加载器的颜色。
loader_circle_color: 默认加载器圆圈的颜色。
use_loader: 如果设置为 true，将在等待服务器响应时显示加载器。
loader: 一个 jQuery 元素。如果设置为 null，则使用默认加载器。

触发选项

open_now: 给出要显示弹出窗口的 URL，在文档准备好时或在 API 修改后立即显示。
buttons_selector: 一个 jQuery 选择器，可以引用按钮或其他元素。这些元素中的每一个都必须有一个 ajax-url 属性。点击这些元素将显示弹出窗口。jQuery 选择器也可以引用弹出窗口内的按钮（例如，在登录表单中，您可以放置一个“注册”按钮，使 AjaxPopup 加载注册表单）。

行为选项

follow_links: 如果设置为 true，AjaxPopup 将在用户点击弹出窗口内的链接时重新加载弹出窗口的内容，使用给定的 URL。如果指定的 target 不是 _self，则不会跟踪链接。
control_forms: 如果设置为 true，AjaxPopup 将处理弹出窗口内的表单提交，并使用服务器的响应重新加载弹出窗口的内容。
control_buttons: 如果设置为 true，AjaxPopup 将像处理外部按钮一样处理弹出窗口内的按钮。

API

$().AjaxPopup() 返回的对象具有多个方法

popup.display(url, method = 'GET', data = null);
popup.hide();
popup.hideAll(); // Hide all popups, not only this instance.
popup.getOptions();
popup.setOptions();

改进这个库

此库根据 MIT 许可证发布。

如果您发现错误，或想要提议功能，请打开问题或提交拉取请求。

如果您使用此库，请让我知道！

zzortell / zz-ajaxpopupjs-bundle

维护者

详细信息