Jquery - создать собственный плагин (ошибка: это не функция)

Question

Я пытаюсь создать свой первый плагин jquery, но получаю следующую ошибку:

screenBlock не является функцией

Мой код:

$(document).ready(function fiddletest()
{
    $.screenBlock({
       opacity: "0.4",
       zindex: "22",
       clickXXX: function(event){  alert('click'); }
    });

});

(function($){
$.fn.screenBlock = function(settings){

        // settings
        var config = {
            'opacity': 0.8,
            'z-index': 10
        };

        if ( settings ){$.extend(config, settings);}

        // Generate new selector
        var selector = 'sB_'+$.md5(appid+title+link+content)+'';

        // write screenBlocker DIV in body
        $('body').prepend('<div id="'+selector+'" style="background-color:#000000; opacity:'+config.opacity+';  margin:0px;  padding:0px;  position:fixed; display:none; left:0px;  top:0px;  width:100%;  height:100%; z-index:'+config.z-index+';"><div>');

        // Fade In
        $('#'+selector).fadeIn();

        // click on screenBlocker DIV,
        $('#'+selector).click(function (e)
        {
           // remove screenBlocker DIV
           $('#'+selector).remove();

           // destroy click
           $('#'+selector).unbind('click');

           // call function clickXXX
           // ... but how?

        });

        return selector;
    };
})(jQuery);

пример http://jsfiddle.net/ywHh8/4/

Answer 1

Во-первых, вы должны поставить свой код плагина до того, как вы на самом деле его назовете. Как правило, javascript интерпретируется последовательно, поэтому вам нужно указать код вашего плагина перед его вызовом.

Во-вторых, вы, вероятно, должны поместить свой код плагина в отдельный файл и снабдить его тегом script:

<script src="/js/jquery.screenBlock.js"></script>
<script>
$(document).ready(function() {
    $.screenBlock({
        opacity: "0.4",
        zindex: "22",
        click: function(event){ alert('click'); }
    });
});
</script>

Answer 2

Здесь есть (по крайней мере) две проблемы.

Во-первых, вы вызываете screenBlock() в своем первом обработчике ready, который запускается до , который вы определили в этом методеваш второй ready обработчик.Вам придется инвертировать два блока кода.

Во-вторых, вы вызываете метод screenBlock() для самого $, но вы определяете его в пространстве имен $.fn, что означает, что он должен бытьвызывается для объекта jQuery:

$.screenBlock = function() {
    // This can be called with $.screenBlock().
};

$.fn.screenBlock = function() {
    // This can be called with $("selector").screenBlock().
};