学习从实践开始之jQuery插件开发 对话框插件开发(2)

<style type="text/css">

/*为了避免命名冲突，我们将该插件所有样式都放在该类之下*/
.ctcx-dialog
{
font-size:14px;
}
.ctcx-dialog .mark /*遮罩层样式*/
{
position:absolute;
left:0;
top:0;
background-color:#000;
z-index:99999;
}
.ctcx-dialog .dialog /*对话框样式*/
{
position:fixed;
left:50%;
top:50%;
background-color:#FFF;
z-index:99999;
border:2px solid #000;
padding:2px;
}
.ctcx-dialog .dialog .bar /*对话框标题栏*/
{
height:30px;
background-color:#999;
color:#FFF;
}
.ctcx-dialog .dialog .bar .icon /*对话框标题栏图标*/
{
width:25px;
height:30px;
background-repeat:no-repeat;
background-position:center;
display:inline-block;
}
.ctcx-dialog .dialog .bar .title /*对话框标题栏标题*/
{
width:340px;
height:30px;
line-height:30px;
overflow:hidden;
display:inline-block;
vertical-align:top;
font-weight:bold;
}
.ctcx-dialog .dialog .bar .close /*对话框标题栏关闭按钮*/
{
width:20px;
height:30px;
background-image:url(close.png);
background-repeat:no-repeat;
background-position:center;
display:inline-block;
cursor:pointer;
}
.ctcx-dialog .dialog .container /*对话框内容容器*/
{
margin-top:5px;
overflow:auto;
}
.ctcx-dialog .dialog .container .icon /*对话框内容容器*/
{
background-image:url(icon-big.png);
background-repeat:no-repeat;
background-position:center;
width:48px;
height:48px;
}
.ctcx-dialog .dialog .container .content /*对话框内容容器*/
{
position:relative;
}
.ctcx-dialog .dialog .buttons /*对话框按钮栏*/
{
text-align:center;
margin-top:5px;
height:30px;
position:relative;
bottom:0px;
}
.ctcx-dialog .dialog .buttons a /*对话框按钮*/
{
background-color:#DDD;
color:#000;
text-decoration: none;
display:inline-block;
padding:5px;
}
.ctcx-dialog .dialog .buttons a:hover /*对话框按钮*/
{
background-color:#333;
color:#FFF;
}
.ctcx-dialog .dialog .buttons a:active /*对话框按钮*/{}
</style>

JS部分

复制代码 代码如下:

(function ($) {
$.alert = function (options) {

if (typeof options === 'string') options = { content: options };
var opts = $.extend({}, $.alert.defaults, options);

if (opts.content == null || opts.content.length == 0) return this;

var me = $('<div></div>').addClass('ctcx-dialog').appendTo(document.body);
var doc = $(document);
$('<div></div>').css({ opacity: opts.opacity }).width(doc.width()).height(doc.height()).appendTo(me);
var _dialog_ = $('<div></div>').css({
width: opts.width,
height: opts.height,
marginLeft: 0 - opts.width / 2,
marginTop: 0 - opts.height / 2
}).appendTo(me);
var _bar_ = $('<div></div>').appendTo(_dialog_);

var _titleWidth_ = opts.width - 0;
if (opts.icon != null) {
$('<div></div>').css('background-image', 'url(' + opts.icon + ')').appendTo(_bar_);
_titleWidth_ -= 25;
}
if (opts.close) _titleWidth_ -= 20;
$('<div></div>').css({ width: _titleWidth_ }).html(opts.title).appendTo(_bar_);
if (opts.close) {
$('<div></div>').click(function () {
me.remove();
}).appendTo(_bar_);
}

var _containerHeight_ = opts.height - 40;
var _container_ = $('<div></div>').appendTo(_dialog_);
var _contentCss_ = {};
if (opts.iconBig != null) {
$('<div></div>').css('background-image', 'url(' + opts.iconBig + ')').appendTo(_container_);
_contentCss_.top = -48;
_contentCss_.marginLeft = 48;
}
var _content_ = $('<div></div>').css(_contentCss_).html(opts.content).appendTo(_container_);

if (opts.buttons != null && opts.buttons.length > 0) {
_containerHeight_ -= 30;
var _buttons_ = $('<div></div>').appendTo(_dialog_);
$.each(opts.buttons, function (i, _button) {
$('<a href="javascript:;">' + _button.text + '</a>').click(function () {
_button.fn(me);
}).appendTo(_buttons_);
})
}
_container_.css({ height: _containerHeight_ });

this.close = function () {
me.remove();
}

this.setContent = function (content) {
_content_.html(content);
}

return this;
}
//设置默认参数
$.alert.defaults = {
title: '信息提示', //对话框标题
content: null, //对话框内容
width: 200, //宽
height: 100, //高
opacity: 0.5, //透明度
icon: null, //显示在标题前面的小图标
iconBig: null, //显示在内容左侧的大图标
buttons: null, //按钮集合[{text:'按钮显示文字',fn:回调函数(event)}],event = {}
close: true//是否显示关闭按钮
}
})(jQuery);

调用

复制代码 代码如下: