`
niqingyang
  • 浏览: 44025 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

YII 对话框

    博客分类:
  • YII
阅读更多

感觉后台的弹出窗口一直是系统功能实现的弱项,由于系统大部分采用了layer,但是layer实现ajax加载网页内容的显示效果与系统兼容性不是很好,导致每个升级到弹出窗口的展现都需要前端人员参与设计,十分耗时,所以对前端的代码进行了简单的封装,使用方式如下:

1.依赖jquery.method.js,后台作为公共函数已经引入,无需自己调用。

2.使用方式:

(一)最常用,也是非常建议的ajax加载网页内容:

		$("body").on("click", ".offsale-goods", function() {
			var id = $(this).data("id");
			
			$.modal({
				// 标题
				title: '违规商品',
				// ajax加载的设置
				ajax: {
					url: '/goods/publish/illegal',
					data: {
						id: id
					}
				},
			});
			
		});

 (一)直接引用页面元素:

		$.modal({
			title: '违规商品',
			content: '123123',
		});

 

API:

1. $.modal(options)可以打开弹出窗口。

2. options默认值为:

		var defaults = {	
			id: uuid(),
			title: false,
			content: '',
			footer: false,
			width: false,
			height: false,
			// 用于存放一些交互用的数据
			params: {},
			ajax: false,
			// 触发器,会在触发器的data中存放modal
			trigger: false,
			// 在调用 show 方法后触发。
			onshow: null,
			// 当调用 hide 实例方法时触发。
			onhide: null,
		};

 3.获取元素绑定的Modal:$.modal(jquery对象),用于获取触发器、Modal中的元素所绑定的Modal对象。

4.常用函数:

打开模式对话框,会触发onshow的回调函数
modal.show()

隐藏模式对话框,会触发onhide的回调函数
modal.hide()

切换显示隐藏的状态
modal.toggle()

销毁模式对话框
modal.close()

设置宽度
modal.width(宽度)

设置高度
modal.height(高度)

// 设置标题
modal.title(标题)

添加按钮
modal.addButton({
id: 按钮ID,
text: 按钮显示的文本,
btn_class: 'btn btn_primary' // 按钮的样式
click: null, // 按钮的点击事件,默认实现了点击隐藏的事件
});

// 根据按钮ID移除按钮
modal.removeButton(id);

 

 5.常见问题:

1.点击某个按钮或者超链接触发打开了一个Modal,那么想下次点击再次打开同一个Modal的话可以如下操作:

$("#按钮").click(function(){

var modal = $.modal($(this));


if(modal){
  modal.show();
}else{
 modal = $.modal({
  //创建一个新的对话框
});
}

});

 

2.如何在打开的对话框中获取Modal对象?

为了了能够灵活操作对话框中的页面元素,建议在Modal的内容页面顶部加入

{$uuid = uuid()}

这样来创建一个唯一标识,并且赋值给对话框内容页的外层容器,容器的ID可以设置为$uuid
例如:<div id="{$uuid}">

这样在页面中操作时可以通过 $("#{$uuid}").find("你要查找的元素"),这种方式可以确保不会和其他页面内相同的元素发生冲突。

获取当前页面所属的Modal对象如下:

var modal = $.modal($("#{uuid}"));

然后就可以随意使用了

 

3.对话框如何和打开对话框的页面进行参数的交互?

很多时候需要将页面的一些参数传递给Modal对象,可以通过Modal对象的params属性作为一个间接的容器,但是大多时候Modal对象和打开的页面就在同一个页面,只要变量的范围允许,都可以引用的。

 

分享到:
评论

相关推荐

    Yii2 Starter Kit 2.3.2

    AdminLTE包含各种图表、表单元素、导航选项、模态对话框等组件,这些都可以直接在Yii2 Starter Kit中使用,大大减少了定制后台界面的工作量。 Yii2 Starter Kit 2.3.2 版本中,包含了以下主要特性: 1. **安装与...

    Yii2框架的SweetAlert小部件_PHP_下载.zip

    总的来说,这个压缩包提供的Yii2-SweetAlert小部件允许开发者轻松地在Yii2应用中集成美观的SweetAlert对话框,提升应用的交互性和用户体验。通过理解和实践这些知识点,你可以更好地利用这个工具来增强你的PHP项目。

    yii2-dialog:一种扩展,用于包装Yii 2.0框架的bootstrap3-dialog

    yii2-对话框 Yii Framework 2.0的小部件组件,可轻松配置和初始化弹出通知对话框。 它为本机javascript警报,确认和提示对话框提供了一个polyfill。 它包括对通过呈现丰富对话框的内置支持,这使得使用Bootstrap的...

    yii2-easyui:适用于Yii2的Jquery Easyui插件

    `yii2-easyui`是将EasyUI集成到Yii2框架中的一个插件,使得开发者可以方便地在Yii2项目中利用EasyUI的功能。 在使用`yii2-easyui`时,首先需要了解Yii2的基本架构,包括MVC(模型-视图-控制器)模式、组件系统以及...

    EUpdateDialog:Yii 扩展,它允许使用对话框窗口创建更新删除模型

    电子更新对话框 EUpdateDialog是 Yii 框架的扩展。 此扩展允许使用 jQuery UI 对话框运行控制器操作。 它用于扩展您的应用程序以允许简单的 CRUD(创建-读取-更新-删除)操作或任何其他返回正确 JSON 响应的操作。 ...

    yii2-adminlte:带有 AdminLTE 主题的 Yii2 基本模板

    JavaScript 在这个项目中扮演着重要的角色,AdminLTE 使用了 jQuery 作为基础库,同时也集成了其他库如 Chart.js 和 Morris.js 来实现图表展示,以及 SweetAlert 提供更友好的提示对话框。你可以通过修改 JavaScript...

    YII2框架中使用yii.js实现的post请求

    只要在合适的地方调用它的方法就可以了,可以说yii2是个可以开箱即用的框架,你可以用它很快的实现一个需要的功能:比如在页面中放置一个删除按钮,点击按钮发送post请求,弹出确认对话框。如果没有yii\helpers\Html...

    yii2-ajaxy:Yii 2 Actions 通过 Bootstrap Modals 和 Ajax 扩展

    Nozzha Ajaxy 2.0:通过 Ajax for Yii 2 的操作对话框Nozzha Ajaxy 是一个扩展,它提供了一个简单的 API 来使用 Bootstrap 插件通过页面中的对话框来显示操作。 Ajaxy 旨在显示创建或更新操作对话框。 换句话说,...

    Yii框架弹出窗口组件CJuiDialog用法分析

    Yii框架中的CJuiDialog组件是一个用于创建弹出对话框的工具,它是基于jQuery UI库的Dialog组件。本文将深入探讨CJuiDialog的用法和相关属性。 首先,使用CJuiDialog需要在视图文件中调用`$this-&gt;beginWidget()`和`$...

    Yii框架弹出框功能示例

    在Yii中,弹出框(对话框)通常通过使用CJuiDialog组件实现,该组件是基于jQuery UI库的Dialog插件封装。本文将深入探讨如何在Yii框架中实现弹出框功能,并通过实例代码进行解析。 首先,让我们了解CJuiDialog的...

    yii2-standard:集成 yii2-admin

    “yii2-admin”扩展通常会利用JavaScript进行前端交互和动态效果的实现,例如表单验证、AJAX请求、模态对话框等。Yii 2框架自带的Asset Manager可以方便地管理JavaScript库和CSS样式文件。在“yii2-admin”中,你...

    yii2-pnotify

    8. **模态对话框**:虽然PNotify主要用于非模态通知,但通过自定义配置,可以实现类似模态对话框的效果,提高用户交互体验。 9. **优化性能**:为了确保性能,应合理使用PNotify,避免过多的通知导致页面负担过重。...

    Yii2.0中使用js异步删除示例

    在Yii2.0中实现js异步删除主要涉及到以下几个知识点: 1. 后端控制器的实现:在Yii2.0中,控制器负责处理用户的请求和执行相应的业务逻辑。在异步删除操作中,需要创建一个控制器动作(action)来处理删除请求。在...

    Yii视图CGridView实现操作按钮定义地址示例

    在Yii框架中,CGridView是用于展示数据集的强大的组件,尤其适合于表格形式的数据展示。这个组件提供了很多自定义选项,包括操作列(Action Column)中的按钮,如查看、编辑和删除等。本篇文章将深入讲解如何在...

    Yii2使用Bootbox插件实现自定义弹窗

    Bootbox.js 是一个小型的 JavaScript 库用来创建简单的可编程对话框,基于 Twitter 的 Bootstrap 开发。今天我们就来研究下,如何使用bootbox插件来实现自定义弹窗。

    Yii-自定义删除确认弹框(zyd)jquery实现代码

    最后,这个功能的效果图展示了在用户尝试删除数据时,会弹出一个具有指定样式和内容的确认对话框,用户可以决定是否继续进行删除操作。 总的来说,通过这种方式,开发者可以在Yii应用中轻松实现一个自定义的删除...

    easyUI插件

    EasyUI 是一套用于快速开发 Web 应用的 UI 框架,它提供了丰富的组件,如表格、树形结构、对话框、表单等,帮助开发者快速构建具有专业外观和交互功能的网页应用。其设计目标是使开发者能够专注于业务逻辑,而无需...

Global site tag (gtag.js) - Google Analytics