jQueryEasyUI基础教程之创建复杂布局.docxVIP

jQuery-EasyUI基础教程之创建复杂布局课程目标可以灵活使用Layout完成各种布局复杂布局案例一：实现如下效果：代码如下：bodyclass=easyui-layoutdivdata-options=region:north,split:false,border:false,iconCls:icon-add,href:topLayout04.html,collapsible:falsestyle=height:20px;/divdivdata-options=region:west,title:树形菜单,border:false,split:truestyle=padding-top:30px;padding-left:10px;width:200px;background-color: #EAFDFF;此处应该添加树形菜单/divdivdata-options=region:center,border:falsedivclass=easyui-layoutdata-options=fit:truedivdata-options=region:north,split:true,border:falsestyle=height: 200px;padding-top:30px;padding-left:10px;此处应该添加表格/divdivdata-options=region:center,border:falsestyle=padding-top:30px;padding-left:10px;此处应该添加表格明细/div/div/div/body实现效果如下：案例二：实现如下效果：CSS代码如下：style.p-search {background: #fafafa;padding: 5px;border: 1px solid #ccc;border-bottom: 0;overflow: hidden;}.p-search input {width: 300px;border: 1px solid #ccc;background: #fffurl(images/search.png) no-repeat right bottom;}.p-right {text-align: center;border: 1px solid #ccc;border-left: 0;width: 150px;background: #fafafa;padding-top: 10px;}/styleHTML代码如下：bodystyle=background:#fafafa;h1Panel/h1divclass=easyui-paneltitle=Complex Panel LayouticonCls=icon-searchcollapsible=truestyle=padding:5px;width:500px;height:250px;divclass=easyui-layoutfit=truedivregion=northborder=falseclass=p-searchlabelSearch:/labelinput/input/divdivregion=centerborder=falsedivclass=easyui-layoutfit=truedivregion=eastborder=falseclass=p-rightimgsrc=../images/msn.gif//divdivregion=centerborder=falsestyle=border:1px solid #ccc;divclass=easyui-layoutfit=truedivregion=southsplit=trueborder=falsestyle=height:60px;textareastyle=border:0;width:100%;height:100%;resize:noneHi,I am easyui./textarea/divdivregion=centerborder=false/div/div/div/div/div/div/div/body相信通过以上两个综合案例，大家可以很好的掌握Layout的使用。本文来源：蓝桥软件学院