这里有新鲜出炉的精品教程,程序狗速度看过来!
Yii 2 完全根据 Yii 1.1 版本重写,后者是最流行的 PHP 框架之一。Yii 2 继承了 Yii 的简洁、快速、和高扩展性。Yii 2 需要 PHP 5.4,并且拥有现代 web 应用开发中最好的实例和协议。
Bootbox.js 是一个小型的 JavaScript 库用来创建简单的可编程对话框,基于 Twitter 的 Bootstrap 开发。今天我们就来研究下,如何使用 bootbox 插件来实现自定义弹窗。
本次尝试了一个新的小插件 "bootbox"。
Yii2 中使用了 Bootstarp,让界面更美观,可是美中不足的是,在 Gridview 表格的 Action 里,删除功能的弹窗实在有点与 Bootstrap 违和,网上找到了一种解决方案,分享下使用此插件的过程。
Bootbox.js,是一个小型的 JavaScript 库用来创建简单的可编程对话框,基于 Bootstrap 的 Modal(模态框)来创建。
官方说明
http://bootboxjs.com/v3.x/index.html
Bootbox.js 下载
我们可以在 GitHub 上找到开源的 bootbox.js 下载
https://github.com/makeusabrew/bootbox
如何使用此插件?
结合 Yii2 的 GridView,我们来自定义 Bootbox 样式的弹窗:
一、覆盖 yii.js 模块
Yii2 自带的 yii.js 中定义了生成 confirm 对话框,以及执行 action 操作。
我们可以用过覆盖 js 方法来达到目的。
在 @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;
- }
二、注册你的资源包
需要注册 bootbox.js 和 main.js 文件。
修改文件:@app/assets/Assets.php
代码如下:
- namespace backend\assets;
- use yii\web\AssetBundle;
- 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 = ['yii\web\YiiAsset', 'yii\bootstrap\BootstrapAsset', ];
- }
三、自定义 Modal 框
了解下 bootbox.js 源码,可以知道 bootbox.js 使用的是 bootstarp 的 modal 框,我们可以根据需求
修改 bootbox.js 源码中的 "templates" 变量,自定义 Modal 样式。
看下对比结果:
修改前:
修改后:
瞬间舒服多了,弹窗功能变的不再那么违和。类似这样的弹窗插件有很多,我想可以用同样的方法来实现使用其他的插件。
来源: http://www.phperz.com/article/17/0716/271999.html