Authored by huangping

Update bootstrap-plugin.md

... ... @@ -28,6 +28,8 @@
- [11、面板(panel)](#11显示一个面板插件panel)
- [12、显示一个下拉框(select)](#12显示一个下拉框select)
- [13、显示一个表格(table)](#13显示一个表格table)
- [14、显示一个带图标的文本框(textbox)](#14显示一个带图标的文本框textbox)
- [15、显示一个可以验证框(validate)](#15显示一个可以验证框validate)
... ... @@ -1004,8 +1006,171 @@ http://git.yoho.cn/yoho30/yohobuy-crm/blob/master/web/src/main/webapp/js/bootstr
----------
## 14、显示一个带图标的文本框(textbox)##
显示一个面板插件
依赖于:无
继承于:validate
使用举例
```html
<input type="text" id="txt" />
```
```javascript
$("#txt").textbox({
placeholder : "请输入内容"
iconCls : "glyphicon glyphicon-glass"
});
```
**代码地址**
http://git.yoho.cn/yoho30/yohobuy-crm/blob/master/web/src/main/webapp/js/bootstrap-plugin/bootstrap.textbox.js
**可供选择的私有属性(option)有:**
| 属性名称 | 属性类型 | 可否为空 | 默认值 | 备注 |
| ---------|:--------:| --------:|-----:|------:|-----:|
|border-radius |string |是 | "5px" |输入框的圆角|
|width |string&#124;int |是 | undefined |宽度|
|height |string&#124;int |是 | undefined |高度|
|placeholder |string |是 | "请输入内容" |文本框提示文字|
|value |string |是 | "" |文本框内容|
|type |string |是 | "text" |文本框类型|
|editable |boolean |是 | true |是否可以编辑|
|readonly |boolean |是 | false |是否只读|
|disabled |boolean |是 | false |是否禁用|
|iconCls |string |是 | "" |文本框图标(取值见Bootstrap的Glyphicons字体图标)|
|wrap |boolean |是 | false |是否使用div包一下|
**该插件的事件继承与validate **
**该插件的方法继承与validate。并且提供的私有可供选择的方法(method):**
| 方法名称 | 参数 | 备注 |
| ---------|:--------:| --------:|
|readonly |value |传入value值,则设置输入框状态是否只读;如果不传value值,则获取该输入框的只读状态|
|value |value |设置或获取输入框的值|
----------
## 15、显示一个可以验证框(validate)##
显示一个可以验证输入内容的验证框
如果输入的内容验证失败,会有显示一个提示框
依赖于:无
继承于:无
使用举例
```html
<input type="text" id="txt" />
```
```javascript
$("#txt").validate({
required : true
validType : "maxlength[5]" //设置该输入框最小输入文本长度为5
});
```
**代码地址**
http://git.yoho.cn/yoho30/yohobuy-crm/blob/master/web/src/main/webapp/js/bootstrap-plugin/bootstrap.validate.js
**可供选择的私有属性(option)有:**
| 属性名称 | 属性类型 | 可否为空 | 默认值 | 备注 |
| ---------|:--------:| --------:|-----:|------:|-----:|
|required |boolean |是 | false |是否必填项|
|validType |string&#124;array&#124;function |是 | "该值为必填项" |该值为空时并且required=true的提示|
|missingMessage |string |是 | "该值为必填项" |该值为空时并且required=true的提示|
|invalidMessage |string |是 | "" |验证失败时,并且验证的函数只返回false的时候显示|
|tipPosition |string |是 | "right" |提示框的位置('left','right','top','bottom')|
|validateOnBlur |boolean |是 | false |是否失去焦点时验证|
其中validType属性
- string 指定一个默认或自定义的验证方法
- array 指定多个默认或者自定义验证方法
- function 传入验证框的内容,返回true,则验证通过,返回string,则验证不通过,并且把该string作为提示消息。该函数接受一个参数value,就是输入框的内容
**可供选择的私有事件(event)有:**
| 事件名称 | 参数 | 备注 |
| ---------|:--------:| --------:|
|onBeforeShow |none |当提示框显示之前执行|
|onAfterShow |none |当提示框显示之后执行|
|onBeforeHide |none |当提示框隐藏之前执行|
|onAfterHide |none |放提示框隐藏之后执行|
|onBeforeValidate |none |当验证之前执行|
|onAfterValidate |none |当验证之后执行|
**该插件提供的私有可供选择的方法(method):**
| 方法名称 | 参数 | 备注 |
| ---------|:--------:| --------:|
|validate |none |验证该输入框的内容|
|isValid |none |验证该输入框的内容,并且返回验证结果|
|enableValidation |none |开启验证功能|
|disableValidation |none |关闭验证功能|
**系统提供了一些常用的验证规则**
- minlength(最小长度)
- maxlength(最大长度)
- length(界与最小与最大长度之间。使用方法validType[2,5]
- url(判断是否是url)
你也可以自己自定义一些验证规则。
```javascript
$.extend($.fn.validate.defaults.rules, {
isNumber : function(value, param) {
var reg = /[0-9]+/;
if (!reg.test(value)) {
return "非数字";
}
}
});
这样使用这个规则
$("#txt").validate({
required : true
validType : "isNumber"
});
```
 
\ No newline at end of file
... ...