jQuery mini ui 的总结

最新推荐文章于 2026-04-22 10:42:46 发布

原创最新推荐文章于 2026-04-22 10:42:46 发布 · 5.2k 阅读

9 ·

本内容遵循CC 4.0 BY-SA版权协议

mini ui 同时被 2 个专栏收录

7 篇文章

订阅专栏

jquery

2 篇文章

订阅专栏

这篇博客总结了jQuery mini UI库中的一些常用控件和属性，包括Events和Properties。重点介绍了data、form（如listBox、dataBinding、form表单）、button、checkBox、ListBox、Calendar、ButtonEdit等组件的使用。还提到了TextBox文本输入框以及多行输入框textarea的应用。此外，文章探讨了如何在grid中实现列的拖动功能以及处理列出现滚动条的情况，提供了两种解决方法。

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} 之间	√	√	√

多行输入框：<textarea class="mini-textarea">

10.TreeSelect(树形下拉框)

class="mini-treeselect"

Name	Type	Description	Default	Set?	Get?	Tag?
virtualScroll	Boolean	虚拟模式。适用于大数据显示场合。	false	√	√	√
data	Array	树形数据对象		√	√	√
url	String	数据加载地址		√	√	√
ajaxType	String	ajax类型：get/post。		√	√	√
ajaxOptions	Object	ajax配置对象。如：ajaxOptions="{type:'post', async: true, data: {a:1, b: true}, dataType: 'text', contentType: 'application/x-www-form-urlencoded;charset=utf-8'}"。		√	√	√
value	String	选中的节点值		√	√	√
valueField	String	值字段。	id	√	√	√
parentField	String	父节点字段	pid	√	√	√
resultAsTree	Boolean	url数据是否列表	true	√	√	√
textField	String	节点文本字段	text	√	√	√
pinyinField	String	拼音字段		√	√	√
multiSelect	Boolean	多选	false	√	√	√
checkRecursive	Boolean	是否联动选择	false	√	√	√
showTreeIcon	Boolean	显示节点图标	true	√	√	√
showTreeLines	Boolean	显示树形线条	true	√	√	√
showFolderCheckBox	Boolean	显示父节点checkbox	false	√	√	√
autoCheckParent	Boolean	是否自动选择父节点。比如选中子节点，将父节点也自动选中。	false	√	√	√
expandOnLoad	Boolean/Number	加载后是否展开。比如：true展开所有节点；0展开第一级节点。以此类推。	false	√	√	√
valueFromSelect	Boolean	必须从选择项录入	false	√	√	()√

11.htmlFile(文件上传控件)

Name	Type	Description	Default	Set?	Get?	Tag?
buttonText	String	按钮文本		√	√	√
limitType	String	文件限制类型。如".bmp;.txt"		√	√	√

12.自定义页码数量

 
   <
   div 
   class=
   "mini-fit"
   >
  
 
   <
   div 
   class=
   "mini-dataGrid" 
   id=
   "personnelinfo-grid" 
   allowAlternating=
   "true" 
   pageSize=
   "${pageSize}" 
  

    sizeList=
   "${sizeList}" 
   multiSelect=
   "true" 
   allowResizeColumn=
   "false" 
   allowMoveColumn=
   "false"
  
 
   allowSortColumn=
   "true" 
   showEmptyText=
   "true" 
   emptyText=
   "暂无数据"
  
 
   style=
   "width: 100%; height: 100%"
   ></
   div
   >
  
 
   </
   div
   >
  
 
   </
   div
   >
  

   

  

改为

 
  <
  div 
  class=
  "mini-fit"
  >
 
 
  <
  div 
  class=
  "mini-dataGrid mini-pager" 
  id=
  "personnelinfo-grid" 
  allowAlternating=
  "true" 
 

   pageSize=
  "${pageSize}" 
  sizeList=
  "[1,10,20,100]"
 
 
  multiSelect=
  "true" 
  allowResizeColumn=
  "false" 
  allowMoveColumn=
  "false"
 
 
  allowSortColumn=
  "true" 
  showEmptyText=
  "true" 
  emptyText=
  "暂无数据"
 
 
  style=
  "width: 100%; height: 100%"
  ></
  div
  >
 
 
  </
  div
  >
 
 
  </
  div
  >
 

  

 

13.miniui grid列可进行拖动

1）在grid 页面的

allowResizeColumn=
 "false" （允许调整列的大小）
  allowMoveColumn=
  "false" （ 允许移动列）
 

删除掉

2）js

14. 列出现滚动条的情况

两种方法：

《1》在jsp

《2》