...
|
...
|
@@ -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|int |是 | undefined |宽度|
|
|
|
|height |string|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|array|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 |
...
|
...
|
|