LigerUi框架布局的随心所欲调整(实例)!

LigerUi框架布局的随心所欲调整(实例)!,主要是布局、标题等!

一、需要载入的头文件

    <link href="../../lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
    <script src="../../lib/jquery/jquery-1.5.2.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>


二、HTML内容

    <%--垂直并排2个框架一--%>
    <div id="Div1" style="margin:0;padding:0">   
        <div position="left" title="架框一左区" id="Div3">
              
            <div id="left"  style="margin:2px;">架框一左区</div> 

      
         </div>
 
        <div position="right" title="架框一右区" id="Div4">
              
            <div id="Div7"  style="margin:2px;">架框一左区</div> 

      
         </div>

  </div>

    <div id="Div2" style="margin:0;padding:0">
        <div position="center" title="一个窗口的框架" id="Div5">
              
            <div id="Div6"  style="margin:2px;">窗口2内容</div> 
      
         </div>
 
  </div>

三、JS内容

        $(function () {
          
            var layout = $("#Div1").ligerLayout({ rightWidth: 100,height:100});
            var layout = $("#Div2").ligerLayout({ rightWidth: 0, height: 100 });
)}


以上:position很重要 

<div position="left"></div> 

<div position="center"></div>      

<div position="right"></div> 
<div position="bottom"></div>
<div position="top"></div>

LigerUi框架布局的随心所欲调整(实例)!_第1张图片LigerUi框架布局的随心所欲调整(实例)!_第2张图片

你可能感兴趣的:(LigerUi框架布局的随心所欲调整(实例)!)