jQuery: Как создать плагин, который можно включить и отключить?

Question

Предположим, у меня есть:

1) Кнопка запуска.

2) Кнопка остановки.

3) removePluginBtn

4) 2 DIVS.

Я придумал основной 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 ПРОЧТИТЕ FIDDLE НАЧАТЬ: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);