柠檬chang
柠檬chang

jQuery mini ui 的总结

jQuery mini  ui常用的控件

1. data

visible Boolean 是否显示控件
enabled Boolean 是否禁用控件
tooltip String 提示信息
addCls ( String )   增加样式类。
removeCls ( String )
去除样式类
2.messageBox

mini.confirm（message, title, callback）   选择提示框 messageId
mini.prompt（message, title, callback, multi）   文本输入提示框 messageId
mini.loading（message, title）   加载提示框 messageId
mini.showTips（options） 
{
    content: String,    
    state: String,      //default|success|info|warning|danger
    x: String,          //left|center|right
    y: String,          //top|center|bottom
    timeout: Number     //自动消失间隔时间。默认2000（2秒）。
}
消息提示框  
mini.showMessageBox（options） 
{
    title: String,    
    message: String,
    buttons: ["ok", "no", "cancel"],    
    iconCls: "mini-messagebox-question",
    html: String,   
    callback: function(action){
    }
}
显示提示框 messageId
mini.hideMessageBox（messageId）   隐藏提示框

3.form

1）listBox

focus ( )   获取焦点  
blur ( )   失去焦点

2）dataBinding   数据的绑定

3）form表单

Name Parameter Description Return
getData（formatter, deep） formatter：Boolean。默认false。设置true，获取的日期格式是"2010-11-12"字符串。
deep：Boolean。默认true，数据为{user:{name:"111"}}；设置false，数据为{"user.name": "111"}。		 获取表单数据 Object
setData（data, all, deep） data：Object。数据对象。
all：Boolean。默认true。设置true后对表单中所有控件设置值，没有数据则清空处理。
deep：Boolean。默认true。同上。		 设置表单数据  
clear（）   清空表单  
reset（）   重置表单  
validate（）   验证表单  
isValid（）   表单是否验证通过  
setIsValid（Boolean）   设置数据验证结果  
getErrorTexts（）   获取错误文本数组  
getErrors（）   获取验证错误的控件数组  
loading（）   加载遮罩表单区域  
unmask（）   取消遮罩  
setChanged（Boolean）   设置是否变动  
isChanged（）   判断是否变动  
setEnabled（Boolean）   设置是否禁用只读  
getFields（）   获取表单组件数组 Array
4）提交表单数据 
var form = new mini.Form("#form1");            
var data = form.getData();      //获取表单多个控件的数据
var json = mini.encode(data);   //序列化成JSON
$.ajax({
    url: "../data/FormService.aspx?method=SaveData",
    type: "post",
    data: { submitData: json },
    success: function (text) {
        alert("提交成功，返回结果:" + text);    
    }
});

5）加载表单数据


 
var form = new mini.Form("#form1");            
$.ajax({
    url: "../data/FormService.aspx?method=LoadData",
    type: "post",
    success: function (text) {
        var data = mini.decode(text);   //反序列化成对象
        form.setData(data);             //设置多个控件数据
    }
});

4.button

Name EventObject Description
click   按钮点击时发生
checkedchanged   按钮选择变化时发生

5.checkBox

Name EventObject Description
valuechanged   值改变时发生
checkedchanged   选中变化时发生
click   点击时发生

6.ListBox

textField String 文本字段 text √ √ √
dataField String 数据列表字段   √ √ √
showCheckBox Boolean 显示多选框 false √ √ √
showAllCheckBox Boolean 显示全选框 true √ √ √
multiSelect Boolean 多选 false √ √ √
showNullItem Boolean 显示空项 false √ √ √
nullItemText String 空项文本   √ √ √

7.Calendar（日期选择器）

viewDate Date 默认显示日期   √ √ √
showTime Boolean 显示时间输入框 false √ √ √
timeFormat String 时间格式化字符串 H:mm √ √ √
showHeader Boolean 显示头部 true √ √ √
showFooter Boolean 显示底部 true √ √ √
showWeekNumber Boolean 显示周数字 true √ √ √
showDaysHeader Boolean 显示周头部 true √ √ √
showMonthButtons Boolean 显示月导航按钮 true √ √ √
showYearButtons Boolean 显示年导航按钮 true √ √ √
showTodayButton Boolean 显示“今天”按钮 true √ √ √
showClearButton Boolean 显示清除日期按钮 true √ √ √

8.ButtonEdit

Name Type Description Default Set? Get? Tag?
text String 文本   √ √ √
value Object 值 false √ √ √
textName String 文本字段名称   √ √ √
selectOnFocus Boolean 获取焦点时选中文本 false √ √ √
maxLength Number 最大文本字符数 1000 √ √ √
minLength Number 最小文本字符数 0 √ √ √
allowInput Boolean 允许文本输入 true √ √ √
required Boolean 不允许为空 false √ √ √
errorMode String：icon、border、none 错误提示方式 icon √ √ √
validateOnChanged Boolean 值改变时验证 true √ √ √
showButton Boolean 是否显示弹出按钮 true √ √ √
showClose Boolean 是否显示关闭按钮 false √ √ √
indentSpace Boolean 是否显示占位空白 false √ √ √
labelField Boolean 是否显示label false √ √ √
label String label文本   √ √ √
labelStyle String label样式   √ √ √

Events

Name EventObject Description
valuechanged   值改变时发生
buttonclick   按钮点击时发生
validation   验证时发生
enter   回车时发生
keydown   键盘按下时发生
keyup   键盘按起时发生
focus   获取焦点时发生
blur   失去焦点时发生
closeclick   点击关闭按钮时激发

9.TextBox(文本输入框)

Properties

Name Type Description Default Set? Get? Tag?
emptyText String 文本为空时的提示内容   √ √ √
value String 值   √ √ √
allowInput Boolean 允许文本输入 true √ √ √
selectOnFocus Boolean 获取焦点时选中文本 false √ √ √
maxLength Number 最大字符串   √ √ √
inputStyle String 输入框样式。比如：inputStyle="text-align:right;"   √ √ √
errorMode String：icon、border、none 错误提示方式 icon √ √ √
validateOnChanged Boolean 值改变时验证 true √ √ √
validateOnLeave Boolean 失去焦点时验证 true √ √ √
indentSpace Boolean 是否显示占位空白 false √ √ √
required Boolean 不允许为空 false √ √ √
labelField Boolean 是否显示label false √ √ √
label String label文本   √ √ √
labelStyle String label样式   √ √ √
requiredErrorText String   不能为空 √ √ √
vtype String 验证规则。如vtype="email"。参考示例。   √ √ √
emailErrorText String   请输入邮件格式 √ √ √
urlErrorText String   请输入URL格式 √ √ √
floatErrorText String   请输入数字 √ √ √
intErrorText String   请输入整数 √ √ √
dateErrorText String   请输入日期格式 {0} √ √ √
maxLengthErrorText String   不能超过 {0} 个字符 √ √ √
minLengthErrorText String   不能少于 {0} 个字符 √ √ √
maxErrorText String   数字不能大于 {0} √ √ √
minErrorText String   数字不能小于 {0} √ √ √
rangeLengthErrorText String   字符数必须在 {0} 到 {1} 之间 √ √ √
rangeErrorText String   数字必须在 {0} 到 {1} 之间 √ √ √

多行输入框：