jquery插件开发示例

Posted 2020-06-15

/****通用部分 BEGIN *****/
$.fn.sidebar = function(options) {
  var defaults = {
      event: ‘click‘
    },
    settings = $.extend({}, defaults, options);
  return this.each(function() {
    return new Sidebar(this, settings);
  });/};
/****通用部分 END *****/

function Sidebar(el, settings) {

  this.$sidebar = $(el);
  this.settings=settings;
  this.$foldPanel =this.$sidebar.find(‘.fold‘);
  this.$unFoldPanel = this.$sidebar.find(‘.unfold‘);
  this.init();

}
Sidebar.prototype = {
  init: function() {

    var _self=this;

    _self.$sidebar.on(‘fold‘, $.proxy(_self.fold, _self));
    _self.$sidebar.on(‘unfold‘, $.proxy(_self.unfold, _self));

    _self.$sidebar.find(‘.fold_btn‘).on(_self.settings.event, function(e) {
      e.preventDefault();
      _self.$sidebar.trigger(‘fold‘);
    });
    _self.$sidebar.find(‘.unfold_btn‘).on(_self.settings.event, function(e) {
      e.preventDefault();
      _self.$sidebar.trigger(‘unfold‘);
    });
  },
  fold: function() {
    var self = this;
    self.$unFoldPanel.animate({
      width: 40
    }, function() {
      $(this).hide();
      self.$foldPanel.show();
    });
  },
  unfold: function() {
    var self = this;
    self.$foldPanel.hide();
    self.$unFoldPanel.show(function() {
      $(this).animate({
        width: 200
      });
    });
  }

};