0

0

Yii2的相关学习记录,alert等美化、confirm异步、session中的flash及小部件的使用(六) - 漫游云巅

php中文网

php中文网

发布时间:2016-05-20 11:54:08

|

2102人浏览过

|

来源于php中文网

原创

呃,系统自带的alert、confirm等弹出框实在是难看,作为一个颜控,这能忍?

这里我用的是kartik-v/yii2-dialog,这个是基于bootstrap3-dialog这个来做了一些常用alert、confirm和dialog的小部件封装,当然了,本质上还是bootstrap3-dialog,可以用原生的方法,原生方法的用法点这里,而bootstrap3-dialog又是基于bootstrap3的modals做的封装。嗯,基本关系就是这样。在搜索这个相关知识时,经常会看到有人提到bootbox,这个同样是流行的一个美化插件,基本原理类似,用法稍微不同,在packagist搜索yii2 bootbox会发现也有人为Yii2做了集成(或者自己集成也行,后面会讲到),同样值得推荐。

按照说明安装,最好是按照github的说明,因为最新的一般都会在这里先更新。composer中要用@dev。可以看这里的说明,如果不成功,先composer self-update,再试下,当初安装时也是各种报错不行,后来突然就好了。稍微注意的是confirm,dialog调用时要求必须写回调,否则就报错。

还是蛮漂亮的。但是像是Yii框架Gridview自带的confirm(像是删除按钮),点击时还是原生的,因为它的源码就是用的confirm命令,好在Yii框架提供了方法,可以让我们覆盖confirm方法。具体可如下操作:

1、我们可以先看下在vendor/yiisoft/yii2/assets/yii.js文件中的confirm方法:注释中就可以看到,可以用yii.confirm来重写此设置。

 /**
    * Displays a confirmation dialog.
    * The default implementation simply displays a js confirmation dialog.
    * You may override this by setting `yii.confirm`.
    * @param message the confirmation message.
    * @param ok a callback to be called when the user confirms the message
    * @param cancel a callback to be called when the user cancels the confirmation
    */
    confirm: function (message, ok, cancel) {
        if (confirm(message)) {
            !ok || ok();
        } else {
            !cancel || cancel();
        }
    },

2、那我们就重写,可以在backend/web/js中新建confirm.js文件,然后重新,可参照此文章,这是设置bootbox的,而且版本有点过时,不过下方的评论有最新方法。而我们的设置与此原理是一致的,只不过是改成kartik-v/yii2-dialog所需求的参数样式:

yii.confirm = function (message, ok, cancel) {
    krajeeDialog.confirm(message,function(data){
        if (data) {
            !ok || ok();
        } else {
            !cancel || cancel();
        }
    });
    // confirm will always return false on the first call
    // to cancel click handler
    return false;
}

3、我们需要注册此js,可以在backend/assets/Appasset.php中添加上方的js文件:

class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'css/site.css',
    ];
    public $js = [
        'js/confirm.js',//就是这里了
    ];
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset',
    ];
}

这样一来,在点击删除按钮便会发现可以调用了:

由于我们用的是kartik-GridView,它的两个功能展示全部记录和导出csv等的提示,都是用的原生的confirm,强迫症的我们能忍吗?好吧,我忍了,这里只给出改的思路,尤其是只懂基础js的我来说,先把时间放在其它地方吧。

在改之前,首先我们需要明确kartik-v/yii2-dialog的confirm(bootbox同样)和原生confirm的不同。原生confirm是同步的,而kartik-v/yii2-dialog的confirm方法是异步回调的。这导致原生的confirm可以直接这样写:

Grokipedia
Grokipedia

xAI推出的AI在线百科全书

下载
function abc(){
    return window.confirm('123');//confirm点击确认返回true,取消返回false,不点击就等着用户点击    
}
if(abc()){
    alert('456');//点击是,会弹出alert弹窗
}

而如果你用kartik-v/yii2-dialog的confirm也这样写,则永远不会弹窗,因为是异步回调的,不会去等你点击。

function abc(){
    krajeeDialog.confirm('123',function(result){
        if(result){
            return true;
        }else{
            return false;
        }
    });
}
if(abc()){
    alert('456');//由于是异步回调,所以不管点不点都不会弹窗
}

可能有人会想(比如我)这样写行不行?不行,不支持这样的写法,bootstrap3-dialog中这样写返回的是窗口有没有open。

if(krajeeDialog.confirm('123',function(result){}){
    return true;
}else{
    return false;      
}

所以要想在kartik-v/yii2-dialog的confirm中执行alert,只能将alert放在回调函数中:

function abc(){
    krajeeDialog.confirm('123',function(result){
        if(result){
            alert('456');
        }else{
           //do something
        }
    });
}

 以上的不同,再加上是在vendor中修改有违原则啊(拿出来很费劲,又是继承什么的,而导出csv的js没找到类似yii.js那样覆盖的方法,只能重新写引入什么的),也是我不想改源码的原因。坑爹。好吧,下面继续说怎么改:

1、{toggleData}显示全部记录,它的调用confirm是在vendor/kartik-v/yii2-grid/GridView.php中的getToggleDataScript方法,我们修改return就可以:

$url=Url::current([$this->_toggleDataKey => $tag]);//先定义需要跳转的url
return "\$('#{$this->_toggleButtonId}').on('{$event}',function(e){
    e.preventDefault();//先阻止点击事件
    krajeeDialog.confirm('{$msg}',function(data){
        if (data) {
            window.location.href='{$url}';//点击是则跳转
        }
    });
    //下面这条是原来的方法
    // if(!window.confirm('{$msg}')){e.preventDefault();}
});";

2、{export}中的导出提示,是在vendor/kartik-v/yii2-grid/assets/js/kv-grid-export.js中:这个就麻烦了,感觉需要重写关联的notify方法和listenClick方法。谁写完了,麻烦告诉一声吧。

kvConfirm: function (msg) {             
    try {
        return window.confirm(msg);//调的这个
    }
    catch (err) {
        return true;
    }
}

上面就这样吧,下面说下session中的flash,我们一般创建完成等操作时,需要给点提示是完成了还是怎么着。在Yii中有自带flash方法来实现,可点击这里查看,其实在adminLTE这个后台框架中已集成了Alert小部件,我们可以在backend/views/layout/content.php中发现此小部件的调用= Alert::widget() ?>,这是我们只需要在controller中添加setFlash方法,那么就能在view中接收到:

  public function actionCreate()
    {
        $model = new User();

        if ($model->load(Yii::$app->request->post()) && $model->save()) {
            $session = Yii::$app->session;//session
            $session->setFlash('success', '创建成功');//添加flash
            return $this->redirect(['index']);
        } else {
            return $this->render('create', [
                'model' => $model,
            ]);
        }
    }

捕捉到的:(adminLTE的alert样式颜色就是这么深,而Yii框架自带的颜色虽然浅,但是与此后台框架的颜色也不搭配)

进一步扩展就是,如果是成功的提示,那我5s后可以隐藏,那可以这样设置,在backend/views/layout/content.php中添加下面渐隐的js代码

//这是一段,在显示

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
C++ 设计模式与软件架构
C++ 设计模式与软件架构

本专题深入讲解 C++ 中的常见设计模式与架构优化,包括单例模式、工厂模式、观察者模式、策略模式、命令模式等,结合实际案例展示如何在 C++ 项目中应用这些模式提升代码可维护性与扩展性。通过案例分析,帮助开发者掌握 如何运用设计模式构建高质量的软件架构,提升系统的灵活性与可扩展性。

7

2026.01.30

c++ 字符串格式化
c++ 字符串格式化

本专题整合了c++字符串格式化用法、输出技巧、实践等等内容,阅读专题下面的文章了解更多详细内容。

3

2026.01.30

java 字符串格式化
java 字符串格式化

本专题整合了java如何进行字符串格式化相关教程、使用解析、方法详解等等内容。阅读专题下面的文章了解更多详细教程。

1

2026.01.30

python 字符串格式化
python 字符串格式化

本专题整合了python字符串格式化教程、实践、方法、进阶等等相关内容,阅读专题下面的文章了解更多详细操作。

1

2026.01.30

java入门学习合集
java入门学习合集

本专题整合了java入门学习指南、初学者项目实战、入门到精通等等内容,阅读专题下面的文章了解更多详细学习方法。

20

2026.01.29

java配置环境变量教程合集
java配置环境变量教程合集

本专题整合了java配置环境变量设置、步骤、安装jdk、避免冲突等等相关内容,阅读专题下面的文章了解更多详细操作。

16

2026.01.29

java成品学习网站推荐大全
java成品学习网站推荐大全

本专题整合了java成品网站、在线成品网站源码、源码入口等等相关内容,阅读专题下面的文章了解更多详细推荐内容。

18

2026.01.29

Java字符串处理使用教程合集
Java字符串处理使用教程合集

本专题整合了Java字符串截取、处理、使用、实战等等教程内容,阅读专题下面的文章了解详细操作教程。

3

2026.01.29

Java空对象相关教程合集
Java空对象相关教程合集

本专题整合了Java空对象相关教程,阅读专题下面的文章了解更多详细内容。

6

2026.01.29

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号