zoukankan      html  css  js  c++  java
  • Yii2美化confirm

    在view中,

    <?= Html::a('删除', ['post/delete', 'id' => $post['id']],['data-confirm'=>'确定要删除吗?']) ?>

    会在点击删除是弹出

    玄机隐藏在yii.js

    美中不足的是,yii使用的是原生的confirm,有点丑

    在网上找到了一种解决方案

    Bootbox.js,是一个小型的JavaScript库用来创建简单的可编程对话框,基于Bootstrap的Modal(模态框)来创建

    下载Bootbox.jshttps://github.com/makeusabrew/bootbox

    在@app/web/js/路径下创建一个javascript文件,比如main.js

    yii.allowAction = function ($e) {
        var message = $e.data('confirm');
        return message === undefined || yii.confirm(message, $e);
    };
    // --- Delete action (bootbox) ---
    yii.confirm = function (message, ok, cancel) {
     
        bootbox.confirm(
            {
                message: message,
                buttons: {
                    confirm: {
                        label: "OK"
                    },
                    cancel: {
                        label: "Cancel"
                    }
                },
                callback: function (confirmed) {
                    if (confirmed) {
                        !ok || ok();
                    } else {
                        !cancel || cancel();
                    }
                }
            }
        );
        // confirm will always return false on the first call
        // to cancel click handler
        return false;
    }

    注册资源包

    修改文件:@app/assets/Assets.php

    namespace backendassets;
     
    use yiiwebAssetBundle;
     
    class AppAsset extends AssetBundle
    {
        public $basePath = '@webroot';
        public $baseUrl = '@web';
        public $css = ['css/site.css'];
        // 注册js资源
        public $js = ['js/bootbox.js', 'js/main.js'];
        public $depends = [
            'yiiwebYiiAsset',
            'yiiootstrapBootstrapAsset',
        ];
    }

    bootbox.js(下载包里的)和main.js(刚才创建的)

    刷新以前的页面

  • 相关阅读:
    挂断电话——黑名单拦截
    上传文件 服务端模拟存储
    短信监听+短信拦截
    c#常用控件缩写(装)
    20121016学习笔记四
    c#日期时间格式化
    FTP服务器配置以及访问
    关于远程桌面设置和连接
    20121016学习笔记三
    电脑开机应用程序自动启动设置
  • 原文地址:https://www.cnblogs.com/baby123/p/5057117.html
Copyright © 2011-2022 走看看