Jquery-构建自己的插件（错误：不是函数）

我正在尝试构建我的第一个jquery插件，但出现以下错误：

屏蔽不是一种功能

我的代码是：

$(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);

$（文档）.ready（函数fiddletest（））
{
$.screenBlock({
不透明度：“0.4”，
zindex：“22”，
clickXXX:函数（事件）{alert（'click'）；}
});
});
（函数（$）{
$.fn.screenBlock=功能（设置）{
//背景
变量配置={
“不透明度”：0.8，
“z指数”：10
};
如果（设置）{$.extend（配置，设置）；}
//生成新选择器
变量选择器='sB_'+$.md5（appid+标题+链接+内容）+'；
//在正文中写入screenBlocker DIV
$（'body'）。前缀（“”）；
//淡入
$（'#'+选择器）.fadeIn（）；
//点击screenBlocker DIV，
$（“#”+选择器）。单击（函数（e）
{
//拆下屏幕拦截器DIV
$（'#'+选择器）.remove（）；
//破坏点击
$（'#'+选择器）。解除绑定（'单击'）；
//调用函数clickXXX
//……但是怎么做呢？
});
返回选择器；
};
})（jQuery）；

示例 这里（至少）有两个问题

首先，在第一个

ready

处理程序中调用

screenBlock（）

，该处理程序在第二个

ready

处理程序中定义该方法之前运行。您必须反转这两个代码块

其次，您在

$

本身上调用

screenBlock（）

方法，但是您在

$.fn

命名空间中定义了它，这意味着应该在jQuery对象上调用它：

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

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

---

首先，您应该在实际调用插件代码之前输入插件代码。通常，javascript是按顺序解释的，所以在调用它之前需要先放入插件代码

其次，您可能应该将插件代码放在自己的文件中，并使用脚本标记对其进行源代码转换：

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

$（文档）.ready（函数（）{
$.screenBlock({
不透明度：“0.4”，
zindex：“22”，
单击：函数（事件）{alert（'click'）；}
});
});

好的，它现在可以工作了（）。你能告诉我如何调用clickXXX函数吗？非常感谢您的快速回答。由于该函数是在您的设置中传递的，因此您只需执行

设置。单击xxx（）（或者
config.clickXXX（）；
因为您使用
设置扩展了
config
）。