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

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 class=”mark”></div>’).css({ opacity: opts.opacity }).width(doc.width()).height(doc.height()).appendTo(me);
var _dialog_ = $(‘<div class=”dialog”></div>’).css({
width: opts.width,
height: opts.height,
marginLeft: 0 – opts.width / 2,
marginTop: 0 – opts.height / 2
}).appendTo(me);
var _bar_ = $(‘<div class=”bar”></div>’).appendTo(_dialog_);
var _titleWidth_ = opts.width – 0;
if (opts.icon != null) {
$(‘<div class=”icon”></div>’).css(‘background-image’, ‘url(‘ + opts.icon + ‘)’).appendTo(_bar_);
_titleWidth_ -= 25;
}
if (opts.close) _titleWidth_ -= 20;
$(‘<div class=”title”></div>’).css({ width: _titleWidth_ }).html(opts.title).appendTo(_bar_);
if (opts.close) {
$(‘<div class=”close”></div>’).click(function () {
me.remove();
}).appendTo(_bar_);
}
var _containerHeight_ = opts.height – 40;
var _container_ = $(‘<div class=”container”></div>’).appendTo(_dialog_);
var _contentCss_ = {};
if (opts.iconBig != null) {
$(‘<div class=”icon”></div>’).css(‘background-image’, ‘url(‘ + opts.iconBig + ‘)’).appendTo(_container_);