MiniUI知识点汇总.doc

MiniUI知识点汇总
一、Layout布局
1.1 Layout布局器mini-layout

region String 面板名称
showSplit Boolean 是否显示分割条 true
showHeader Boolean 是否显示头部 true
allowResize Boolean 是否允许拖拽调节true

<div id="layout1" class="mini-layout" style="width:600px;height:400px;" borderStyle="border:solid 1px #aaa;">
<div title="north" region="north" height="80" showSplitIcon="true" >
north
</div>
<div title="south" region="south" showSplit="false" showHeader="true" height="80" showSplitIcon="true" >
south
</div>
<div title="west" showProxyText="true" region="west" width="200" expanded="false" showSplitIcon="true">
west
</div>
<div title="east" region="east" showCloseButton="true" showSplitIcon="true">
east
</div>
<div title="center" region="center" >
<input type="button" value="隐藏" onclick="hideHeader()"/>
<input type="button" value="显示" onclick="showHeader()"/><br /><br />
<input type="button" value="折叠" onclick="collapsePanel()"/>
<input type="button" value="展开" onclick="expandPanel()"/>
</div>
</div>

<script type="text/javascript">
mini.parse();//将html标签解析为miniui控件。
//解析后，才能使用mini.get获取到控件对象。

var layout = mini.get("layout1");

function hideHeader() {
layout.updateRegion("north", { visible: false }); //更新region面板
//
}
function showHeader() {
layout.updateRegion("north", { visible: true });
}
function collapsePanel() {
layout.updateRegion("east", { expanded: false });
}
function expandPanel() {
layout.updateRegion("east", { expanded: true });
}

</script>

1.2 splitter分割器mini-splitter

<h4>横向分割器</h4>
<div class="mini-splitter" style="width:350px;height:200px;">
<div size="30%" showCollapseButton="true" style="padding:5px;">
1
</div>
<div showCollapseButton="true">
2
</div>
</div>

<h4>竖向分割器</h4>
<div class="mini-splitter" vertical="true" style="width:350px;height:200px;">
<div size="30%" showCollapseButton="true">
1
</div>
<div showCollapseButton="true">
2
</div>
</div>

1.3 window弹出面包mini-window

show ( left, top )
showAtPos ( left, top )
left: left, center, right
top: top, middle, bottom
弹出显示面板

x: <select id="x">
<option value="left">Left</option>
<option value="center" >Center</option>
<option value="right" selected>Right</option>
</select>
y: <select id="y">
<option value="top" >Top</option>
<option value="middle" >Middle</option>
<option value="bottom" selected>Bottom</option>
</select>
<input type="button" value="showAtPos" onclick="showAtPos()"/>

<div id="win1" class="mini-window" title="Window" style="width:400px;height:250px;"
showMaxButton="true" showCollapseButton="true" showShadow="true"
showToolbar="true" showFooter="true" showModal="false" allowResize="true" allowDrag="true"
>
<div property="toolbar" style="padding:5px;">
<input type='button' value='Hide' onclick="hideWindow()" style='vertical-align:middle;'/>
</div>
<div property="footer" style="text-align:right;padding:5px;padding-right:15px;">
<input type='button' value='Hide' onclick="hideWindow()" style='vertical-align:middle;'/>
</div>

1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />
</div>

<script type="text/javascript">
mini.parse();
function showAtPos() {
var win = mini.get("win1");
var x = document.getElementById("x").value;
var y = document.getElementById("y").value;

win.showAtPos(x, y);

}
function hideWindow() {
var win = mini.get("win1");
win.hide();
}
showAtPos();

</script>

二、forms表单
2.1 spinner下拉列表组建

<input id="sp1" class="mini-spinner" minValue="100" maxValue="250" />

minValue最小值 maxValue最大值
allowLimitValue Boolean 是否强制约束大小范围 true
changeOnMousewheel Boolean 是否滚动滚轮改变值 true

2.1.1 mini-timespinner

<input id="tsp1" class="mini-timespinner" format="H:mm" />

2.2 ButtonEdit按钮弹出框

<input id="btnEdit1" class="mini-buttonedit" onbuttonclick="onButtonEdit"/>

function onButtonEdit(e) {
var btnEdit = this;

mini.open({
url: "MultiSelectTreeWindow.html",
title: "多选树",
width: 350,
height: 350,
ondestroy: function (action) {

if (action == "ok") {
var iframe = this.getIFrameEl();

var data = iframe.contentWindow.GetData();
data = mini.clone(data);

btnEdit.setValue(data.id);
btnEdit.setText(data.text);
}
}
});

}

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

2.3 CheckBox复选框

<div id="ck1" name="product" class="mini-checkbox" checked="false" readOnly="false" text="大堂经理" onvaluechanged="onValueChanged"></div>

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

2.4 button按钮mini-button mini-button-iconTop

<a class="mini-button mini-button-iconTop" iconCls="icon-add" onclick="onClick" >增加</a>
<a class="mini-button mini-button-iconTop" iconCls="icon-edit" onclick="onClick" >修改</a>

<script type="text/javascript">
mini.parse();
function onClick(e) {
var button = e.sender;
var iconCls = button.getIconCls();
var text = button.getText();
if (iconCls) {
alert("text: " + text + "\nicon: " + iconCls);
} else {
alert(text);
}
}

2.5 TreeSelect树状选择框mini-treeselect

<input id="select1" class="mini-treeselect" url="../data/listTree.txt" multiSelect="true"
textField="text" valueField="id" parentField="pid" checkRecursive="true"
showFolderCheckBox="false" expandOnLoad="true" showClose="true" oncloseclick="onCloseClick"
popupWidth="200"
/>

<script type="text/javascript">
function setValue() {
var obj = mini.get("select1");
obj.setValue("base,button,ajax");
}
function getValue() {
var obj = mini.get("select1");
alert(obj.getValue() + ":" + obj.getText());
}
function enable() {
var obj = mini.get("select1");
obj.enable();
}
function disable() {
var obj = mini.get("select1");
obj.disable();
}

function onCloseClick(e) {
var obj = e.sender;
obj.setText("");
obj.setValue("");
}
</script>

<h4>单选：禁止选中父节点</h4>
<input id="select2" class="mini-treeselect" url="../data/listTree.txt" multiSelect="false" valueFromSelect="false"
textField="text" valueField="id" parentField="pid" value="control" onbeforenodeselect="beforenodeselect" allowInput="true"
showRadioButton="true" showFolderCheckBox="false"
/>

<script type="text/javascript">

function beforenodeselect(e) {
//禁止选中父节点
if (e.isLeaf == false) e.cancel = true;
}

function onCloseClick(e) {
var obj = e.sender;
obj.setText("");
obj.setValue("");
}
</script>

2.6 Hidden隐藏字段mini-password

单行输入框：<input id="tb" class="mini-textbox" emptyText="请输入商品编号" vtype="email"/> <br /><br />
密码输入框：<input class="mini-password" value="12345" /> <br /><br />
多行输入框：<textarea class="mini-textarea" emptyText="请输入备注"></textarea> <br />

<script type="text/javascript">
mini.parse();
</script>

2.7 RadioButtonList单选框组mini-radiobuttonlist

<div id="rbl" class="mini-radiobuttonlist" repeatItems="2" repeatLayout="table" repeatDirection="vertical"
textField="text" valueField="id" value="cn"
url="../data/countrys.txt" >
</div>
<script type="text/javascript">
mini.parse();
var rbl = mini.get("rbl");
rbl.on("valuechanged", function (e) {
alert(this.getValue());
});
</script>

2.8 form表单验证

<div id="form1" >
<table>
<tr>
<td><label for="username$text">帐号：</label></td>
<td>
<input name="username" vtype="email" class="mini-textbox" required="true" requiredErrorText="帐号不能为空"/>
</td>
</tr>
<tr>
<td><label for="pwd$text">密码：</label></td>
<td>
<input name="pwd" class="mini-password" vtype="minLength:5" required="true" minLengthErrorText="密码不能少于5个字符" />
</td>
</tr>
<tr>
<td></td>
<td>
<input value="Login" type="button" onclick="submitForm()" />
</td>
</tr>
</table>
</div>

<script type="text/javascript">
mini.parse();

function submitForm() {

var form = new mini.Form("#form1");

form.validate();
if (form.isValid() == false) return;

//提交数据
var data = form.getData();
var json = mini.encode(data);
alert("提交成功");
}
</script>

2.9 TextBox文本输入框mini-textbox

vtype
String
验证规则。如vtype="email"。参考示例。

2.10 DatePicker 日期选择器mini-datepicker

<input id="date1" class="mini-datepicker" value="2010-01-01" />

2.11 FileUpload文件上传控件（flash实现）。mini-fileupload

<input id="fileupload1" class="mini-fileupload" name="Fdata" limitType="*.txt"
flashUrl="swfupload/swfupload.swf"
uploadUrl="upload.aspx"
onuploadsuccess="onUploadSuccess"
onuploaderror="onUploadError" onfileselect="onFileSelect"
/>
<br/>
<input type="button" value="上传" onclick="startUpload()"/>

<script type="text/javascript">
mini.parse();

//动态设置url
// var fileupload = mini.get("fileupload1");
// fileupload.setUploadUrl("upload.aspx");

function onFileSelect(e) {
//alert("选择文件");
}
function onUploadSuccess(e) {
alert("上传成功：" + e.serverData);
this.setText("");
}
function onUploadError(e) {
}
function startUpload() {
var fileupload = mini.get("fileupload1");
fileupload.startUpload();
}
</script>

buttonText String 按钮文本
limitType String 文件限制类型。如"*.bmp;*.txt"
limitSize String 文件尺寸限制。如"10MB"
uploadUrl String 文件上传路径地址
flashUrl String Flash路径地址
uploadOnSelect Boolean 文件选择后即上传

startUpload（） 上传文件
setPostParam ( Object ) 设置post参数对象。如：fileupload.setPostParam({a:1, b: true});

fileselect 文件选择时激发
uploadsuccess 上传成功
uploaderror {
sender: Object,
file: Object,
code: String,
message: String
}

上传失败

uploadcomplete 上传完成

三、base基本
3.1.base
mini.parse()
mini.layout()
mini.get(id)
mini.getbyName(name)
mini.getbyName(name, parent)
name: 控件name;
parent: 可选。限定获取控件的范围。
根据name获取单个控件
mini.getsbyName(name)
mini.getsbyName(name, parent)
name: 控件name;
parent: 可选。限定获取控件的范围。
根据name获取多个控件

3.2 ajax jquery参考手册

3.3 JSON组件

Name
Parameter
Description
Return
mini.encode ( Object )

把JS对象序列化为字符串
String
mini.decode ( json, autoParseDate )
{
json: String。json字符串。
autoParseDate: Boolean。是否自动解析日期字符串为Date类型。
}
把字符串反序列化为JS对象
Object

3.4 Date日期类型处理组件
Name
Parameter
Description
Return
mini.parseDate ( String )
String: 特定格式字符串。
支持如下：
· 2010-11-22
· 2010/11/22
· 11-22-2010
· 11/22/2010
· 2010-11-22T23:23:59
· 2010/11/22T23:23:59
· 2010-11-22 23:23:59
· 2010/11/22 23:23:59
把字符串转换成Date类型对象。
Date
mini.formatDate ( Date, String )
Date: 日期类型对象。
String: 格式化字符串。例如："yyyy-MM-dd HH:mm:ss"。
具体格式说明，请参考下面的“Format”内容。
把Date类型转换为字符串
String

四、lists目录，grid网格

4.1 Tree树目录

A、点击“快捷”

<a class="mini-button mini-button-iconTop" iconCls="icon-add" onclick="onQuickClick" plain="true">快捷</a>
<a class="mini-button mini-button-iconTop" iconCls="icon-edit" onclick="onClick" plain="true" >首页</a>

plain 背景透明
mini-button-iconTop
iconCls 图标样式类

一、对应函数：
function onQuickClick(e) {
tree.expandPath("datagrid");//展开
tree.selectNode("datagrid");//选中，触发事件
}
expandPath ( node ) 展开节点路径
selectNode ( node ) 选中节点

二、触发函数：
<ul id="leftTree" class="mini-tree" url="../data/listTree.txt" style="width:100%;height:100%;"
showTreeIcon="true" textField="text" idField="id" resultAsTree="false"
onnodeselect="onNodeSelect"
>
</ul>

三、触发函数：
function onNodeSelect(e) {
var node = e.node;
var isLeaf = e.isLeaf;//是否子节点
if (isLeaf) {
showTab(node);
}
}
isLeaf ( node ) 是否叶子节点。

四、触发函数：
function showTab(node) {
var tabs = mini.get("mainTabs");//获得对象
var id = "tab$" + node.id;//左边选中节点的id
var tab = tabs.getTab(id);//在mainTabs中得到左边id的tab
if (!tab) {//如果得不到tab新建一个;本来就有不执行该语句
tab = {};
tab._nodeid = node.id;
tab.name = id;
tab.title = node.text;
tab.showCloseButton = true;
//这里拼接了url，实际项目，应该从后台直接获得完整的url地址
tab.url = mini_JSPath + "../../docs/api/" + node.id + ".html";
tabs.addTab(tab); //增加tab面板到mainTabs上
}
tabs.activeTab(tab);//选中tab面板
}
addTab ( Object [, index] ) Object：tab对象。index：Number。索引号。增加tab。
activeTab ( tab ) 选中tab面板