EasyUI 左，右（上、下）布局

最新推荐文章于 2020-05-23 10:33:19 发布
最新推荐文章于 2020-05-23 10:33:19 发布
阅读量253 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/yimeishui/p/6232191.html
版权 
 
  
左，右（上、下）布局

<body class="easyui-layout">
    <div data-options="region:'west',collapsed:false,title:'合同分类'" style="width:200px"></div>
    <div data-options="region:'center'">
        <div class="easyui-layout" data-options="fit:true">
            <div data-options="region:'south',collapsed:false,title:'合同清单'" style="height:180px"></div>
            <div data-options="region:'center',title:'合同目录'"></div>
        </div>
    </div>
</body>
 
  
 
 
  
 
 
 
 
 
 
 
 
 
  
左、中、右

<body class="easyui-layout">
    <div data-options="region:'west',collapsed:true,title:'合同分类'" style="width:200px"></div>
    <div data-options="region:'center'">
        <div class="easyui-layout" data-options="fit:true">
            <div data-options="region:'west',collapsed:true,title:'合同'" style="width:180px"></div>
            <div data-options="region:'center'"></div>
        </div>
    </div>
</body>
 
 
 
 
 
 

 

转载于:https://www.cnblogs.com/yimeishui/p/6232191.html

                

        

        




    




    

      

        

            

              
                
                  aoquedai2376
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
EasyUI Layout 布局

				
			

			

				

					qq_28532343的博客
				

				

					03-04
					
					312
					
				

			

		

		

			
				
布局（layout）是有五个区域（北区 north、南区 south、东区 east、西区 west 和中区 center）的容器。中间的区域面板是必需的，边缘区域面板是可选的。每个边缘区域面板可通过拖拽边框调整尺寸，也可以通过点击折叠触发器来折叠面板。布局（layout）可以嵌套，因此用户可建立复杂的布局。 
需要引用的css和js 
 
body 中代码<body class="easyui-l

			
		

	



                

              
                



	

		

			

				
					
easyui-layout布局高度自适应

				
			

			

				

					故梦-阿梓
				

				

					04-02
					
					9558
					
				

			

		

		

			
				
动态加载datagrid数据$("#dg_center").datagrid({                url: ''/AJAX/EasyUiListComm.ashx',                fit: true, //datagrid高度是否自适应                nowrap: true, //是否只显示一行，即文本过多是否省略部分               ...

			
		

	



                


  
              

                


	

		

			

				
					
jQuery Easyui实现左右布局

				
			

			

				

					10-22
				

			

		

		

			
				
jQuery EasyUI 是一个基于 jQuery 的框架，集成了各种用户界面插件。接下来通过本文给大家介绍jQuery Easyui实现左右布局，涉及到到easyui左右布局相关知识，感兴趣的朋友一起学习吧

			
		

	





	

		

			

				
					
JQuery EasyUI 简单的左右布局-左边Tree右边区域打开-tab右键菜单实现

				
			

			

				

					weixin_30716141的博客
				

				

					01-29
					
					613
					
				

			

		

		

			
				
点击左边的菜单在右边的tab中打开。其实easyui要实现这种布局很简单，只需要简单的几行代码就ok了。
特意做了一个小小的demo供大家参考，还把怎么实现tab的右键菜单附上。
效果图：

源码：
js部分：

$(function(){
//动态菜单数据
vartreeData=[{
text:"菜单",
...

			
		

	



		

			
		



	

		

			

				
					
Jquery easy  UI 上中下三栏布局                                                    分类：            ASP.NET   ...

				
			

			

				

					weixin_33881753的博客
				

				

					02-06
					
					115
					
				

			

		

		

			
				


效果图：


源代码：
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&l...

			
		

	





	

		

			

				
					
Layout模板 (上下两块示例)

				
			

			

				

					zq爱生活爱代码的博客
				

				

					05-23
					
					710
					
				

			

		

		

			
				
<body class="easyui-layout" style="margin:10px;">
    <div  data-options="region:'north',hideCollapsedContent:false" split="true" title="查詢條件" style="height:25%;">
    </div>
    <div id="content" region="center" title="查詢結果" style=...

			
		

	





	

		

			

				
					
Jqurey实现类似EasyUI的页面布局可改变左右的宽度

				
			

			

				

					09-04
				

			

		

		

			
				
在本文中，我们将深入探讨如何使用jQuery来实现一个类似EasyUI的页面布局，允许用户动态改变左右两侧div的宽度。EasyUI是一个基于jQuery的UI框架，提供了丰富的组件和灵活的布局选项，使得开发者能够轻松创建出美观...

			
		

	





	

		

			

				
					
easyui datagrid 右冻结

				
			

			

				

					04-18
				

			

		

		

			
				
在EasyUI中，"easyui-rtl.css"和"easyui-rtl.js"是用于支持从右到左（RTL）语言布局的文件。"rtl"是“right to left”的缩写，这些文件可能包含了适应RTL布局的样式和脚本，比如对于阿拉伯语或希伯来语等语言，元素...

			
		

	





	

		

			

				
					
easyui最简单的左右布局实现，及tab的右键菜单实现

				
			

			

				

					weixin_33827590的博客
				

				

					09-23
					
					250
					
				

			

		

		

			
				
发现最近有些人问用JQuery easyui要怎么实现左右结构的布局。就是点击左边的菜单在右边的tab中打开。其实easyui要实现这种布局很简单，只需要简单的几行代码就ok了。
特意做了一个小小的demo供大家参考，还把怎么实现tab的右键菜单附上。
源码：js部分：
$(function () {	//动态菜单数据	var treeData = [{			text : "菜单",			c...

			
		

	





	

		

			

				
					
easyui datagrid中实现上下左右、回车切换单元格

				
			

			

				

					12-14
				

			

		

		

			
				
easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格

			
		

	





	

		

			

				
					
easyUI快速入门第二讲——easyUI中的layout（布局）组件

				
			

			

				

					李阿昀的博客
				

				

					10-29
					
					964
					
				

			

		

		

			
				
layout（布局）组件的概述
布局容器有5个区域：北、南、东、西和中间。中间区域面板是必须的，边缘的面板都是可选的。每个边缘区域面板都可以通过拖拽其边框改变大小，也可以点击折叠按钮将面板折叠起来。布局可以进行嵌套，用户可以通过组合布局构建复杂的布局结构。

layout（布局）组件的使用
在所在项目的WebContent目录下新建一个02-layout目录，并在该目录下新建一个02-layout...

			
		

	





	

		

			

				
					
EasyUi---layout整体布局

				
			

			

				

					chen289251809的专栏
				

				

					05-06
					
					1304
					
				

			

		

		

			
				
UI效果图： 
参考代码：<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
<script type="text/j

			
		

	





	

		

			

				
					
easyUI layout布局

				
			

			

				

					chenqk_123的专栏
				

				

					10-30
					
					1129
					
				

			

		

		

			
				
1.layout布局
layout在所有项目中都是至关重要的，layout直接影响到用户的使用习惯和使用心情。如果布局合理，用户会欣然接受，反之用户就会非常的反感。


layout的设计一般都是由产品经理根据用户习惯设计出来，然后交给我们开发页面。当然页面的变化多端，我们这里只简单讲解一下easyUI的一般布局。
1.1 layout布局划分
   在上面一篇博客中我们讲到了一个简单

			
		

	





	

		

			

				
					
EasyUI——Layout（布局）

				
			

			

				

					weixin_45492425的博客
				

				

					12-04
					
					450
					
				

			

		

		

			
				
EasyUI——Layout（布局）
使用$.fn.layout.defaults重写默认值对象。
布局容器有5个区域：北、南、东、西和中间。中间区域面板是必须的，边缘的面板都是可选的。每个边缘区域面板都可以通过拖拽其边框改变大小，也可以点击折叠按钮将面板折叠起来。布局可以进行嵌套，用户可以通过组合布局构建复杂的布局结构。

依赖关系
panel
resizable
使用案例
创建布局

通过标签...

			
		

	





	

		

			

				
					
easyui---layout(布局)

				
			

			

				

					weixin_34344677的博客
				

				

					03-08
					
					195
					
				

			

		

		

			
				
layout(布局)	class:class="easyui-layout"//可以直接在body上加,全布局		基础布局:		<div id="cc" class="easyui-layout" style="width:700px;height:350px;">			　　<!--title="north"加入title可收缩-->			　　<div data...

			
		

	





	

		

			

				
					
EasyUI左右布居

				
			

			

				

					dibeichan3033的博客
				

				

					08-05
					
					114
					
				

			

		

		

			
				
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>首页...

			
		

	





	

		

			

				
					
EasyUI教程：快速创建网页

				
			

			

				

					
				

			

		

		

			
				
- **边框布局(Border Layout)**: 适用于将页面分割成上、下、左、右和中间五个区域。 - **面板上的复杂布局(Complex layout on Panel)**: 可以在面板内部进行更细粒度的划分和调整。 - **手风琴(Accordion)**: 一组...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值