MiniUI知识点汇总.doc

MiniUI知识点汇总 一、Layout布局 1.1 Layout布局器mini-layout /docs/api/index.html#ui=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面板 // /docs/api/index.html#ui=Layout } 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 /docs/api/index.html#ui=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;heig