diff --git a/README.md b/README.md index 1740973..77730ca 100644 --- a/README.md +++ b/README.md @@ -8,3 +8,4 @@ - **[JavaScript之闭包与高阶函数(一)](https://github.com/codingplayboy/javascript_notes/blob/master/js_closureFunc.md)** - **[JavaScript之异步编程](https://github.com/codingplayboy/javascript_notes/blob/master/js_asynCoding.md)** - **[JavaScript之数组排序、去重及最值算法](https://github.com/codingplayboy/javascript_notes/blob/master/js_arrAlgortithm.md)** +- **[JavaScript之树列表插件实现](https://github.com/codingplayboy/javascript_notes/blob/master/js_treeview_plugin.md)** \ No newline at end of file diff --git a/js_treeview_plugin.md b/js_treeview_plugin.md new file mode 100644 index 0000000..0a56f05 --- /dev/null +++ b/js_treeview_plugin.md @@ -0,0 +1,210 @@ +--- +layout: post +title: 自定义js插件 +permalink: js_treeview_plugin.md +description: treeViewPlugin +date: 2016-01-07 13:59:55 +08:00 +tags: ["JavaScript", "Plugin", "插件"] +--- + +# JavaScript之树列表插件实现 + +treeViewPlugin,一个可以生成任意多级树列表的js插件,使用了jquery事件委托处理跨浏览器添加事件监听及DOM操作实现需求。[查看插件源码点此](https://github.com/codingplayboy/javascriptDemo/tree/master/treeViewPlugin) + +## API说明 + +### 插件定义 + +``` + + var treeViewPlugin = (function() { //插件定义、封装 + //插件实现 + }()); +``` + +### 插件API + +``` + + return { + initModule: initModule, //初始化树列表 + addParents: addParents, //给树列表添加父级菜单 + addChild: addChild, //给树列表添加子级菜单 + addChildNode: addChildNode //给树列表添加无子级的子级菜单 + }; +``` + +#### 初始化 + +``` + + /** + * [initModule 初始化树列表] + * @param {[type]} $append_target [树列表容器] + * $('.treeviewCont') + * @return {[type]} [函数返回值] + */ + initModule = function($append_target) { + //具体实现 + }; +``` + +#### 添加父级菜单 + +``` + + /** + * [addParents 添加父级菜单 + * @param {[Array]} _data [菜单数据] + * [{ + * id: 菜单id, + * name: 菜单显示值 + * + * }] + */ + addParents = function(_data) { + //具体实现 + }; +``` + +#### 添加子级菜单 + +``` + + /** + * [addChild 添加子级菜单] + * @param {[Array]} _data [菜单数据] + * [{ + * id: 菜单id, + * name: 菜单显示值, + * pId: 父级菜单id + * }] + */ + addChild = function(_data) { + //具体实现 + }; +``` + +#### 添加无子级的菜单 + +``` + + /** + * [addChildNode 添加无子级子级菜单] + * @param {[Array]} _data [菜单数据] + * [{ + * id: 菜单id, + * name: 菜单显示值, + * pId: 父级菜单id + * }] + */ + addChildNode = function(_data) { + //具体实现 + }; +``` + +## demo展示 + +``` + + + + + + Treeview Plugin Demo + + + + +

Treeview Plugin Demo

+
+
+
+ + + +``` + +**此插件只是初步实现,更多功能待完善,实际使用可根据实际需求做相应修改,欢迎大家一起分享、交流、学习。** +*[查看插件源码点此](https://github.com/codingplayboy/javascriptDemo/tree/master/treeViewPlugin) +*