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 ...
随机推荐
- 将Session写入数据库
使用session_set_save_handler()函数,将Session的内容写入数据库 <?php /* *@author Fahy *@link http://home.cnblogs ...
- Eclipse 启动Tomcat 超时报错的解决方案
在用eclipse开发项目 用tomcat发布项目的时候 会提示超时, Server Tomcat v7.0 Server at localhost was unable to start wit ...
- hdu 3987 Harry Potter and the Forbidden Forest 求割边最少的最小割
view code//hdu 3987 #include <iostream> #include <cstdio> #include <algorithm> #in ...
- HDU 1232 畅通工程(并查集)
畅通工程 Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Problem Des ...
- OpenGL 学习笔记 01 环境配置
以下教程仅适用于Mac下的Xcode编程环境!其他的我也不会搞. 推荐教程:opengl-tutorial 本项目Github网址 OpenGL太可怕了...必需得把学的记下来,不然绝壁 ...
- 10个值得深思的PHP面试问题
本文所罗列的问题虽然看似简单,但是每个背后都涵盖了一个或几个大家容易忽视的基础知识点,希望能够帮助到你的面试和平时工作. Q1 第一个问题关于弱类型 $str1 = 'yabadabadoo'; $s ...
- python Basic usage
__author__ = 'student' l=[] l=list('yaoxiaohua') print l print l[0:2] l=list('abc') print l*3 l.appe ...
- 双向广搜 POJ 3126 Prime Path
POJ 3126 Prime Path Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 16204 Accepted ...
- 边工作边刷题:70天一遍leetcode: day 82
Closest Binary Search Tree Value 要点: https://repl.it/CfhL/1 # Definition for a binary tree node. # c ...
- java 14-3 正则表达式的分割
分割功能 String类的public String[] split(String regex) 根据给定正则表达式的匹配拆分此字符串. 例子: 可以用来做年龄段的筛选,比如说,我要筛选18-26之间 ...