eziConfirm：jQuery 确认控件
4.72/5 (12投票s)
基于 jQuery 的确认插件，将增强 JavaScript 中内置的确认函数。
引言
这是一个基于 jQuery 的确认插件，旨在增强 JavaScript 中内置的 confirm 函数。
背景
我讨厌 JavaScript 中内置的 confirm 和 alert 函数，所以我最终创建了自己的 confirm 和 alert 函数。
这段代码最初没有准备好公开发布，所以我决定将其转换为一个 jQuery 插件。
现在，我向您介绍 eziConfirm jQuery 插件。
Using the Code
文件
您只需要包含 jQuery、eziconfirm.js 和 eziconfirm.css。
<link rel="stylesheet" type="text/css" href="eziConfirm.css" />
<script type="text/javascript" src="jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="eziConfirm.js"></script>
简单的确认窗口
使用 eziConfirm 最简单的方法是仅使用 FireFunction 参数调用 jqConfirm 插件。
$(document.body).eziConfirm(
{
FireFunction: function () {alert('You Click Yes')}
}
)
自定义按钮
eziConfirm 默认显示两个按钮（是 和 否），但您可以添加自定义按钮。
$(document.body).eziConfirm(
{
Button:
[
{ Title: "Delete", FireFunction: function (){ alert('You Click Delete') } },
{ Title: "Cancle", ClassName: 'red' }
]
}
);
更改标题、描述、宽度和高度
$(document.body).eziConfirm(
{
Title: 'Are you sure you want to delete this file?',
Desc: 'File01.pdf<br/>Type:PDF<br/>Size:40KB',
Width:320,
Height:200,
Button:
[
{ Title: "Delete", FireFunction: function (){ alert('You Click Delete') } },
{ Title: "Cancle", ClassName: 'red' }
]
}
);
隐藏关闭按钮
$(document.body).eziConfirm({
CloseButton: false,
FireFunction: function () { alert('You Click Yes') }
});
用作警告窗口
$(document.body).eziConfirm({
Title: 'Alert Window',
Desc: 'Description Description Description Description
Description Description Description Description',
Button: [{ Title: 'OK', ClassName: 'red'}]
});
用作消息窗口
$(document.body).eziConfirm({
Title: 'Message',
Desc: 'Message Message Message Message Message Message Message Message',
Button: []
});
按钮位置
eziConfirm 支持 4 种不同的按钮定位方式
RenderMode.horizontal：水平渲染按钮RenderMode.vertical：垂直渲染按钮RenderMode.auto：以 n*m 表格渲染按钮RenderMode.manual：以给定的列数渲染按钮
...
RenderMode: RenderMode.horizontal,
...
...
RenderMode: RenderMode.vertical,
...
...
RenderMode: RenderMode.auto,
...
...
RenderMode: RenderMode.manual,
Cols:3,
...
从右到左支持
$(document.body).eziConfirm({
Direction: 'rtl',
FireFunction: function () { alert('You Click Yes') }
});
高级示例：计算器
以下示例展示了 eziConfirm 的许多选项和功能。
$(document.body).eziConfirm(
{
Title: 'Calculator',
Desc: '<div id=\'result\'
style=\'font-weight:bold;font-size:16px;height:22px;background-color:#ffffff\'></div>',
Height: 170,
Width: 240,
RenderMode: RenderMode.manual,
Cols: 4,
ButtonDefault: { Width: 33, AutoClose: false },
Button:
[
{ Title: "1", FireFunction: function () { CalcKeyPress('1') } },
{ Title: "2", FireFunction: function () { CalcKeyPress('2') } },
{ Title: "3", FireFunction: function () { CalcKeyPress('3') } },
{ Title: "AC", ClassName: 'red', FireFunction: function () { CalcKeyPress('ac') } },
{ Title: "4", FireFunction: function () { CalcKeyPress('4') } },
{ Title: "5", FireFunction: function () { CalcKeyPress('5') } },
{ Title: "6", FireFunction: function () { CalcKeyPress('6') } },
{ Title: "+", ClassName: 'red', FireFunction: function () { CalcKeyPress('+') } },
{ Title: "7", FireFunction: function () { CalcKeyPress('7') } },
{ Title: "8", FireFunction: function () { CalcKeyPress('8') } },
{ Title: "9", FireFunction: function () { CalcKeyPress('9') } },
{ Title: "-", ClassName: 'red', FireFunction: function () { CalcKeyPress('-') } },
{ Title: "0", FireFunction: function () { CalcKeyPress('0') } },
{ Title: "*", ClassName: 'red', FireFunction: function () { CalcKeyPress('*') } },
{ Title: "/", ClassName: 'red', FireFunction: function () { CalcKeyPress('/') } },
{ Title: "=", ClassName: 'tra', FireFunction: function () { CalcKeyPress('=') } }
]
}
);
function CalcKeyPress(key) {
switch (key) {
case 'ac':
$('#result').html('');
break;
case '=':
$('#result').html(eval($('#result').html()));
break;
default:
$('#result').html($('#result').html() + key);
break;
}
}
选项
本节描述了 eziConfirm 可用的选项。这些选项通过参数传递给 $('#selector').eziConfirm(options) 函数进行设置。
选项的描述遵循以下约定
attribute: default, // description
var defaultParam = {
Title: "Are You Sure?", //Title of Confirm Window
ClassName : "", // specifies css class for confirm window
Desc: "", // specifies description displayed above buttons
Width: 320, // width of confirm window
Height: 60, // height of confirm window
RenderMode: RenderMode.horizontal, // RenderMode.auto | RenderMode.vertical |
// RenderMode.horizontal | RenderMode.manual:4
Cols: 1, // Number of columns when RenderMode set to manual
Button: [ Button1, Button2, ...] ,
ButtonDefault : {
Width: 100, // Default button width
Height: 18, //Default button height
ClassName: '', //Default button css Class
AutoClose:true, //Default Button Click Action
FireGlobalFunction: false, //Default FireFunction Mode (Global or Local)
FireFunction: function () { } //Default FireFunction
},
FireFunction: function () {} , // Global Fire Function
CloseButton: true, // Show/Hide close button
Direction: 'ltr' // 'ltr' | 'rtl'
};
var Button = {
Title: "Yes", // Title for button
FireGlobalFunction: true , // if true on button click Global FireFunction fired
Width: 100, // Width of button
Height: 18, // Height of button
ClassName: '', // specifies css class for button
AutoClose:true, // if true after clicking button confirm window will close
FireFunction: function () { }}, // Fire function for button
}
代码
下一步？
- 模板基础按钮位置
- 自动关闭计时器
历史
- 2013/02/16：版本 0.2
- 从右到左支持
- 按钮默认选项
- 隐藏/显示关闭按钮的选项
- 新示例（警告、消息等）
- 2013/02/12：首次发布（版本 0.1）