Question

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

screenBlockis不是一个功能

我的代码是：

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

这里至少有两个问题。

首先，您在第一个screenBlock()处理程序中调用ready，该处理程序在之前运行，您在第二个ready处理程序中定义该方法。你必须反转两个代码块。

其次，您在screenBlock()本身上调用$方法，但是您在$.fn命名空间中定义它，这意味着它应该在jQuery对象上调用：

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

Answer 2

首先，您应该在之前插入插件代码。通常，javascript是按顺序解释的，因此您需要在调用之前插入插件代码。

其次，您应该将您的插件代码放在自己的文件中，并使用脚本标记来源：

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

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

2 个答案: