0
jQuery Modalのプラグインをしばらく使っていましたが、最終的にはうまくいきました。しかし、プラグインの構造とjQueryのコードがうまくコーディングされているかどうかは疑問でした。私は自分のコードが完全に最適であるかどうかわからない場合、夜に眠れない人のような男です:)jQueryプラグインの構造
どのような改善/フィードバックがありがとうございます！
(function($) {
var methods = {
init: function(options) {
return this.each(function() {
if (options) $.extend({}, settings, options);
var $this = $(this),
$title = $this.attr('title'),
$href = $($this.attr('href'));
$this.bind('click', function() {
openWindow();
return false;
});
$this.bind('open.iModal', function() { settings.onOpen() });
$this.bind('loaded.iModal', function() { settings.onLoaded() });
$this.bind('closed.iModal', function() { settings.onClose() });
var openWindow = function() {
$('body').append('<div id="iModalOverlay"></div><div id="iModalWrapper"><div id="iModalWindow"><div id="iModalLoading"></div><div id="iModalContent"><h4 class="inputBox">' + $title + '</h4></div></div><div id="iModalClose">X</div></div>');
$this.trigger('open.iModal');
$(this).iModal('resize');
if (settings.closeOnClick) {
$('#iModalOverlay').click(function() {
$(this).iModal('close');
return false;
});
}
$('#iModalClose').click(function() {
$(this).iModal('close');
return false;
});
$(window).resize(function() {
$(this).iModal('resize');
});
addContent();
}
var addContent = function() {
$('#iModalContent').hide();
$('#iModalLoading').show();
var type = /\.(gif|png|jpg|jpeg|bmp)(?:\?([^#]*))?(?:#(\.*))?$/i.test($this.attr('href')) ? 'image' : ($this.attr('href').indexOf('#') === 0) ? 'html' : 'ajax';
switch(type) {
case 'html':
$('#iModalContent').append($href);
break;
case 'ajax':
$.get("/Testing/ajax/getfile.php", { file: $href }, function(data){
$('#iModalContent').html(data);
});
break;
case 'image':
$('#iModalContent').css('padding', 0);
$('#iModalWrapper').css('padding-bottom', '2px');
var img = new Image();
$(img).load(function() {
$('#iModalContent').append(this);
}).attr('src', $this.attr('href'));
break;
}
$('#iModalContent').show();
$('#iModalLoading').hide();
$(this).iModal('resize');
if ($('#iModalContent input').length != 0) $('#iModalContent input').focus();
$this.trigger('open.iModal');
}
});
},
close: function() {
return this.each(function() {
var $this = $(this),
$href = $($this.attr('href'));
$('#modalBoxes').append($href);
$('#iModalOverlay, #iModalWrapper').remove();
$this.trigger('closed.iModal');
$this.unbind('.iModal');
});
},
resize: function() {
$('#iModalOverlay').css({
height: $(window).height() + $(window).scrollTop(),
width: $(window).width() + $(window).scrollLeft()
});
$('#iModalWrapper').css({
top: ($(window).height() - $('#iModalWrapper').outerHeight())/2 + $(window).scrollTop(),
left: ($(window).width() - $('#iModalWrapper').outerWidth())/2 + $(window).scrollLeft()
});
}
}
$.fn.iModal = function(method, options) {
settings = {
onOpen: function() {},
onLoaded: function() {},
onClose: function() {},
closeOnClick: true,
title: false
}
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || ! method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist');
}
}
})(jQuery);
私はそれが（他のモーダルプラグインのほか、その1/10の周りのサイズ）長いことを知っている - 私はTLを追加; DRコードだけでなく、以下の：
また、あなたのようにinit（）関数とclose（）関数の両方で$ thisと$ hrefを定義する必要があることがわかります。私のプライベート変数を定義してどこからでもアクセスできます。私はdata（）タグの使用について何か聞いたことがありますが、それがどのように動作するかはわかりません。事前に
感謝:)