README

Jaxon 对话框

Jaxon 的模态框、警告框和确认对话框，支持各种 JavaScript 库。

特性

此包为 Jaxon 应用程序提供模态框、警告框和确认对话框，支持 12 个不同的 JavaScript 库。

每个功能的 JavaScript 库将通过配置选择，包会负责将库文件加载到页面并生成相应的 JavaScript 代码。

可以为每个 JavaScript 库单独设置 URL 和版本号。

安装

在 composer.json 文件中添加以下行，并运行 composer update 命令。

"require": {
    "jaxon-php/jaxon-core": "^4.0",
    "jaxon-php/jaxon-dialogs": "^4.0"
}

配置

此包在 default 部分定义了 3 个配置选项，用于设置默认库。

modal: 模态框的默认库
message: 消息的默认库
question: 问题的默认库

lib.use 选项允许在页面中加载额外的库，如果它们在应用程序中使用。

question 部分定义了问题对话框的选项。

lib.uri 选项定义了下载库文件的 URI。

也可以为每个库设置特定选项。

    'dialogs' => [
        'default' => [
            'modal' => 'bootstrap',  // Default library for modal dialogs
            'message' => 'jconfirm', // Default library for messages
            'question' => 'noty',    // Default library for questions
        ],
        'lib' => [
            'uri' => 'https://cdn.jaxon-php.org/libs',
            'use' => ['pgwjs', 'toastr'], // Additional libraries in use
        ],
        // Confirm options
        'question' => [
            'title' => 'Question',   // The question dialog
            'yes' => 'Oh Yes',       // The text of the Yes button
            'no' => 'No way',        // The text of the No button
        ],
        // Options for the Toastr library
        'toastr' => [
            'options' => [
                'closeButton' => true,
                'positionClass' => 'toast-top-center'
            ],
        ],
        // Load a different version of the JQuery Confirm library from a different CDN
        'jconfirm' => [
            'uri' => 'https://cdnjs.cloudflare.com/ajax/libs',
            'subdir' => 'jquery-confirm',
            'version' => '3.3.2',
        ],
    ],

用法

模态框对话框

此插件提供显示和隐藏模态框对话框的函数，包括标题、内容和零个或多个按钮。

/**
 * Show a modal dialog.
 */
public function show($title, $content, array $buttons, array $options = []);

/**
 * Hide the modal dialog.
 */
public function hide();

show() 方法的参数描述如下：

$title: 要打印在对话框顶部的单行文本。
$content: 对话框的 HTML 内容。
$buttons: 要打印在对话框中的按钮列表。每个按钮是一个包含以下条目的数组
- title: 要打印在按钮中的文本。
- class: 要应用在按钮上的 CSS 类或类。
- click: 在点击此按钮时执行的 JavaScript 代码。可以使用请求工厂定义，或者将其设置为 close 以关闭对话框。
$options: 一组特定于当前使用的 JavaScript 库的配置选项。

示例。

    public function showDialog()
    {
        // The dialog buttons
        $buttons = [
            [
                'title' => 'Close',
                'class' => 'btn',
                'click' => 'close'
            ]
        ];
        // The HTML content of the dialog
        $content = "This modal dialog depends on application settings!!";
        // The dialog specific options
        $options = ['width' => 500];
        // Show the dialog
        $this->response->dialog->show("Modal Dialog", $content, $buttons, $options);

        return $this->response;
    }

警告或通知

此插件提供显示 4 种不同类型的警告或通知消息的函数。

/**
 * Print a success message.
 */
public function success($message, $title = null);

/**
 * Print an information message.
 */
public function info($message, $title = null);

/**
 * Print a warning message.
 */
public function warning($message, $title = null);

/**
 * Print an error message.
 */
public function error($message, $title = null);

示例。

    public function save($formValues)
    {
        if(!$this->validator->valid($formValues))
        {
            $this->response->dialog->error("Invalid input", "Error");
            return $this->response;
        }
        $this->repository->save($formValues);
        $this->response->dialog->success("Data saved!", "Success");
        return $this->response;
    }

确认问题

confirm() 函数将确认问题添加到 Jaxon 请求中，只有当用户对给定问题的回答为“是”时，该请求才会被调用。

/**
 * Add a confirmation question to the request
 */
public function confirm($question, ...);

第一个参数是必填的，即要提出的问题。

接下来的参数是可选的；它们允许使用 Jaxon 或 jQuery 选择器和位置占位符从网页中插入内容到确认问题中。当需要将网页中的信息插入到翻译字符串中时特别有用。

以下示例中，用户必须选择一种颜色，所选颜色将插入到确认问题中。

使用 Jaxon 选择器的示例。

<select class="form-control" id="colorselect" name="colorselect" onchange="<?php
    echo rq('HelloWorld')->setColor(pm()->select('colorselect'))
        ->confirm('Set color to {1}?', pm()->select('colorselect')) ?>; return false;">
    <option value="black" selected="selected">Black</option>
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
</select>

使用 jQuery 选择器的示例。

<select class="form-control" id="colorselect" name="colorselect" onchange="<?php
    echo rq('HelloWorld')->setColor(jq('#colorselect')->val())
        ->confirm('Set color to {1}?', jq('#colorselect')->val()) ?>; return false;">
    <option value="black" selected="selected">Black</option>
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
</select>

支持的库

此软件包目前支持14个JavaScript库，每个库实现一个或多个接口。

XDialog

https://xxjapp.github.io/xdialog/

对话框ID: xdialog
实现: 模态窗口、警告、确认
版本: 3.4.0

CuteAlert

https://github.com/gustavosmanc/cute-alert

对话框ID: cute
实现: 警告、确认
版本

Bootbox

http://bootboxjs.com

对话框ID: bootbox
实现: 模态窗口、警告、确认
版本: 4.3.0

jAlert: https://htmlguyllc.github.io/jAlert/

对话框ID: jalert
实现: 警告、确认
版本: 4.5.1

PgwJS

http://pgwjs.com/pgwmodal/

对话框ID: pgwjs
实现: 模态窗口
版本: 2.0.0

Toastr

https://codeseven.github.io/toastr/

对话框ID: toastr
实现: 警告
版本: 2.1.3

Tingle: https://tingle.robinparisi.com/

对话框ID: tingle
实现: 模态窗口
版本: 0.8.4

Noty: https://ned.im/noty/

对话框ID: noty
实现: 警告、确认
版本: 2.3.11

Notify: https://notifyjs.jpillora.com/

对话框ID: notify
实现: 警告
版本: 0.4.2

Overhang: https://paulkr.github.io/overhang.js/（需要jQuery和jQuery UI）

对话框ID: overhang
实现: 警告、确认
版本

PNotify: https://sciactive.com/pnotify/（需要jQuery和jQuery UI）

对话框ID: pnotify
实现: 警告、确认
版本: 3.0.0

Sweet Alert

Sweet Alert: https://sweetalert.js.org/

对话框ID: sweetalert
实现: 警告、确认
版本: 1.1.1

JQuery-Confirm

https://craftpip.github.io/jquery-confirm/

对话框ID: jconfirm
实现: 模态窗口、警告、确认
版本: 3.0.1, 3.3.0, 3.3.1, 3.3.2

Bootstrap 3 Dialog: https://nakupanda.github.io/bootstrap3-dialog

对话框ID: bootstrap
实现: 模态窗口、警告、确认
版本: 1.35.3

添加新的库

要将新的JavaScript库添加到此插件，需要定义并注册一个新的类。

该类必须实现Jaxon\App\Dialog\LibraryInterface接口，并至少实现Jaxon\App\Dialog\LibraryInterface、Jaxon\App\Dialog\LibraryInterface或Jaxon\App\Dialog\LibraryInterface接口中的一个，具体取决于它提供的功能。

接口

LibraryInterface接口定义如下。它定义了库的名称及其JavaScript代码。

interface LibraryInterface
{
    /**
     * Get the library name
     *
     * @return string
     */
    public function getName(): string;

    /**
     * Get the library base URI
     *
     * @return string
     */
    public function getUri(): string;

    /**
     * Get the library subdir for the URI
     *
     * @return string
     */
    public function getSubdir(): string;

    /**
     * Get the library version for the URI
     *
     * @return string
     */
    public function getVersion(): string;

    /**
     * Get the CSS header code and file includes
     *
     * @return string
     */
    public function getCss(): string;

    /**
     * Get the javascript header code and file includes
     *
     * @return string
     */
    public function getJs(): string;

    /**
     * Get the javascript code to be printed into the page
     *
     * @return string
     */
    public function getScript(): string;

    /**
     * Get the javascript code to be executed on page load
     *
     * @return string
     */
    public function getReadyScript(): string;
}

getJs()和getCss()方法返回加载库的JavaScript和CSS文件的HTML头部代码。getScript()方法返回在页面加载后执行以初始化库的JavaScript代码。

根据JavaScript库的功能，类必须实现以下三个接口中的一个或多个。

用于窗口和模态对话框。

interface ModalInterface
{
    /**
     * Show a modal dialog.
     *
     * @param string $sTitle The title of the dialog
     * @param string $sContent The content of the dialog
     * @param array $aButtons The buttons of the dialog
     * @param array $aOptions The options of the dialog
     *
     * @return void
     */
    public function show(string $sTitle, string $sContent, array $aButtons, array $aOptions = []);

    /**
     * Hide the modal dialog.
     *
     * @return void
     */
    public function hide();
}

用于通知对话框。

interface MessageInterface
{
    /**
     * Show a success message.
     *
     * @param string $sMessage    The text of the message
     * @param string $sTitle    The title of the message
     *
     * @return string
     */
    public function success(string $sMessage, string $sTitle = ''): string;

    /**
     * Show an information message.
     *
     * @param string $sMessage    The text of the message
     * @param string $sTitle    The title of the message
     *
     * @return string
     */
    public function info(string $sMessage, string $sTitle = ''): string;

    /**
     * Show a warning message.
     *
     * @param string $sMessage    The text of the message
     * @param string $sTitle    The title of the message
     *
     * @return string
     */
    public function warning(string $sMessage, string $sTitle = ''): string;

    /**
     * Show an error message.
     *
     * @param string $sMessage    The text of the message
     * @param string $sTitle    The title of the message
     *
     * @return string
     */
    public function error(string $sMessage, string $sTitle = ''): string;
}

用于确认对话框。

interface QuestionInterface
{
    /**
     * Return a script which makes a call only if the user answers yes to the given question
     *
     * @param string  $sQuestion
     * @param string  $sYesScript
     * @param string  $sNoScript
     *
     * @return string
     */
    public function confirm(string $sQuestion, string $sYesScript, string $sNoScript): string;
}

辅助工具

Jaxon\App\Dialog\Library\DialogLibraryTrait为Jaxon\App\Dialog\LibraryInterface接口的一些方法提供默认实现，以及一个通过helper()方法返回的Jaxon\App\Dialog\Library\DialogLibraryHelper对象，该对象提供对对话框配置选项和模板的访问。

注册

定义后，库类需要在应用中使用之前进行配置和注册。

在启动库时可以注册该类。

jaxon()->dialog()->registerLibrary(\Path\To\My\Plugin::class, 'myplugin');

或者在Jaxon配置的dialog部分声明。

    'dialogs' => [
        'default' => [
            'modal' => 'myplugin',    // Default library for modal dialogs
            'message' => 'myplugin',  // Default library for messages
            'question' => 'myplugin', // Default library for questions
        ],
        'lib' => [
            'ext' => [
                'myplugin' => \Path\To\My\Plugin::class,
            ],
        ],
        'myplugin' => [         // Plugin config options
            'options' => [
               'position' => 'center',
            ],
        ],
    ],

贡献

问题跟踪器: github.com/jaxon-php/jaxon-dialogs/issues
源代码: github.com/jaxon-php/jaxon-dialogs

许可

该软件包采用BSD许可协议。

jaxon-php / jaxon-dialogs

维护者

详细信息