虽然jQuery已经渐行渐远，然而在某些特定的场景和项目中却还是告别不了。基于jQuery的MiniUI框架也还应用与一些特定的场景中。
MiniUI的基本用法
1、引入(开发者只需要引用jquery.js、miniui.js、miniui.css即可)
<!DOCTYPE html />
<html>
<head>
<title>Hello MiniUI!</title>
<!--jQuery js-->
<script src="../jquery.js" type="text/javascript"></script>
<!--MiniUI-->
<link href="../themes/default/miniui.css" rel="stylesheet" type="text/css" />
<script src="../miniui.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
2、常见的API
mini.alert("Hello MiniUI!");
// 创建MiniUI的表格
<div id="datagrid1" class="mini-datagrid" style="width:800px;height:280px;"
url="../data/AjaxService.aspx?method=SearchEmployees" idField="id"
allowResize="true" pageSize="20"
allowCellEdit="true" allowCellSelect="true" multiSelect="true"
>
<div property="columns">
<div type="checkcolumn"></div>
<div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号
<input property="editor" class="mini-textbox" style="width:100%;"/>
</div>
<div field="gender" width="100" renderer="onGenderRenderer" align="center" headerAlign="center">性别
<input property="editor" class="mini-combobox" style="width:100%;" data="Genders"/>
</div>
<div field="age" width="100" allowSort="true" >年龄
<input property="editor" class="mini-spinner" minValue="0" maxValue="200" value="25" style="width:100%;"/>
</div>
<div field="birthday" width="100" allowSort="true" dateFormat="yyyy-MM-dd">出生日期
<input property="editor" class="mini-datepicker" style="width:100%;"/>
</div>
<div field="remarks" width="120" headerAlign="center" allowSort="true">备注
<input property="editor" class="mini-textarea" style="width:100%;" minHeight="80"/>
</div>
<div field="createtime" width="100" headerAlign="center" dateFormat="yyyy-MM-dd" allowSort="true">创建日期</div>
</div>
</div>
或者js来创建
$this.mini(mini.DataGrid,{
width: '100%',
autoLoad: false,
...
});
3、mini全局方法
mini.parse(); //将html标签解析为miniui控件。
解析后，才能使用mini.get获取到控件对象。
mini.layout(); 布局调整控件达到合适尺寸。
mini.get(id); 根据id获取控件对象
mini.getByUid(uid); 根据uid获取控件对象
mini.formatNumber(number, format) 格式化数字。
format取值，参考：
小数点和千分位：format="n"
货币格式：format="c"。
百分比格式：format="p"。
自定义格式：format="¥#,0.00"。
4、mini的表格
属性有：data 数据对象数组
autoLoad 自动加载数据，默认为false
columns 列对象集合
url 数据加载地址
idField 行唯一标示字段
virtualScroll 是否虚拟滚动默认为false，当数据超过500条时可提高性能、
pageIndex 页码
pageSize 每页多少条
sizeList 页尺寸集合
sortField 排序字段
sortOrder 排序方向
sortMode 排序方式
方法有：
setData(data) 设置数据
load() 加载数据
gotoPage ( index, size ) 跳转页码
loading ( ) 显示加载遮罩
unmask ( ) 取消遮罩。
setTotalCount (num) 设置总记录数
getTotalCount () 获取总记录数
事件有：
pagechanged 翻页事件
grid.on('pagechanged', function (e) {
console.log('翻页', e);
refreshPagination(e.pageIndex, e.pageSize);
initPage(e.pageIndex, e.pageSize);
grid.gotoPage(e.pageIndex,e.pageSize);
});
5、mini的下拉框
1、下拉列表输入框
<input class="mini-combobox" style="width:150px;" textField="text" valueField="id"
url="../data/countrys.txt" value="cn" showNullItem="true" allowInput="true"/>
6、mini的mini.open方法
mini.open({
targetWindow: window, //页面对象。默认是顶级页面。
url: href, //页面地址
title: title, //标题
iconCls: String, //标题图标
width: '100%', //宽度
height: '100%', //高度
allowResize: Boolean, //允许尺寸调节
allowDrag: Boolean, //允许拖拽位置
showCloseButton: Boolean, //显示关闭按钮
showMaxButton: Boolean, //显示最大化按钮
showModal: Boolean, //显示遮罩
loadOnRefresh: false, //true每次刷新都激发onload事件
onload: function () {
var iframe = this.getIFrameEl();
var data = {};
//调用弹出页面方法进行初始化
iframe.contentWindow.SetData(data);
},
ondestroy: function (action) {
if (action == "ok") {
var iframe = this.getIFrameEl();
//获取选中、编辑的结果
var data = iframe.contentWindow.GetData();
data = mini.clone(data); //必须。克隆数据。
if (window.CloseOwnerWindow) {
return window.CloseOwnerWindow('ok');
} else {
window.close();
}
}
}
}
参考： www.miniui.com/
