MiniUI知识点汇总.docx

1、MiniUI知识点汇总MiniUI知识点汇总一、Layout布局1.1 Layout布局器mini-layoutregion String 面板名称showSplit Boolean 是否显示分割条 trueshowHeader Boolean 是否显示头部 trueallowResize Boolean 是否允许拖拽调节true north south west east mini.parse();/将html标签解析为miniui控件。/解析后，才能使用mini.get获取到控件对象。 var layout = mini.get(layout1); function hideHeader(

2、) 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 ); 1.2 splitter分割器mini-splitter横向分割器 1 2

3、 竖向分割器 1 2 1.3 window弹出面包mini-windowshow ( left, top )showAtPos ( left, top ) left: left, center, right top: top, middle, bottom 弹出显示面板 x: Left Center Right y: Top Middle Bottom 1111111111111111 mini.parse(); function showAtPos() var win = mini.get(win1); var x = document.getElementById(x).value; va

4、r y = document.getElementById(y).value; win.showAtPos(x, y); function hideWindow() var win = mini.get(win1); win.hide(); showAtPos();二、forms表单2.1 spinner下拉列表组建minValue最小值 maxValue最大值allowLimitValue Boolean 是否强制约束大小范围 true changeOnMousewheel Boolean 是否滚动滚轮改变值 true2.1.1 mini-timespinner2.2 ButtonEdit按

5、钮弹出框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.i

6、d); btnEdit.setText(data.text); ); valuechanged 值改变时发生 buttonclick 按钮点击时发生 validation 验证时发生 enter 回车时发生 keydown 键盘按下时发生 keyup 键盘按起时发生 focus 获取焦点时发生 blur 失去焦点时发生 closeclick 点击关闭按钮时激发2.3 CheckBox复选框valuechanged 值改变时发生 checkedchanged 选中变化时发生 click 点击时发生2.4 button按钮mini-button mini-button-iconTop增加 修改 m

7、ini.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 function setValue() var obj = mini.get(select1); obj.setValue(base,button,

8、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(); 单选

9、：禁止选中父节点 function beforenodeselect(e) /禁止选中父节点 if (e.isLeaf = false) e.cancel = true; function onCloseClick(e) var obj = e.sender; obj.setText(); obj.setValue(); 2.6 Hidden隐藏字段mini-password单行输入框： 密码输入框： 多行输入框： mini.parse(); 2.7 RadioButtonList单选框组mini-radiobuttonlist mini.parse(); var rbl = mini.get

10、(rbl); rbl.on(valuechanged, function (e) alert(this.getValue(); );2.8 form表单验证 帐号： 密码： 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(提交成功); 2.9 TextBox文本输

11、入框mini-textboxvtypeString验证规则。如vtype=email。参考示例。2.10 DatePicker 日期选择器mini-datepicker 2.11 FileUpload文件上传控件（flash实现）。mini-fileupload 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(); buttonText String 按钮文本 limitType String 文件限制类型。如*.bmp;*.txt limitSize String 文件尺寸限制。如