Merge pull request Tencent#70 from Maizify/dev

add `addTopBar` docs

doc/plugin_event_list.md

@@ -38,6 +38,52 @@ myPlugin.on('renderTab', function(callback) {
 ```
 
 
+## addTopBar
+Trigger while vConsole trying to add new tab buttons which are under the tab bar. This event will only be triggered once.
+
+#### Callback Arguments:
+
+- (required) function(btnList): a callback function that receives an `array` of tab buttons.
+
+A tab button is an object with properties:
+
+Property | | | |
+------- | ------- | ------- | -------
+name | string | required | The display name of the button.
+data | object | optional | The dataset of the button, key-value format.
+className | string | optional | The className of the button.
+onClick | function | required | A callback function when user click the button. The target button will automatically be added actived style after this callback unless it returns `false`.
+
+```javascript
+var type;
+myPlugin.on('addTopBar', function(callback) {
+	var btnList = [];
+	btnList.push({
+		name: 'Apple',
+		className: '',
+		data: {type: 'apple'},
+		onClick: function() {
+			if (type != this.dataset.type) {
+				// `this` points to current button
+				type = this.dataset.type;
+			} else {
+				return false;
+			}
+		}
+	});
+	btnList.push({
+		name: 'Orange',
+		className: '',
+		data: {type: 'orange'},
+		onClick: function() {
+			type = this.dataset.type;
+		}
+	}
+	});
+});
+```
+
+
 ## addTool
 Trigger while vConsole trying to add new tool buttons for a plugin. This event will only be triggered once.
 
@@ -51,7 +97,7 @@ Property | | | |
 ------- | ------- | ------- | -------
 name | string | required | The display name of the button.
 global | boolean | optional, default `false` | When `false`, the button will be hidden while switching to other tab. When `true`, the button will be available to all tabs.
-onClick | function(event) | required | A callback function when user click the button.
+onClick | function | required | A callback function when user click the button.
 
 ##### Example:
 

doc/plugin_event_list_CN.md

@@ -45,6 +45,25 @@ myPlugin.on('renderTab', function(callback) {
 ```
 
 
+## addTopBar
+
+当 vConsole 尝试为此插件添加新的 topbar 按钮时触发。这个事件只会触发一次。
+
+#### Callback 参数：
+
+- (必填) function(btnList): 回调函数，接收一个带有按钮配置信息的 `array` 数组。
+
+按钮的参数为：
+
+Property | | | |
+------- | ------- | ------- | -------
+name | string | 必填 | 按钮展示的名字。
+data | object | 选填 | 按钮的 dataset，key-value 格式。
+className | string | 选填 | 按钮的 className。
+onClick | function | required | 点击按钮时的回调函数。触发回调后，除非回调函数返回 `false`，此按钮将自动变为选中的样式。
+
+
+
 ## addTool
 
 当 vConsole 尝试为此插件添加新的 tool 按钮时触发。这个事件只会触发一次。
@@ -59,7 +78,7 @@ Property | | | |
 ------- | ------- | ------- | -------
 name | string | 必填 | 按钮展示的名字。
 global | boolean | 选填，默认 `false` | `false` 时，当切换到别的 tab 后，按钮就会被隐藏；`true` 时，按钮变成全局可见。
-onClick | function(event) | 必填 | 点击按钮时的回调函数。
+onClick | function() | 必填 | 点击按钮时的回调函数。
 
 ##### 例子：
 

src/core/core.js

@@ -344,7 +344,9 @@ class VConsole {
           $.addClass($item, 'vc-global-tool');
         }
         if (tool.isFunction(item.onClick)) {
-          $.bind($item, 'click', item.onClick);
+          $.bind($item, 'click', function(e) {
+            item.onClick.call($item);
+          });
         }
         $defaultBtn.parentNode.insertBefore($item, $defaultBtn);
       }

src/log/log.js

@@ -78,7 +78,7 @@ class VConsoleLogTab extends VConsolePlugin {
     let toolList = [{
       name: 'Clear',
       global: false,
-      onClick: function(e) {
+      onClick: function() {
         that.clearLog();
       }
     }];