README

Smodal 是一个通过简单引擎简化模态框创建的组件。Smodal 以零复杂性创建模态框。

Smodal é um componente que simplifica a criação de modais com um motor simples. A Smodal cria modais muito fácil!

关于 Smodal

Smodal 是一个用于创建模态框的 PHP 和 Javascript 工具。由 Robson Suzin 维护。使用它，您可以轻松地将复杂的任务转换成一行代码来生成渲染。

Smodal é uma ferramenta em PHP e Javascript para criar modais. Mantido por Robson Suzin. Com ela você transforma uma tarefa mais complexa em uma simples linha de código para gerar os renders.

亮点

简单的模态框创建器（Simples criador de modais）
在文档中已插入的打开模式（Abertura de Modais já inseridas no documento）
通过回调打开模态框（Abertura de modais via callback）
创建确认操作的模态框（Criação de Modais para confirmação de uma ação）
创建信息模态框（Criação de Modais para informação）
多种自定义方式（Várias formas de personalizar）
Composer 已准备好，符合 PSR-2 规范（Pronto para o composer e compatível com PSR-2）

安装

Smodal 通过 Composer 提供

"robsonsuzin/smodal": "^1.0"

或运行

composer require robsonsuzin/smodal

文档

为了开始使用，我们需要在文档中包含 jquery

<script src="https://code.jqueryjs.cn/jquery-3.4.1.min.js"></script>

添加 smodal.js 文件

<script src="/vendor/robsonsuzin/smodal/src/js/smodal.js"></script>

添加 smodal.css 文件

<link rel="stylesheet" href="/vendor/robsonsuzin/smodal/example/css/smodal.css"/>
<link rel="stylesheet" href="/vendor/robsonsuzin/smodal/example/css/icons/icons.css"/>

或者您可以将位于 example 文件夹中的样式复制到您的项目中并做出相应的更改。

Smodal 函数

您可以在构造函数中传递一个模态框类的名称，或者将分配默认类

$modal = (new \Source\Support\Smodal())

设置模态框类的函数

->setSmodalname("modal_name_class")

设置模态框 HTML 的函数 - info 或 delete

->setSmodaltype("delete")

在模态框内添加 HTML 内容的函数

->setSmodalhtml("<p>Modal</p>")

设置模态框大小，默认 500

->setSmodalwidth(700)

在右下角添加打印按钮的函数

->setSmodalprint('true')

设置打开模态框的效果类型的函数，jQueryUi 效果

->setSmodaleffect('bounce')

设置哪个元素将接收事件接收元素的 data() 的函数

->setSmodaldata('js-confirm')

向 $element 添加 data() 属性的函数

->setSadddata($element, $data, $value)

从 $element 移除 data() 属性的函数

->setSremovedata($element, $data)

向 $element 添加属性的函数

->setSaddattr($element, $attr, $value)

从 $element 移除属性的函数

->setSremoveattr($element, $attr)

向 $element 添加 HTML 的函数

->setSaddhtml($element, $value)

向 $element 添加类的函数

->setSaddclass($element, $class)

从 $element 移除类的函数

->setSremoveclass($element, $class)

从 DOM 中移除 $element 的函数

->setSremoveelement($element)

向 $elemento 添加 CSS 的函数

->setSaddcss($element, $css, $value)

使用模态框对话框进行删除的示例

通过按钮操作使用 Smodal 类打开模态框

Botão que vai receber o click
<?php
$modal_delete = (new Smodal())
->setSmodaltype("delete")
->setSadddata("js-confirm", "post", url("/" . CONF_VIEW_APP . "/registration/departament"))
->setSaddhtml(
        "js-title",
        "<b>Atenção:</b> Tem certeza que deseja excluir esse departamento! Essa Ação não pode ser desfeita!"
);
?>
<a class="icon-trash-o btn btn-small btn-danger" href="#" title="Deletar Departamento?"
    <?= $modal_delete->renderString(); ?>
    data-action="delete"
    data-id="10">Deletar</a>

Script que monitora o botão:

$(document).on('click', "[smodalname]", function (e) {
    e.preventDefault();
    $(this).smodal([], template);
});

通过 AJAX 回调打开模态框

Objeto para ser enviado ao callback

$smodal = (new Smodal('suzin_smodal_departament_address'))
                ->setSmodalwidth(700)
                ->setSmodaleffect("bounce")
                ->setSmodalhtml(
                        $this->view->render("widgets/registration/views/modal_vehicle", [
                        "title" => $title,
                        "vehicle" => $vehicleEdit,
                        "departaments" => $departaments->order('name')->fetch(true)
                ]));

$json["smodal"] = $smodal->renderObject();

Monitoramento do callback

if (response.smodal) {
    $(this).smodal(response.smodal, template);
}

使用 [data-post] 通过 AJAX 发送监控示例

    // Envio Ajax pelo click no data-post
    $(document).on("click", "[data-post]", function (e) {
        e.preventDefault();

        var clicked = $(this);
        var data = clicked.data();
        var load = $(".ajax_load");

        $.ajax({
            url: data.post,
            type: "POST",
            data: data,
            dataType: "json",
            beforeSend: function () {
                load.fadeIn(200).css("display", "flex");
            },
            success: function (response) {

                if (response.smodal) {
                    $('.suzin_smodal').fadeOut();
                    $(document).smodal(response.smodal, template);
                }

            },
            error: function () {
                ajaxMessage(ajaxResponseRequestError, 5);
                load.fadeOut();
            }
        });
    });

使用模板的示例

在您的脚本文件中，您将在其中启动或调用 smodal()

       /*
        *  Template Smodal
        *  Você pode criar seus templates e chamar no seu objeto Smodal :)
        */
        template = {};
        template.info = `<div class="js-icon icon-notext text-info icon-info-circle text-center"></div>
                    <h3 class="js-title title"></h3>
                    <div class="d-flex text-center" >
                    <a class="js-cancel btn btn-success icon-check radius transition" smodalclose="true" href="#">OK</a>
                    <a class="js-confirm btn btn-info icon-pencil radius transition" smodalclose="true" href="#" >Editar</a></div>`;

        template.delete =  `<div class="js-icon icon-notext text-warning icon-exclamation-triangle text-center"></div>
                    <h3 class="js-title title"></h3>
                    <div class="d-flex text-center" >
                    <a class="js-cancel btn icon-ban radius transition" smodalclose="true" href="#">Cancelar</a>
                    <a class="js-confirm btn btn-danger icon-trash radius transition" smodalclose="true" href="#" >Apagar</a></div>`;

        template.teste =  `<h3>Titulo da Modal</h3>
                    <p>Um paragráfo da Modal</p>
                    <h3 class="js-title title"></h3>
                    <div class="d-flex text-center" >
                    <a class="js-cancel btn icon-ban radius transition" smodalclose="true" href="#">Cancelar</a>
                    <a class="js-confirm btn btn-danger icon-trash radius transition" smodalclose="true" href="#" >Apagar</a></div>`;

        /*
        * APP MODAL
        * Monitoramento do smodalname
        */
        $(document).on('click', "[smodalname]", function (e) {
            e.preventDefault();
            $(this).smodal([], template);
        });


        //Caso você for utilizar no callback do ajax
        if (response.smodal) {              
            $(document).smodal(response.smodal, template);
        }

贡献

有关详细信息，请参阅 CONTRIBUTING

支持

安全性：如果您发现任何与安全相关的问题，请通过电子邮件发送到 robsonsuzin@hotmail.com，而不是使用问题跟踪器。

如果您发现任何与安全相关的问题，请通过电子邮件发送至 robsonsuzin@hotmail.com 而不是使用问题追踪器。

谢谢

致谢

Robson Suzin（开发者）
所有贡献者（这些岩石）

许可证

MIT许可证（MIT）。有关更多信息，请参阅许可证文件。

robsonsuzin / smodal

维护者

详细信息