Authored by huangping

Update bootstrap-plugin.md

1 -##**编写目的:** 1 +**编写目的:**
2 基于这次CRM项目选用bootstrap作为前台框架。但是使用原生态的bootstrap需要在页面上写N多的div,table等标签。 2 基于这次CRM项目选用bootstrap作为前台框架。但是使用原生态的bootstrap需要在页面上写N多的div,table等标签。
3 这个就需要对bootstrap的样式,风格有很深的了解的人才能去使用。基于这样的一个背景,我这里对bootstrap的一些常用框架做了jquery风格的插件封装 3 这个就需要对bootstrap的样式,风格有很深的了解的人才能去使用。基于这样的一个背景,我这里对bootstrap的一些常用框架做了jquery风格的插件封装
4 现在市面上关于bootstrap的插件很多,但是没有一家对bootstrap插件做一个完整的封装。 4 现在市面上关于bootstrap的插件很多,但是没有一家对bootstrap插件做一个完整的封装。
5 5
6 -###**插件优点**: 6 +**插件优点**
7 7
8 - 完全采用jquery风格插件的方式统一封装。 8 - 完全采用jquery风格插件的方式统一封装。
9 - 使用简单,完全面向对象的设计。 9 - 使用简单,完全面向对象的设计。
@@ -12,14 +12,14 @@ @@ -12,14 +12,14 @@
12 **该文档基于插件的三大要素(属性,事件,方法)来详细描述每个插件的使用方法** 12 **该文档基于插件的三大要素(属性,事件,方法)来详细描述每个插件的使用方法**
13 13
14 **枚举定义** 14 **枚举定义**
  15 +
15 1、面板样式 16 1、面板样式
16 - panel-primary  
17 - panel-success  
18 - panel-info  
19 - panel-warning  
20 - panel-danger 17 + - panel-primary
  18 + - panel-success
  19 + - panel-info
  20 + - panel-warning
  21 + - panel-danger
21 22
22 -2、  
23 23
24 24
25 25
@@ -32,7 +32,7 @@ @@ -32,7 +32,7 @@
32 显示一个导航菜单 32 显示一个导航菜单
33 33
34 使用举例 34 使用举例
35 - 35 +```javascript
36 $("#leftMenu").accordion({ 36 $("#leftMenu").accordion({
37 panelClass : "panel-primary", 37 panelClass : "panel-primary",
38 idField : "menuId", 38 idField : "menuId",
@@ -53,6 +53,8 @@ @@ -53,6 +53,8 @@
53 return data.data; 53 return data.data;
54 } 54 }
55 }); 55 });
  56 +```
  57 +
56 58
57 **该插件可供选择的属性(option)有:** 59 **该插件可供选择的属性(option)有:**
58 60
@@ -78,10 +80,66 @@ @@ -78,10 +80,66 @@
78 80
79 81
80 82
81 -**该插件可供选择的事件(method)有:** 83 +**该插件暂未提供可供选择的方法(method):**
  84 +
  85 +
  86 +----------
  87 +
  88 +
  89 +## 2、显示一个警告框(alerts)##
  90 +
  91 +显示一个导航菜单
  92 +
  93 +使用举例
  94 +```javascript
  95 + $("#leftMenu").accordion({
  96 + panelClass : "panel-primary",
  97 + idField : "menuId",
  98 + pidField : "parentMenuId",
  99 + textField : "menuName",
  100 + ajaxParam : {
  101 + dataType : "json",
  102 + url: "/SysMenuController/getSysMenuList.do",
  103 + type: "POST"
  104 + },
  105 + onClickMenu : function(item, parent) {
  106 + $("#body").load("/crm" + item.menuUrl);
  107 + },
  108 + loadFilter : function(data) {
  109 + if (!data || data.code != 200) {
  110 + return null;
  111 + }
  112 + return data.data;
  113 + }
  114 + });
  115 +```
  116 +
  117 +
  118 +**该插件可供选择的属性(option)有:**
  119 +
  120 +| 属性名称 | 属性类型 | 可否为空 | 默认值 | 备注 |
  121 +| ---------|:--------:| --------:|-----:|------:|-----:|
  122 +|panelClass |string |是 | "panel-default" |面板样式(可选值见枚举定义1)|
  123 +|rootPid |int |否 |0 |最外层节点的pid值|
  124 +|idField |string |是 |"id" |对象中id的属性名称|
  125 +|pidField |string |是 |"pid" |对象中pid的属性名称|
  126 +|textField |string |是 |"text" |对象中显示在菜单中的名称的属性|
  127 +|ajaxParam |object |是 |{} |从后端获取数据的ajax的对象|
  128 +|dataList |array |是 |[] |需要显示的的对象数组(ajaxParam和dataList不需要同时使用,如果同时有值,则以ajaxParm为准)|
  129 +|loadFilter |function |是 |null |从后端获取值后做特殊处理(该函数接受一个参数data,即为从后端ajax返回的值)|
  130 +
  131 +
  132 +
  133 +**该插件可供选择的事件(event)有:**
82 134
83 -| 方法名称 | 参数 | 备注 | 135 +| 事件名称 | 参数 | 备注 |
84 | ---------|:--------:| --------:| 136 | ---------|:--------:| --------:|
  137 +|onLoadSuccess |data |菜单加载完成之后执行(参数data即为ajax或直接传入的dataList)|
  138 +|onClickMenu |item,parent |点击菜单的时候执行|
  139 +
  140 +
  141 +
  142 +**该插件暂未提供可供选择的方法(method):**
85 143
86 144
87 145