Zebra_Dialog 弹出层插件
. Default dialog box, no custom settings. Click here to open.
$.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and highly configurable dialog box plugin for jQuery'); . The five dialog box types, with titles: error, warning, question, information and confirmation.
// this example is for the "error" box only
// for the other types the "type" property changes to "warning", "question", "information" and "confirmation"
// and the text for the "title" property also changes
$.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and highly configurable dialog box plugin for jQuery', {
'type': 'error',
'title': 'Error'
}); . Custom buttons and the callback function. Click here to open.
Note that the onClose event is executed *after* the dialog box is closed! see the next example for executing functions *before* the closing of the dialog box
$.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and highly configurable dialog box plugin for jQuery', {
'type': 'question',
'title': 'Custom buttons',
'buttons': ['Yes', 'No', 'Help'],
'onClose': function(caption) {
alert((caption != '' ? '"' + caption + '"' : 'nothing') + ' was clicked');
}
}); 3.1 Custom buttons with attached callback functions. Click here to open.
Note that the callback functions attached to custom buttons are executed *before* the dialog box is closed and as soon as a button is clicked! see the previous example for executing functions *after* the closing of the dialog box
$.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and highly configurable dialog box plugin for jQuery', {
'type': 'question',
'title': 'Custom buttons',
'buttons': [
{caption: 'Yes', callback: function() { alert('"Yes" was clicked')}},
{caption: 'No', callback: function() { alert('"No" was clicked')}},
{caption: 'Cancel', callback: function() { alert('"Cancel" was clicked')}}
]
}); . Position the dialog box in the top-right corner. Click here to open.
$.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and highly configurable dialog box plugin for jQuery', {
'title': 'Custom positioning',
'position': ['right - 20', 'top + 20']
}); . Use as a notification widget - no buttons and close automatically after seconds.
Note how the plugin needs to be instantiated with the "new" keyword or only the last opened box will close!
Click here to open.
new $.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and highly configurable dialog box plugin for jQuery', {
'buttons': false,
'modal': false,
'position': ['right - 20', 'top + 20'],
'auto_close':
}); . External content loaded via AJAX. Click here to open.
new $.Zebra_Dialog('<strong>Some dummy content:</strong><br><br>', {
'source': {'ajax': 'ajax.html'},
width: ,
'title': 'External content loaded via AJAX'
}); 6.1 External content loaded in an iFrame. Click here to open.
new $.Zebra_Dialog('<strong>Content loaded via AJAX:</strong>', {
source: {'iframe': {
'src': 'http://en.m.wikipedia.org/wiki/Dialog_box',
'height':
}},
width: ,
title: 'External content loaded in an iFrame'
}); . Customizing the appearance - make the title bar have a dark-blue background and show a custom icon! The CSS is
/* Notice how we're targting the dialog box's title bar through the custom class */
.myclass .ZebraDialog_Title { background: #DEDEDE; border-bottom: 1px solid # }
.myclass .ZebraDialog_Body { background-image: url('coffee_48.png') }
Click here to open.
new $.Zebra_Dialog('Buy me a coffee if you like this plugin!', {
'custom_class': 'myclass',
'title': 'Customizing the appearance'
});
(function ($) {
$.psAlert = function (info, type,setting,title) {
var alerttype = '';
var alerttitle = '';
switch (type) {
case :
alerttype = 'error';
alerttitle = '错误提示';
break;
case :
alerttype = 'warning';
alerttitle = '警告提示';
break;
case :
alerttype = 'information';
alerttitle = '消息提示';
break;
case :
alerttype = 'confirmation';
alerttitle = '正确提示';
break;
default:
alerttitle = title;
break;
}
var defaults = {
'type': alerttype,
'title': alerttitle
};
var opts = $.extend(defaults, setting);
new $.Zebra_Dialog(info, opts);
};
})(jQuery);
//$.psAlert('请输入回复内容!', 2); //if (result.DoFlag) {
// $.psAlert(result.DoResult, 4, {
// 'buttons': [
// {
// caption: '确定', callback: function () {
// location.reload();
// }
// }
// ]
// });
//} //$.psAlert(rejectcontentbox, 0, {
// 'modal': true,
// 'overlay_close': false,
// 'custom_class': 'dialog',
// 'overlay_opacity': 0.5,
// 'width': 300,
// 'height': 200,
// 'buttons': [
// {
// caption: '确认',
// callback: function () {
// refusedReason = $.trim(($("#refusedre").val()));
// if ($.trim(refusedReason).length == 0) {
// $.psAlert('请注明拒绝理由!', 2);
// } else {
// auditComment();
// }
// }
// }
// ]
//}, "拒绝理由");
Zebra_Dialog 弹出层插件的更多相关文章
- jQuery弹出层插件popbox
都什么年代了,还自己写弹出层插件!是的,①自己写的自己好控制②可定制性高③兼容低版本IE 本插件有以下特性: 样式分离,可定制,纯净无图片 可自定义按钮及按钮的样式.点击事件 可指定选择器选择页面元素 ...
- 写了一个jquery的 弹出层插件。
下载地址:http://pan.baidu.com/s/1eQ26CMm ps:ajax加载做的,要有环境才能正常运行哦! //这是一个以ajax加载显示弹出层插件 参数(option): widt ...
- 效果非常好的 Jquery弹出层插件 jQuery Sweet alert
介绍款交互性非常不错的jquery弹出层插件,支持消息提示.错误提示.确认框提示等. 交互式体验感非常不错,比如咱们现在体验非常不错的微信支付.支付宝等完成后的效果. 不过本插件至少支持IE9+ Jq ...
- Jquery学习之路(三) 实现弹出层插件
弹出层的应用还是比较多的,登陆,一些同页面的操作,别人的总归是别人的,自己的才是自己的,所以一直以来想写个弹出层插件.不多废话,直接开始吧! 不想看可以在这里直接下载源码xsPop.zip 1:遮罩层 ...
- 在Vue中使用layer.js弹出层插件
layer.js(mobile)是一个小巧方便的弹出层插件,在之前的apicloud项目中被大量使用,但最近对apicloud的IDE.非常不友好的文档和极低的开发效率深感厌烦,决定弃用然后转向Vue ...
- layer/layui弹出层插件bug
<button class="layui-btn" lay-submit lay-filter="formDemo" id="layui-btn ...
- 网站开发常用jQuery插件总结(二)弹出层插件Lightbox_me
网站开发过程中,为了增加网站交互效果,我们有时需要在当前页面弹出诸如登陆.注册.设置等窗口.而这些窗口就是层,弹出的窗口就是弹出层.jQuery中弹出层插件很多,但有些在html5+css3浏览器下, ...
- 网站开发常用jQuery插件总结(二)弹出层插件Lightbox
网站开发过程中,为了增加网站交互效果,我们有时需要在当前页面弹出诸如登陆.注册.设置等窗口.而这些窗口就是层,弹出的窗口就是弹出层.jQuery中弹出层插件很多,但有些在html5+css3浏览器下, ...
- webui-popover 一个轻量级的jquery弹出层插件
该提示框插件可以和Bootstrap完美结合,但是并不一定需要和Bootstrap一起使用.它支持IE7以上的浏览器. 首先要引入需要的css js 文件 <link rel="s ...
随机推荐
- 烂泥:【解决】Ubuntu下使用SSH连接centos系统很慢
本文由秀依林枫提供友情赞助,首发于烂泥行天下. 这几天在Ubuntu下使用SSH连接centos系统,发现连接很慢.建议一个连接大约需要30s.很是坑爹,如下: 后来查询相关资料,发现这个是Ubunt ...
- 在 ServiceModel 客户端配置部分中,找不到引用协定“WebServiceTest.WebServiceSoap”的默认终结点元素。这可能是因为未找到应用程序的配置文件,或者是因为客户端元素
原文 http://blog.csdn.net/bugdemo/article/details/9083497 主题 技术 在引用WebService后,程序运行到实例化WebService时报错, ...
- private成员变量真的私有吗?(用指针刨他祖坟)
今天写程序时突然想到的,为什么不用指针去获取类的成员变量呢.于是做了这个实验.首先定义了一个类: class Test { private: int i; char c; int* p; public ...
- java常用方法总结
最近打算换工作,还是需要补一下面试的基础知识,写了一些面试中可能会用到的常用算法.方法,以便复习 //99乘法表 /** * 1*1 * 1*1 1*2 * 1*1 1*2 1*3 * …… * */ ...
- java截取日期范围并计算相差月数
前两天,媳妇单位让整理excel的某一个单元格内两个日期范围的相差月数,本人对excel操作不是很熟练,便写了个小程序计算了一下,原始需求如下: 计算投资期限的范围,并得到期限范围的相差月数 思路1: ...
- linux下安装+配置+卸载jdk
一. 解压安装jdk在shell终端下进入jdk1.7.0_55.bin文件所在目录, 执行命令 ./jdk1.7.0_55.bin 这时会出现一段协议,连继敲回车,当询问是否同意的时候,输入yes, ...
- 边工作边刷题:70天一遍leetcode: day 76
Count Univalue Subtrees 要点:检测条件比较有意思:因为可能的情况比较多,只要违反了任意一条就return False,所以可以只考虑False的情况,最后return True ...
- POJ 2891 Strange Way to Express Integers【扩展欧几里德】【模线性方程组】
求解方程组 X%m1=r1 X%m2=r2 .... X%mn=rn 首先看下两个式子的情况 X%m1=r1 X%m2=r2 联立可得 m1*x+m2*y=r2-r1 用ex_gcd求得一个特解x' ...
- AC日记——机器翻译 洛谷 P1540
题目背景 小晨的电脑上安装了一个机器翻译软件,他经常用这个软件来翻译英语文章. 题目描述 这个翻译软件的原理很简单,它只是从头到尾,依次将每个英文单词用对应的中文含义来替换.对于每个英文单词,软件会先 ...
- C# 编码约定(C# 编程指南)
C#注释约定 将注释放到另一行,而不要放在代码行的末尾. 以大写字母作为注释文本的开头. 以句点结束注释文本. 在注释分隔符 (//) 和注释文本之间插入一个空格,如以下示例所示. // The fo ...