Authored by huangping

Update bootstrap-plugin.md

... ... @@ -13,14 +13,15 @@
**该文档基于插件的三大要素(属性,事件,方法)来详细描述每个插件的使用方法**
## 插件列表 ##
- 导航菜单(accordion)
- 告警框(alerts)
- 面包屑导航(breadcrumb)
- 组合框(combo)
- 组合下拉框(combobox)
- 组合下拉表格(combotable)
- 模态对话框(dialog)
- 告警框(alerts)
- 1、导航菜单(accordion)
- 2、告警框(alerts)
- 3、面包屑导航(breadcrumb)
- 4、组合框(combo)
- 5、组合下拉框(combobox)
- 6、组合下拉表格(combotable)
- 7、模态对话框(dialog)
- 8、输入表单(form)
- 9、菜单(menu)
## 枚举定义 ##
... ... @@ -33,10 +34,20 @@
- panel-danger
2、警告框类型
- default
- primary
- success
- info
- warning
- danger
3、按钮样式
- btn-default
- btn-primary
- btn-success
- btn-info
- btn-warning
- btn-danger
... ... @@ -506,6 +517,178 @@ http://git.yoho.cn/yoho30/yohobuy-crm/blob/master/web/src/main/webapp/js/bootstr
|destory |none |销毁对话框|
----------
## 8、显示一个输入表单(form)##
显示一个输入表单
利用该插件,可以实现ajax无刷新的上传文件功能
依赖于:无
继承于:无
使用举例
```html
<form id="f1" name="f1"></form>
```
```javascript
//初始化form
$("#f1").form({
loadUrl : "xxxx.do",
loadParams : {
id : 1,
name : "name"
}
});
/*初始化form后,会自动把从loadUrl后端返回的数据,按照对象名称与form里面的表单的name自动装载数据。
例如:通过loadUrl返回的
data={
userName:"admin",
userId:1
};
这个时候,form表单会自动把form里面name=userName的输入框赋值为admin,name=userId的输入框赋值为1
*/
//提交表单
//调用submit方法时,会自动把form里面的所有表单信息提交到后台
$("#f1").form("submit", {
submitUrl : "xxx.do",
success : function(data) {
//回调执行
}
});
```
**代码地址**
http://git.yoho.cn/yoho30/yohobuy-crm/blob/master/web/src/main/webapp/js/bootstrap-plugin/bootstrap.form.js
**可供选择的私有属性(option)有:**
| 属性名称 | 属性类型 | 可否为空 | 默认值 | 备注 |
| ---------|:--------:| --------:|-----:|------:|-----:|
|loadDepend |array |是 | [] |初始化form的时候,依赖哪些插件完成|
|id |string |是 | "" |form的id|
|name |string |是 | "" |form的name|
|submitUrl |string |是 | "" |提交form时的url|
|submitData |object |是 | {} |提交form时额外传递的参数|
|method |string |是 | "POST" |提交或初始化form的时候,使用的ajax提交方式|
|dataType |string |是 | "json" |提交或初始化form的时候,后端返回的数据格式|
|hasFile |boolean |是 | false |form中是否包含文件上传(如果为true,则会自动创建一个iframe进行无刷新的提交)|
|loadData |object |是 | {} |初始化form的对象|
|loadUrl |string |是 | "" |初始化form时,请求的url|
|loadParams |string |是 | "" |初始化form时,额外传递的参数|
|loadFilter |function(data) |是 | return data; |初始化form时,对后端返回的值进行特殊处理|
**可供选择的私有事件(event)有:**
| 事件名称 | 参数 | 备注 |
| ---------|:--------:| --------:|
|onBeforeSubmit |none |提交前执行,如果返回false,则阻止提交|
|success |data |提交完后,的回调函数|
|onBeforeLoad |loadParams |加载数据前执行,如果返回false,则停止加载数据|
|onLoadSuccess |data |form加载完成之后执行|
**提供的私有可供选择的方法(method):**
| 方法名称 | 参数 | 备注 |
| ---------|:--------:| --------:|
|submit |submitParam |提交form,参数为提交时传递的额外参数|
|validate |none |验证form中所有的加了validate插件的表单,全部通过,则返回true,只要有一个验证不通过,则返回false|
|load |data |根据指定的值,加载form|
|reset |none |清空form|
----------
## 9、显示一个菜单(menu)##
显示一个可以多层级的菜单
依赖于:无
继承于:无
使用举例
```html
<div id="menu"></div>
```
```javascript
$("#menu").menu({
url : "xxxx.do"
});
//菜单中,url返回值或data的格式为
[
{id:1,pid:0,text:"菜单1"},
{id:2,pid:0,text:"菜单2"},
{id:3,pid:0,text:"菜单3"},
{id:4,pid:1,text:"菜单4"},
{id:5,pid:1,text:"菜单5"},
{id:6,pid:2,text:"菜单6"},
{id:7,pid:2,text:"菜单7"}
]
//也可以用idField,pidField,textField来指定data中对应的属性名
```
**代码地址**
http://git.yoho.cn/yoho30/yohobuy-crm/blob/master/web/src/main/webapp/js/bootstrap-plugin/bootstrap.menu.js
**可供选择的私有属性(option)有:**
| 属性名称 | 属性类型 | 可否为空 | 默认值 | 备注 |
| ---------|:--------:| --------:|-----:|------:|-----:|
|buttonClass |string |是 | "btn-primary" |菜单按钮的样式。取值参见枚举定义3|
|buttonName |string |是 | "下拉菜单" |下拉菜单的文本|
|rootPid |number |是 | 0 |菜单中根节点的pid值|
|idField |string |是 | "id" |data中的id属性名称|
|pidField |string |是 | "pid" |data中的pid属性名称|
|textField |string |是 | "text" |data中的text属性名称|
|url |string |是 | "" |到后端请求的url地址|
|queryParams |object |是 | {} |提交到后端请求额外参数|
|dataType |string |是 | "json" |到后端请求的url后返回数据的格式|
|type |string |是 | "POST" |到后端请求的url时的提交方式|
|data |array |是 | [] |直接使用该值进行加载菜单|
|loadFilter |function(data) |是 | |请求|
**可供选择的私有事件(event)有:**
| 事件名称 | 参数 | 备注 |
| ---------|:--------:| --------:|
|onBeforeSubmit |none |提交前执行,如果返回false,则阻止提交|
|success |data |提交完后,的回调函数|
|onBeforeLoad |loadParams |加载数据前执行,如果返回false,则停止加载数据|
|onLoadSuccess |data |form加载完成之后执行|
**提供的私有可供选择的方法(method):**
| 方法名称 | 参数 | 备注 |
| ---------|:--------:| --------:|
|submit |submitParam |提交form,参数为提交时传递的额外参数|
|validate |none |验证form中所有的加了validate插件的表单,全部通过,则返回true,只要有一个验证不通过,则返回false|
|load |data |根据指定的值,加载form|
|reset |none |清空form|
... ...