20170209

Posted 2020-08-30

<title>布局控件</title>     
   <meta name="keywords" content="免费控件,免费UI控件,免费开源UI,免费开源UI控件,免费开源UI框架,layout,布局控件">  
       <link href="../../lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css">
       <style type="text/css">
       </style>
       <script src="../../lib/jquery/jquery-1.9.0.min.js" type="text/javascript"></script>   
   <script src="../../lib/ligerUI/js/core/base.js" type="text/javascript"></script>
       <script src="../../lib/ligerUI/js/plugins/ligerLayout.js" type="text/javascript"></script>
           <script type="text/javascript">
 
               $(function ()
               {
 
                   $("#layout1").ligerLayout({
                       leftWidth: 200,
                       centerBottomHeight:180
                   });
               });
                
        </script> 
       <style type="text/css"> 
 
           body{ padding:5px; margin:0; padding-bottom:15px;}
           #layout1{  width:100%;margin:0; padding:0;  }  
           .l-page-top{ height:40px; background:#f8f8f8; margin-bottom:3px;}
           h4{ margin:20px;}
               </style>
    
      
     <div class="l-page-top">这个不是layout的一部分，作为单独的页面的头部</div>
     <div id="layout1" class="l-layout" ligeruiid="layout1" style="height: 463px;">
           <div class="l-layout-left" style="left: 0px; width: 200px; top: 0px; height: 461px;"><div class="l-layout-header"><div class="l-layout-header-toggle"></div><div class="l-layout-header-inner"></div></div><div position="left" class="l-layout-content"></div></div>
           <div class="l-layout-center" style="width: 1476px; top: 0px; left: 205px; height: 279px;"><div class="l-layout-header">标题</div><div position="center" title="" class="l-layout-content" style="height: 436px;">
           <h4>$("#layout1").ligerLayout({ leftWidth: 200});</h4> 
               <br>
               如果上面有其他页面元素，layout会自适应调整
                
           </div></div>  
         <div class="l-layout-centerbottom" style="width: 1476px; left: 205px; height: 180px; top: 283px;"><div class="l-layout-header">下方区域</div><div position="centerbottom" title="" class="l-layout-content">
             中间下方区域
           </div></div>  
       <div class="l-layout-lock"></div><div class="l-layout-drophandle-left" style="display: block; left: 200px; height: 461px; top: 0px;"></div><div class="l-layout-drophandle-centerbottom" style="display: block; top: 280px; left: 205px; width: 1476px;"></div><div class="l-layout-dragging-xline"></div><div class="l-layout-dragging-yline"></div><div class="l-dragging-mask" style="height: 463px;"></div><div class="l-layout-collapse-left" style="display: none; top: 0px; height: 461px;"><div class="l-layout-collapse-left-toggle"></div></div><div class="l-layout-collapse-right" style="display: none; "><div class="l-layout-collapse-right-toggle"></div></div></div>