|
|
##**编写目的:**
|
|
|
**编写目的:**
|
|
|
基于这次CRM项目选用bootstrap作为前台框架。但是使用原生态的bootstrap需要在页面上写N多的div,table等标签。
|
|
|
这个就需要对bootstrap的样式,风格有很深的了解的人才能去使用。基于这样的一个背景,我这里对bootstrap的一些常用框架做了jquery风格的插件封装
|
|
|
现在市面上关于bootstrap的插件很多,但是没有一家对bootstrap插件做一个完整的封装。
|
|
|
|
|
|
###**插件优点**:
|
|
|
**插件优点**:
|
|
|
|
|
|
- 完全采用jquery风格插件的方式统一封装。
|
|
|
- 使用简单,完全面向对象的设计。
|
...
|
...
|
@@ -12,14 +12,14 @@ |
|
|
**该文档基于插件的三大要素(属性,事件,方法)来详细描述每个插件的使用方法**
|
|
|
|
|
|
**枚举定义**
|
|
|
|
|
|
1、面板样式
|
|
|
panel-primary
|
|
|
panel-success
|
|
|
panel-info
|
|
|
panel-warning
|
|
|
panel-danger
|
|
|
- panel-primary
|
|
|
- panel-success
|
|
|
- panel-info
|
|
|
- panel-warning
|
|
|
- panel-danger
|
|
|
|
|
|
2、
|
|
|
|
|
|
|
|
|
|
...
|
...
|
@@ -32,7 +32,7 @@ |
|
|
显示一个导航菜单
|
|
|
|
|
|
使用举例
|
|
|
|
|
|
```javascript
|
|
|
$("#leftMenu").accordion({
|
|
|
panelClass : "panel-primary",
|
|
|
idField : "menuId",
|
...
|
...
|
@@ -53,6 +53,8 @@ |
|
|
return data.data;
|
|
|
}
|
|
|
});
|
|
|
```
|
|
|
|
|
|
|
|
|
**该插件可供选择的属性(option)有:**
|
|
|
|
...
|
...
|
@@ -78,10 +80,66 @@ |
|
|
|
|
|
|
|
|
|
|
|
**该插件可供选择的事件(method)有:**
|
|
|
**该插件暂未提供可供选择的方法(method):**
|
|
|
|
|
|
|
|
|
----------
|
|
|
|
|
|
|
|
|
## 2、显示一个警告框(alerts)##
|
|
|
|
|
|
显示一个导航菜单
|
|
|
|
|
|
使用举例
|
|
|
```javascript
|
|
|
$("#leftMenu").accordion({
|
|
|
panelClass : "panel-primary",
|
|
|
idField : "menuId",
|
|
|
pidField : "parentMenuId",
|
|
|
textField : "menuName",
|
|
|
ajaxParam : {
|
|
|
dataType : "json",
|
|
|
url: "/SysMenuController/getSysMenuList.do",
|
|
|
type: "POST"
|
|
|
},
|
|
|
onClickMenu : function(item, parent) {
|
|
|
$("#body").load("/crm" + item.menuUrl);
|
|
|
},
|
|
|
loadFilter : function(data) {
|
|
|
if (!data || data.code != 200) {
|
|
|
return null;
|
|
|
}
|
|
|
return data.data;
|
|
|
}
|
|
|
});
|
|
|
```
|
|
|
|
|
|
|
|
|
**该插件可供选择的属性(option)有:**
|
|
|
|
|
|
| 属性名称 | 属性类型 | 可否为空 | 默认值 | 备注 |
|
|
|
| ---------|:--------:| --------:|-----:|------:|-----:|
|
|
|
|panelClass |string |是 | "panel-default" |面板样式(可选值见枚举定义1)|
|
|
|
|rootPid |int |否 |0 |最外层节点的pid值|
|
|
|
|idField |string |是 |"id" |对象中id的属性名称|
|
|
|
|pidField |string |是 |"pid" |对象中pid的属性名称|
|
|
|
|textField |string |是 |"text" |对象中显示在菜单中的名称的属性|
|
|
|
|ajaxParam |object |是 |{} |从后端获取数据的ajax的对象|
|
|
|
|dataList |array |是 |[] |需要显示的的对象数组(ajaxParam和dataList不需要同时使用,如果同时有值,则以ajaxParm为准)|
|
|
|
|loadFilter |function |是 |null |从后端获取值后做特殊处理(该函数接受一个参数data,即为从后端ajax返回的值)|
|
|
|
|
|
|
|
|
|
|
|
|
**该插件可供选择的事件(event)有:**
|
|
|
|
|
|
| 方法名称 | 参数 | 备注 |
|
|
|
| 事件名称 | 参数 | 备注 |
|
|
|
| ---------|:--------:| --------:|
|
|
|
|onLoadSuccess |data |菜单加载完成之后执行(参数data即为ajax或直接传入的dataList)|
|
|
|
|onClickMenu |item,parent |点击菜单的时候执行|
|
|
|
|
|
|
|
|
|
|
|
|
**该插件暂未提供可供选择的方法(method):**
|
|
|
|
|
|
|
|
|
|
...
|
...
|
|