easyUI之Layout（布局） 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Layout（布局）</title>
    <meta http-equiv="keywords" content="学习,IT学习,好好学习">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  
      <!-- 引入css文件，不限顺序 -->
    <link rel="stylesheet" href="../themes/default/easyui.css" type="text/css"></link>
    <link rel="stylesheet" href="../themes/icon.css" type="text/css"></link>
  
      <!-- 引入js文件，有顺序限制 -->
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>

    <!-- 所有的css文件和的有的js文件位置不限 -->
    
  </head>
  
  
  <body>
    
        <!-- 布局 -->
        <div id="layoutID" style="width:700px;height:500px" class="easyui-layout" data-options="fit:true">
            
            <!-- 区域面板--北边 -->
            <div data-options="region:'north',title:'北边',split:true,border:true,iconCls:'icon-remove',collapsible:true" style="height:100px;"></div>   
            
            <!-- 区域面板--南边 -->
            <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>   
            
            <!-- 区域面板--东边 -->
            <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>   
            
            <!-- 区域面板--西边 -->
            <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>   

            <!-- 区域面板--中间 -->
            <div data-options="region:'center',title:'中间',href:'/js-day05/images/mm.html'" style="padding:5px;background:#eee;"></div>   
            
        </div>
    
    
        
        
        <script type="text/javascript">
            //easyui调用方法的语法如下：$('selector').组件名('method',parameter); 
            
            //浏览器加载jsp页面时触发
            $(function(){
                //将北边折叠
                $('#layoutID').layout('collapse','north');
                //休息3秒
                window.setTimeout(function(){
                    //将南边折叠
                    $("#layoutID").layout("collapse","south");
                    
                    //将北边展开
                    $('#layoutID').layout('expand','north');
                    window.setTimeout(function(){
                        //将南边展开
                        $("#layoutID").layout("expand","south");
                    },3000);
                    
                },3000);
            });
            
            
        </script>
    
  </body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Layout（布局）</title>
    <meta http-equiv="keywords" content="学习,IT学习,好好学习">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  
      <!-- 引入css文件，不限顺序 -->
    <link rel="stylesheet" href="../themes/default/easyui.css" type="text/css"></link>
    <link rel="stylesheet" href="../themes/icon.css" type="text/css"></link>
  
      <!-- 引入js文件，有顺序限制 -->
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>

    <!-- 所有的css文件和的有的js文件位置不限 -->
    
  </head>
  
  
  <body class="easyui-layout">
    
            <!-- 区域面板--北边 -->
            <div data-options="region:'north',title:'北边',split:true,border:true,iconCls:'icon-remove',collapsible:true" style="height:100px;"></div>   
            
            <!-- 区域面板--南边 -->
            <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>   
            
            <!-- 区域面板--东边 -->
            <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>   
            
            <!-- 区域面板--西边 -->
            <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>   

            <!-- 区域面板--中间 -->
            <div data-options="region:'center',title:'中间',href:'/js-day05/images/mm.html'" style="padding:5px;background:#eee;"></div>   
        
        <script type="text/javascript">
            //easyui调用方法的语法如下：$('selector').组件名('method',parameter); 
            
            //浏览器加载jsp页面时触发
            $(function(){
                //将北边折叠
                $('#layoutID').layout('collapse','north');
                //休息3秒
                window.setTimeout(function(){
                    //将南边折叠
                    $("#layoutID").layout("collapse","south");
                    
                    //将北边展开
                    $('#layoutID').layout('expand','north');
                    window.setTimeout(function(){
                        //将南边展开
                        $("#layoutID").layout("expand","south");
                    },3000);
                    
                },3000);
            });
            
            
        </script>
    
  </body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Layout（布局）</title>
    <meta http-equiv="keywords" content="学习,IT学习,好好学习">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  
      <!-- 引入css文件，不限顺序 -->
    <link rel="stylesheet" href="../themes/default/easyui.css" type="text/css"></link>
    <link rel="stylesheet" href="../themes/icon.css" type="text/css"></link>
  
      <!-- 引入js文件，有顺序限制 -->
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>

    <!-- 所有的css文件和的有的js文件位置不限 -->
    
  </head>
  
  
  <body>
    
    <div id="layoutID" class="easyui-layout" data-options="fit:true">
    
        <!-- 北 -->
        <div data-options="region:'north'" style="height:100px"></div>
         
        <!-- 中 --> 
        <div data-options="region:'center'">
        
            <div class="easyui-layout" data-options="fit:true">
            
                <!-- 西 -->    
                <div data-options="region:'west'" style="width:200px"></div>
            
                <!-- 中 -->
                <div data-options="region:'center'">
                
                    <div class="easyui-layout" data-options="fit:true">
                
                        <!-- 北 -->
                        <div data-options="region:'north'" style="height:100px"></div>
                        
                        <!-- 中 -->
                        <div data-options="region:'center'"></div>
                
                    </div>
                
                </div>
            
            </div>
        
        </div>
    
    </div>        
    
  </body>
</html>

 

posted on 2018-12-04 09:50  LoaderMan  阅读(1184)  评论(0)  编辑  收藏  举报

导航