Я уже некоторое время работаю над своим плагином jQuery Modal, и, наконец, у меня все получилось, но мне было интересно, хорошо ли закодирована структура моего плагина и код 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 также ниже:
(function($) {
var methods = {
// PUBLIC FUNCTIONS
init: function(options) {
return this.each(function() {
if (options) $.extend({}, settings, options);
var $this = $(this),
$title = $this.attr('title'),
$href = $($this.attr('href'));
// PRIVATE FUNCTIONS
var openWindow = function() {
$this.trigger('open.iModal');
addContent();
}
var addContent = function() {
$this.trigger('loaded.iModal');
}
});
},
close: function() {
return this.each(function() {
var $this = $(this),
$href = $($this.attr('href'));
$this.trigger('closed.iModal');
$this.unbind('.iModal');
});
},
resize: function() {
}
}
$.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);
Кроме того, как вы можете видеть, я должен определить $ this и $ href в моих функциях init () и close (), есть ли где-нибудь, где я мог бы однажды определить свои закрытые переменные и получить к ним доступ из любого места? Я что-то слышал об использовании тега data (), но не уверен, как он работает.
Заранее спасибо:)