`
LeeYee
  • 浏览: 72650 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

基于jQuery的简单消息框MsgBox插件

阅读更多

最新内容请查看:http://leeyee.github.io/blog/2012/05/04/jquery-msgbox-plugin

最新版本可在https://github.com/oxcow/MsgBox-jQuery-Plugin/tags 下载

 

 

该项目源代码可通过https://github.com/oxcow/MsgBox.git 获取

 

jQuery MsgBox Plugin 提供四个插件方法:

  1. jmask  遮罩层
  2. junmask  关闭遮罩层
  3. jalert  基于div的消息提醒框
  4. jconfirm  基于div的消息确认框
jmask(options)
移动目标元素对象,使其显示在遮罩层正中央。 jmask  接受一个参数

 

options 该参数为对象类型。用来设置遮罩层默认全局属性 属性 类型 默认值 描述
bgcolor string 'rgba(165, 165, 165, 0.8)' 遮罩层背景色.IE对不支持rgba

Example:

$("#jmaskDemo").jmask();
$("#jmaskDemo").jmask({bgcolor:'pink'});

SourceCode:

					
$("#jmask_Demo").bind("click", function() {
	var _bgcolor = $("#_bgcolor").val();
	if (_bgcolor) {
		$("#jmaskDemo").jmask({
			bgcolor : _bgcolor
		});
	} else {
		$("#jmaskDemo").jmask();
	}
});

junmask()
取消使用 jmask  方法遮罩的目标元素,并隐藏目标元素。该方法不接受参数

Example:

$("#jmaskDemo").junmask();

SourceCode:

$("#jmaskDemo").bind("click", function() {

$("#jmaskDemo").junmask();
});
		
jalert(msg,options)
打开一个消息框。 jalert  接受两个参数

 

msg 消息框显示的消息內容
options 该参数为对象类型,用来设置消息框全局属性 属性 类型 默认值 描述
title string '消息框' 消息框标题
width int 320 消息框宽
height int 240 消息框高
mask boolean true 是否需要遮罩层
maskcolor string 'rgba(165, 165, 165, 0.8)' 遮罩层背景色。
当mask为true时有效

Example:

$("#jalertDemo").jalert('jalert demo 测试');
$("#jalertDemo").jalert('jalert demo 测试',{
title : 'hello jalert',
width : 300,
height : 250,
mask : false
});

SourceCode:

$("#jalertDemo").bind("click",function(){
	$(this).jalert('jalert demo 测试');
});
$("#jalertDemo1").bind("click",function(){
	$(this).jalert('jalert demo 测试',{ 
		title : '自定义标题', 
		width : 300, 
		height : 250, 
		mask : false
	});
});		

jconfirm(msg,url,options)
打开一个消息框。 jalert  接受三个参数

 

msg 消息框显示的消息內容
url 消息确认后的跳转地址。使用window.local.href 跳转
options 该参数为对象类型,用来设置消息确认框全局属性 属性 类型 默认值 描述
title string '消息框' 消息框标题
width int 320 消息框宽
height int 240 消息框高
mask boolean true 是否需要遮罩层
maskcolor string 'rgba(165, 165, 165, 0.8)' 遮罩层背景色。
当mask为true时有效

Example:

$("#jconfirmDemo").jconfirm('jconfirm demo 测试',
'http://www.163.com');
$("#jconfirmDemo").jconfirm('jconfirm demo 测试',null,{
title : 'hello jconfirm',
width : 400,
height : 300,
maskcolor : 'pink'
});

SourceCode:

$("#jconfirmDemo").bind("click",function(){
	$(this).jconfirm('jconfirm demo 测试',

'http://www.163.com');
});
$("#jconfirmDemo1").bind("click",function(){
	$(this).jconfirm('jconfirm demo 测试',null,{ 
		title : '自定义标题', 
	        width : 400, 
		height : 300, 
		maskcolor : 'pink'
	});
});

 

0
0
分享到:
评论
3 楼 LeeYee 2012-07-24  
zz894571429 写道
我把你的oxcow-MsgBox-jQuery的js,封装到我的js代码Opacity失效

请下载最新版本尝试
https://github.com/oxcow/MsgBox-jQuery-Plugin/tags
2 楼 zz894571429 2012-07-19  
我把你的oxcow-MsgBox-jQuery的js,封装到我的js代码Opacity失效
1 楼 xiaoxiaozhu 2012-06-14  
 

相关推荐

    基于jQuery的自定义消息框插件

    jQuery MsgBox Plugin 提供四个插件方法: jmask 遮罩层 junmask 关闭遮罩层 jalert 基于div的消息提醒框 jconfirm 基于div的消息确认框 具体使用请查看博文 http://blog.csdn.net/oxcow/article/details/7649614

    jquery仿QQ消息框

    综上所述,实现“jquery仿QQ消息框”涉及到jQuery的选择器、DOM操作、事件处理、动画、CSS样式设计以及可能的插件化开发等多个方面。通过熟练掌握这些技术,我们可以创建出功能强大、用户体验良好的消息提示组件。在...

    jquery 消息提示框

    总结来说,"jQuery消息提示框"是一个功能强大的插件,能够方便地在网页中添加各种类型的消息提示,通过简单的API调用和配置,就能实现丰富的交互效果。无论是在简单的信息展示还是复杂的用户交互场景中,都能发挥其...

    一个消息提示框(jquery的插件)

    标题中的“一个消息...总的来说,这个jQuery消息提示框插件提供了一种简便的方式来增强网页的用户交互体验,通过CSS和JavaScript的结合,开发者可以轻松地创建各种风格的消息提示,并且有源码可查,方便定制和优化。

    jquery提示框小插件

    常规提示框通常用于向用户显示简单的信息,如确认消息、错误提示或成功通知。通过jQuery,我们可以快速创建具有关闭按钮的提示框,或者自定义提示框的样式和内容,以满足不同的设计需求。 其次,加载框在网页加载...

    各种msgbox的弹出窗口

    在这个场景中,提到的文件列表指向了一个基于jQuery的msgbox插件实现。 `jquery.msgbox.css`和`jquery.msgbox.js`是这个msgbox插件的核心文件,分别包含了样式表和JavaScript代码。`jquery.msgbox.5.0.html`可能是...

    Jquery.Messager弹出消息插件

    jQuery.Messager是一款基于jQuery库的弹出消息插件,设计灵感来源于MSN的对话提示效果。它能够帮助开发者在网页中轻松实现各种类型的提示信息,如警告、成功、错误等,为用户提供直观且友好的交互体验。这个插件的...

    一个简单JQuery的MessageBox插件

    通过调用$.msgBox()函数,可以轻松弹出一个消息框。例如: ```javascript $.msgBox({ type: "info", // 消息类型,可以是"info", "warning", "error", "confirm" title: "提示信息", // 对话框标题 content: ...

    jquery-msgbox-selection:带有选择的jQuery MsgBox

    今天我们要探讨的是一个名为"jquery-msgbox-selection"的jQuery插件,它为传统的MsgBox增添了选择功能,使得消息提示不再只是简单的确认或取消,而是能够提供更加丰富的用户交互体验。 首先,让我们了解什么是...

    jquery消息提示窗口

    在上述代码中,我们定义了一个`.msgBox()`方法,根据传入的选项创建一个带有不同样式的消息框,并在指定时间后自动淡出消失。这样,只需几行代码,就能在任何支持jQuery的浏览器中实现消息提示功能。 调用这个插件...

    漂亮的js jquery ajax对话提示框

    **JS jQuery AJAX 对话提示框详解** 在网页开发中,为用户提供实时反馈是提升用户体验的关键。`jQuery` 提供了一种高效、灵活的方式来处理页面上的交互,而 `jQuery AJAX` 则是其强大的异步通信工具,使得无需刷新...

    jquery 实现的漂亮的弹框提示

    例如,`$.msgBox({content: "你的消息", type: "info"})` 可以创建一个显示“你的消息”的信息提示框。`type` 参数可以设置为 `"info"`(信息)、`"warning"`(警告)、`"error"`(错误)等。 3. **自定义样式**:`...

    web端信息提示框

    总的来说,"web端信息提示框"是一个强大的工具,它结合了jQuery Dialog插件的优势,为开发者提供了创建个性化信息提示框的能力。通过对Dialog的深入理解和应用,可以提升前端应用的用户体验,同时也可以简化开发流程...

    一款腾讯UED设计的提示插件

    【标签】:“jquery插件”表明该提示插件是基于JavaScript库jQuery开发的。jQuery是一个高效、简洁的JavaScript库,简化了HTML文档遍历、事件处理、动画设计和Ajax交互。由于jQuery的广泛使用,这款提示插件的引入和...

    jquery实现的相册特效

    在提供的文件`msgbox.js`中,可能包含的是一个消息框插件,它通常用于弹出提示、警告或确认对话框。在相册应用中,这样的插件可以用来显示图片信息、错误提示或用户确认操作。将此类插件与相册特效结合起来,可以...

Global site tag (gtag.js) - Google Analytics