jQuery 플러그인 개발 학습은 실습부터 시작됩니다 Dialog 플러그인 개발_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) 이것을 반환합니다. 🎜>
var me = $('').addClass('ctcx-dialog').appendTo(document.body)
var doc = $(document);
$('').css({ 불투명도: opts.opacity }).width(doc.width()).height(doc.height( )).appendTo(me);
var _dialog_ = $('').css({
width: opts.width,
height: opts.height,
marginLeft: 0 - opts.width / 2,
marginTop: 0 - opts.height / 2
}).appendTo(me)
var _bar_ = $( '').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('배경 이미지', '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 = 함수(콘텐츠) {
_content_.html(콘텐츠);
}

이것을 반환하세요.
}
//设置默认参数
$.alert.defaults = {
title: '信息提示', //对话框标题
content: null, //对话框内容
너비: 200, //宽
높이: 100, //높음
불투명도: 0.5, //透명도
icon: null, //显示在标题前면적작은图标
iconBig: null, //显示는 内容左侧的大图标
버튼: null, //按钮集合[{text:'按钮显示文字',fn:回调函数(event)}],event = {}
닫기: true//是否显示关闭按钮
}
})(jQuery);

$. alert ({ 제목 : '火星向你发出警告', // 对话框标题 내용 : '我们是火星人 我们是火星人, 我们就要入侵地球了, 你们准备好了吗？', // 对话框内容
너비: 300, //宽
높이: 150, //높음
불투명도: 0.5, //透명도
icon: 'icon.png', //显示在标题前면적小图标
iconBig: 'icon-big.png', //显示在内容左侧的大图标
buttons: [{ text: '好怕怕', fn: function () { $.alert( '我好怕怕呀')} }], //按钮集合[{text:'按钮显示文字',fn:回调函数(event)}],event = {}
close: true//是否显示关闭按钮
});



七.下载