Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<div id="box">
  <span class="close-button">HIDE</span>
</div>
</body>
</html>
 
;(function ($, window, document, undefined) {
​
    var defaults = {
        type: 'standard',
    };
    var methods = {
        init: function(options){
            console.log('IN - INIT()');
            if(options){
                $.extend(defaults, options);
            }
        },
        show: function(arg){
            console.log('IN - SHOW()');         
            var $this = this;
            this.css({display: 'block'});
            // First solution
            /*
            this.find('.close-button').on('click', function(){
                $this.hide.call(event.target); 
            });
            */
            // Second solution
            /*
            this.find('.close-button').click($.proxy(function(){
              $this.hide();
            }, $this));
            */
            this.find('.close-button').on('click', function(){
                $this.plugin('hide'); 
            });          
        },
        hide: function(){
            console.log('IN - HIDE()');
            this.css({display: 'none'});
        }
    };
​
    $.fn.plugin = function(method){
        var args = arguments;
        var $this = this;
        return this.each(function(){
            if(methods[method]){
                return methods[method].apply($this, Array.prototype.slice.call(args, 1));
            }else if (typeof method === 'object' || ! method){
                return methods.init.apply($this, Array.prototype.slice.call(args, 0));
            }else{
                $.error('Method ' +  method + ' does not exist on jQuery.plugin');
            }
        });
    };
​
}(jQuery, window, document));
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers