Update bootstrap-plugin.md
Showing
1 changed file
with
69 additions
and
11 deletions
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 |
-
Please register or login to post a comment