jQuery プラグイン開発の学習は実践から始まります ダイアログ プラグイン開発_jquery

(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 = $('').addClass('ctcx-dialog').appendTo(document.body);
$('').css({ opacity: opts.opacity }).width(doc.width()).height(doc.height( )).appendTo(me);
var _dialog_ = $('').css({
width: opts.width,
高さ: opts.height,
marginLeft: 0 - opts.width / 2,
marginTop: 0 - opts.height / 2
}).appendTo(me); '').appendTo(_dialog_);

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

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

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

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

this.setContent = function (コンテンツ) {
_content_.html(コンテンツ);
}

これを返します;
}
//設置默认パラメータ
$.alert.defaults = {
title: '情報提示', //对话框标题
content: null, //对话框内容
width: 200, //宽
height: 100, //高
opacity: 0.5, //透明度
icon: null, //标题前面の小图标
iconBig: null, //コンテンツ左側に表示される大図标
ボタン: null, //按钮集合[{text:'按钮显表示文字',fn:回调関数(event)}],event = {}
close: true//是否显表示关闭按钮
}
})(jQuery);


调用

content: '我们是火星人，我们要就入侵地球了，你们準备好了吗?', //对话框内容
width: 300, //宽
height: 150, //高
opacity: 0.5, //透明度
icon: 'icon.png', //显示在标题前面的小图标
iconBig: 'icon-big.png', //コンテンツ左側にある大图标
ボタン: [{ text: '好怕怕', fn: function () { $.alert( '我好怕怕呀')} }], //按钮集合[{text:'按钮显示文字',fn:回调関数数(event)}],event = {}
close: true//是否显示关闭按钮
});



七.ダウンロード