`
Mac_J
  • 浏览: 17877 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

JQuery 基础对话框插件 MagicDialog 发布!

阅读更多
MagicDialog 发布!方便扩展和样式自定义。详细内容请访问 http://www.boarsoft.com



<script type="text/javascript">
$(function(){
$('.dlgDemoBtn').click(function(){
	var el = $(this), act = el.attr('action');
	switch(act){
		case 'basic':
			$('<div></div>').mac('dialog',{
				title: 'Hello!',
				model: true,
				autoOpen: true,
				width: 200,
				draggable: true,
				el: '<p>Hello world!</p><p>I\'m MagicDialog!</p>'
			});
			break;
		case 'extended':
			mac.opendlg({
				title: 'Hello!',
				message: 'Press {0} can close me.',
				params: ['<b>ESC/Enter</b>'],
				buttons: [{
					text: 'OK',
					click: function(d){
						d.close();
					}
				}]
			});
			break;
		case 'wait': 
			var h = mac.wait('Count 3 sec to close.');
			window.setTimeout(function(){
				h.close();
			}, 3000);
			break;
		case 'alert': 
			mac.alert('Hello!');
			break;
		case 'confirm': 
			mac.confirm('<p>Are you sure?</p>', function(){
				alert('You clicked yes!');
			}, null);
			break;
		case 'customize': 
			mac.confirm('<p>Are you sure?</p>', null, null, [{
				text: 'Close',
				click: function(d){
					d.close();
				}
			},{
				text: 'Yes, I\'m sure?',
				click: function(d){
					d.close();
				}
			}]);
			break;
	}
});
});
</script>
<button class="dlgDemoBtn" action="basic">Basic</button>
<button class="dlgDemoBtn" action="extended">Extended</button>
<button class="dlgDemoBtn" action="wait">Spinner</button>
<button class="dlgDemoBtn" action="alert">Alert</button>
<button class="dlgDemoBtn" action="confirm">Confirm</button>
<button class="dlgDemoBtn" action="customize">Customize</button>

  • 大小: 4.4 KB
分享到:
评论
1 楼 游其是你 2012-06-13  
把官网的照抄下来有意思吗?有本事你运行起来看看!

相关推荐

    简约扁平风格jQuery确认对话框插件

    本文将深入探讨“简约扁平风格jQuery确认对话框插件”,这是一个高效且设计精良的工具,旨在增强用户体验,为网站或应用程序添加优雅的确认对话框。 首先,我们来理解“确认对话框”的概念。在用户界面设计中,确认...

    jQuery确认对话框插件

    本篇文章将详细讲解一个特定的jQuery插件——"jQuery确认对话框插件",它是JavaScript开发中用于创建模态框和弹出框的一种工具。 在Web应用程序中,确认对话框通常用于在用户执行关键操作(如删除数据或离开页面)...

    漂亮的jQuery模态消息对话框插件SweetAlert2

    SweetAlert2是一款强大的jQuery模态对话框插件,它的出现是为了替换浏览器中常见的、功能单一的弹出对话框。在网页交互设计日益丰富的今天,SweetAlert2为开发者提供了更加美观且可定制化的提示信息,提升了用户体验...

    jQuery弹窗对话框插件

    **jQuery弹窗对话框插件**是基于JavaScript库jQuery的一款实用工具,主要用于增强网页的用户交互体验。在网页设计和开发中,对话框通常用于显示警告、确认信息、或者进行多步骤操作,而这款插件提供了丰富的功能和...

    带4种特效的轻量级jQuery模态对话框插件

    jDialog是针对jQuery设计的一款轻量级模态对话框插件。模态对话框在网页应用中常用于提示信息、确认操作或显示详细内容,它可以阻止用户与页面其他部分的交互,直到对话框被关闭。jDialog的特点在于其提供了四种不同...

    jQuery确认对话框窗口弹窗插件.zip

    "jQuery确认对话框窗口弹窗插件"就是为了解决网页中需要用户确认操作时的一个常见需求,如删除、保存等关键操作前的二次确认,提供了一个方便的解决方案。 这个插件的核心功能在于它能够创建一个模拟系统级确认...

    基于jquery的 对话框插件jDialog

    `jDialog`是一款基于jQuery的对话框插件,它提供了丰富的功能和自定义选项,使得创建各种类型的对话框变得简单而直观。 1. **jQuery基础** `jQuery`是一款轻量级的JavaScript库,它简化了DOM操作、事件处理、动画...

    jquery移动对话框插件Mobile-SimpleDialog

    jQuery Mobile 提供了基础的对话框功能,但为了满足更复杂的需求,开发者们通常会寻找更为定制化的解决方案,如 "Mobile-SimpleDialog" 这款 jQuery 移动对话框插件。 **1. 插件介绍** "Mobile-SimpleDialog" 是一...

    jQuery通用对话框

    1. 引入jQuery库和对话框插件:在HTML文件中,需要引入jQuery库和对话框插件的JS及CSS文件。 2. 初始化对话框:在DOM加载完成后,通过JavaScript调用对话框插件的初始化方法,设置对话框的基本属性,如宽度、高度、...

    jQuery扁平风格对话框插件Dialogbox.zip

    jQuery Dialogbox是一款基于jQuery库的扁平化设计对话框插件,它提供了丰富的对话框样式和功能,适用于各种用户交互场景。以下是对该插件及其相关知识点的详细说明: 1. **jQuery基础**:Dialogbox是jQuery的一个...

    jquery 仿模态对话框插件

    jquery 仿模态对话框插件 演示: http://blue.bokequn.cn/demos/modalbox/demo/demos.html 主要功能: 1, 模态化显示(背景内容不可编辑) 2, 限制在窗口内拖动. 3, 窗口标题,确定,取消按钮可选择显示与否. 4, ...

    jQuery模态对话框插件jAlert

    **jQuery模态对话框插件jAlert** 在Web开发中,模态对话框是一种常见的交互元素,用于向用户展示重要信息或获取用户输入。jAlert是基于jQuery的一个轻量级插件,它允许开发者轻松创建功能丰富的模态对话框,支持...

    简单的jQuery确认对话框鼠标点击弹出提示对话框插件

    在这个场景中,我们关注的是一个基于jQuery的简单确认对话框插件,这个插件允许开发者在用户点击时弹出提示对话框,以增加用户交互的体验。 确认对话框通常用于在用户执行关键操作前进行确认,如删除数据或离开页面...

    jQuery dialog对话框插件点击弹出对话框代码

    jQuery dialog对话框插件是jQuery UI库中的一个核心组件,用于创建可自定义的模态或非模态对话框。这个插件提供了丰富的功能,包括拖动、调整大小、自动定位以及多种主题样式,使开发者能够轻松地在网页中添加交互式...

    JQuery 模式对话框实例

    在 jQuery 中,实现模式对话框通常依赖于第三方插件,如 jQuery UI 中的 Dialog 组件。尽管 jQuery 自身并不内置对话框功能,但通过与其他库结合,可以轻松创建出功能丰富的对话框效果。 首先,你需要引入 jQuery ...

    ZebraDialog简单实用的jQuery模态对话框插件

    Zebra_Dialog是一款简单实用的jQuery模态对话框插件。用它可以替代原生JavaScript的警告框和确认框,也可以用它来制作消息提示框。它兼容IE6 浏览器,支持Ajax加载内容和iFrame框架等。

    Zebra_Dialog-简单实用的jQuery模态对话框插件

    Zebra_Dialog是一款简单实用的jQuery模态对话框插件。用它可以替代原生JavaScript的警告框和确认框,也可以用它来制作消息提示框。它兼容IE6+浏览器,支持Ajax加载内容和iFrame框架等。

    JQuery 模式对话框DIV

    而jQuery UI则是在jQuery基础上扩展的一套用户界面组件库,包括对话框(Dialog)、拖放(Draggable)、可排序(Sortable)等。 ### 2. 引入jQuery和jQuery UI 首先,确保在HTML文件中引入了jQuery库和jQuery UI库...

Global site tag (gtag.js) - Google Analytics