Color Plugin for blog

by lvjian700

HTML

<a href="#" class="color-button">Change my color</a>

CSS

body {
  padding: 50px;
}

.color-button {
  font-size: 18px;
  padding: 6px 12px;
}

JavaScript

(function($) {

  // 1. 创建 `Component` 代码
  var ColorButton = function($select, options) {
    // 组建初始化代码
    this.$el = $select
    this.settings = $.extend({
      // 默认参数
    }, options || {});

    // binding 事件
    this.$el.click(function() {
    	console.log('clicked');
    });
  };

  // 2. 为 `Component` 添加方法
  $.extend(ColorButton.prototype, {
    // 这里定义方法
  });

  // 3. 将 `Component` 绑定到 jQuery
  $.fn.colorbutton = function(options) {
    return this.each(function() {
      var $select = $(this)
      if (!$select.data('colorbutton')) {
        $select.data('colorbutton', new ColorButton($select, options));
      }
    });
  };

})(jQuery);

// 使用
$('.color-button').colorbutton();