Question

假设我有这个：

1）开始按钮。

2）停止按钮。

3）removePluginBtn

4）2个分区。

我想出了一个基本的jQuery插件，如：

;(function(myPlugIn){

      myPlugIn.fn.styleTheDivAndAnimate = function (){

    $(this).css({background:"red",border:"10px solid black", padding:"30px"}).animate({marginLeft:"200px"},5000)

    }
    })(jQuery);



 $(function(){

        $('#startBtn').on('click',function(){

            $('#myDiv').styleTheDivAndAnimate()
        })

    })

HTML：

<div id="main" style="float:left;">

   <div id="myDiv" style="background:green; border:5px solid blue; padding:10px;">

   </div>

</div>

<button id="startBtn">Start</button>
<button id="stopBtn">Stop</button>
<button id="removePluginBtn">Unbind Plugin</button>

现在，当我点击startBtn时，myDiv会绑定styleTheDivAndAnimate插件。

然而，我想要的是当我点击stopBtn，myDiv应该返回到原始状态，再次点击startBtn时，它将按预期绑定回styleTheDivAndAnimate ......

但是......当我点击removePluginBtn时，myDiv应该不再绑定到styleTheDivAndAnimate插件。即使我再次单击startBtn，也不应该发生因为插件已被删除...（类似的东西）。

怎么可能实现呢？

提前Thanx！

PLAESE看到开头的事： http://jsfiddle.net/97AWD/

Answer 1

要禁用该插件，您可以执行以下操作：

jQuery.fn.styleTheDivAndAnimate = function() {};

这只是将插件重新定义为不执行任何操作的函数。

如果要禁用特定元素，请使用.data()：

$(this).data('styleTheDivAndAnimate-disabled', 'true');

然后在您的主插件代码中，将其包装为：

if (!$(this).data('styleTheDivAndAnimate-disabled')) {
    // do your stuff
}

完整代码：DEMO

;
(function (myPlugIn) {

    myPlugIn.fn.styleTheDivAndAnimate = function (action) {
        switch (action) {
            case 'disable':
                $(this).data('styleTheDivAndAnimate-disabled', 'true');
                break;
            case 'remove':
                $(this).css({
                    background: 'green',
                    border: '5px solid blue',
                    padding: '10px',
                    marginLeft: 0
                });
                break;
            default:
                if (!$(this).data('styleTheDivAndAnimate-disabled')) {
                    $(this).css({
                        background: "red",
                        border: "10px solid black",
                        padding: "30px"
                    }).animate({
                        marginLeft: "200px"
                    }, 5000);
                }
                break;
        }

    }
})(jQuery);

jQuery：如何创建可以启用和禁用的插件？

1 个答案: