jQuery plugin from JavaScript pattern

Question

This is my actual code:

$.fn.menuWidth = (function(){
  return {
    show: function(a){
      this.animate({
        width: 400
      });
    },
    hide: function(a){
      return "hide";
    }
  };
}());

$("#header").menuWidth.show();

But, i can't access the $("#header") from the show object. Any idea how to make it work?

plugins should not return methods , rather should return this which allows them to be chainable. Not hard to find lots of tutorials on jQuery plugins — charlietfl
– charlietfl, Commented Jul 13, 2015 at 19:14

Dhiraj · Accepted Answer · 2015-07-13 19:32:00Z

3

You might want to change the structure of your plugin definition to something like this

$.fn.menuWidth = function(options) {
  this.show = function() {
    this.animate({
      width: 400
    });
    return this; // <---- This will enable chaining
  };
  this.hide = function() {
    return "hide"; 
  };
  return this; // <--- returning this will make visible the hide and show methods.
};

console.log($("#header").menuWidth().show().hide());

Doing jQuery's show and hide is also possible but this might sound a bit like a hack.

$($("#header").menuWidth().show()).hide();

menuWidth plugin returns this which is the instance of the element. Wrapping it into a jQuery object will let us perform .hide() and .show().

This will not be possible if .hide() of menuWidth is invoked because it does not return the element instance.

PS: This is a very very simple way to write a plugin. There are better and much more complex ways to write plugins.

$.fn.menuWidth = function(options) {
  this.show = function() {
    this.animate({
      width: 400
    });
    return this;
  };
  this.hide = function() {
    return "hide";
  };
  return this;
};

console.log($("#header").menuWidth().show().hide());

#header{
width: 100px;
  border: 1px solid red;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
  This is a header
  </div>

edited Jul 13, 2015 at 19:32

answered Jul 13, 2015 at 19:21

Dhiraj

33.7k10 gold badges65 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Caio Kawasaki Over a year ago

There is possibility to occur any conflict with native jQuery .show() function?

charlietfl Over a year ago

@CaioKawasaki yes, approach shown would over write jQuery default show for that element

Dhiraj Over a year ago

@CaioKawasaki: Yes, it would override the show and hide methods. However, it is still possible to achieve that. .show method of menuWidth returns the jquery instance of the element. Wrapping that with a jquery object will let you perform jQuery's show and hide. Please see my updated answer

Caio Kawasaki Over a year ago

Like @charlietfl said, the override will happen just for $("#header"). Right?

Dhiraj Over a year ago

@CaioKawasaki: Yes, just along that chain. If you break the chain and wrap into a jquery object, you will be able to perform all jquery operations. I hope I made some sense :-)

Brant Olsen · Accepted Answer · 2015-07-15 19:02:06Z

1

You will want to change your function signature to menuWidth = function(action) {}; then pass 'show' or 'hide' to the menuWidth() call. See https://learn.jquery.com/plugins/basic-plugin-creation/#minimizing-plugin-footprint for jQuery's example documentation for this.

$.fn.menuWidth = function(action) {
  if (action == 'show') {
      this.animate({
        width: 400
      });
  }
  else if (action == 'hide') {
     alert('hide');
  }

  return this;
};

$("#header").menuWidth('show');
$("#header").menuWidth('hide');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">Testing</div>

edited Jul 15, 2015 at 19:02

answered Jul 13, 2015 at 19:18

Brant Olsen

5,6645 gold badges39 silver badges53 bronze badges

3 Comments

Caio Kawasaki Over a year ago

This is a good answer too, however I prefer the chaining method, I'm sorry, I will accept the another answer...

Brant Olsen Over a year ago

@CaioKawasaki No problem and I agree that the other answer is just as good as I upvoted it also.

charlietfl Over a year ago

this is actually a more common pattern used IMO ..passing params instead of chained methods within the plugin but normally would return this so other jQuery methods are still available

Collectives™ on Stack Overflow

jQuery plugin from JavaScript pattern

2 Answers 2

5 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related