bootstrap-plugin.md
4.53 KB
编写目的： 基于这次CRM项目选用bootstrap作为前台框架。但是使用原生态的bootstrap需要在页面上写N多的div，table等标签。 这个就需要对bootstrap的样式，风格有很深的了解的人才能去使用。基于这样的一个背景，我这里对bootstrap的一些常用框架做了jquery风格的插件封装 现在市面上关于bootstrap的插件很多，但是没有一家对bootstrap插件做一个完整的封装。
插件优点：
- 完全采用jquery风格插件的方式统一封装。
- 使用简单，完全面向对象的设计。
- 插件文档齐全。
该文档基于插件的三大要素（属性，事件，方法）来详细描述每个插件的使用方法
枚举定义
1、面板样式
- panel-primary
- panel-success
- panel-info
- panel-warning
- panel-danger
1、显示一个导航菜单（accordion）
显示一个导航菜单
使用举例
$("#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）：
2、显示一个警告框（alerts）
显示一个导航菜单
使用举例
$("#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）：