Easyui 定制window窗口

最新推荐文章于 2022-05-15 02:42:11 发布
最新推荐文章于 2022-05-15 02:42:11 发布
阅读量1.4k 收藏 2
点赞数
分类专栏： EasyUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangchun888/article/details/49452135
版权

    Jquery Easyui 是一种基于JQuery的用户界面插件集合，在实际的开发种给我们带来了很大的便利，方便数据的直观展示等。

 在实际的开发中，我们要使用easyui就需要先导入easyui的jar包。



easyui默认的样式是这样子的




但是在实际的开发中有时候需要定制自己项目使用的easyui ，那么我们就需要对easyui的样式进行相应的修改

比如，我们的目标是从左图到右图：


我们需要如下的定义：


                

        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  csdn_user_info
                
              
            

            

                关注
              
            

        

        

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

      

      

            

                专栏目录
          










                



	

		

			

				
					
EasyUI样式

				
			

			

				

					mlxlong
				

				

					03-30
					
					806
					
				

			

		

		

			
				
1.行样式rowStyler

$('#dg').datagrid({
		rowStyler: function(index,row){
			if (row.listprice>80){
				return 'background-color:#6293BB;color:#fff;';
			}
		}
	});
2.单元格样式styler
$('#dg').datagrid({
	

			
		

	



                

              
                



	

		

			

				
					
EasyUI Jquery 学习笔记 —— Window（窗口）详细版

					
最新发布

				
			

			

				

					cccloveforever的博客
				

				

					04-12
					
					1113
					
				

			

		

		

			
				
消息框（messager）提供不同样式的消息框，包括警示（alert）、确认（confirm）、提示（prompt）、进展（progress）等等。所有的消息框都是异步的。用户可以在与消息框交互后使用回调函数来完成一些动作。

			
		

	



                


  
              

                


	

		

			

				
					
Easyui--window、dialog....实例

				
			

			

				

					Howinfun的博客
				

				

					12-30
					
					1449
					
				

			

		

		

			
				
在页面开头加入以下语句


可能会出现样式改变.不能正确的显示组件的外观
我自己用的HTML5，改语句样式没发生改变


1.window
html方式实现：



data-options="iconCls:'icon-save',modal:true"

title="my window" style="width:300px;height:300px;">



			
		

	





	

		

			

				
					
easyUi简介

				
			

			

				

					m0_58259839的博客
				

				

					04-11
					
					1372
					
				

			

		

		

			
				
一.easyUI的简介
easyui是一款基于jQuery的前端框架，可以使用其中的组件进行布局以及用来做后台的管理界面。
二.easyUI的不足之处
现在据了解到有三种UI框架，分别是easyUI、bootstrap、layUI这三种。
不足之处： 从效果来看easyui的界面效果要远远差于bootstrap
跟layui比，界面效果也更差
三.学easyUI的好处
虽然说它的效果界面并不是那么好看，但是它也有它的好处，而且easyUI要简单学些，如果学会的easyUI框架，那么上手layUI就会轻松许多

			
		

	



		

			
		



	

		

			

				
					
easyui的window插件再次封装

				
			

			

				

					weixin_34253539的博客
				

				

					11-11
					
					116
					
				

			

		

		

			
				
easyui的window插件再次封装
说明：该插件弹出的弹出框在最顶层的页面中，而不是在当前页面所在的iframe中，它的可拖动范围是整个浏览器窗口；所以不能用JS的parent对象获取弹出它的父页面，这里用了一个笨方法，最多支持四级弹出框，即弹出框中再弹出弹出框的情况，笨方法也是方法，它很简单、很有效。
代码：


/**
* easyui的window插件再次封装
* 2014...

			
		

	





	

		

			

				
					
easyui window窗口 随body的滚动条 滚动

				
			

			

				

					weixin_30648587的博客
				

				

					10-22
					
					467
					
				

			

		

		

			
				
问题描述： 当easyui window窗口弹出的时候，依然可以滚动body 的滚动条，而且window窗口也会随它一起滚动
思路：bootstrap 模态框弹出的时候，给body 添加了.modal-open

.modal-open{
　　overflow:hidden;

}
当模态框关闭的时候，remove .modal-open

解决方法;

$(...

			
		

	





	

		

			

				
					
增强用户体验友好性之jquery easyui window 窗口关闭时的提示

				
			

			

				

					10-28
				

			

		

		

			
				
总的来说，通过利用jQuery EasyUI提供的事件和方法，我们可以轻松地定制Window组件的行为，以满足特定的业务需求。在这个案例中，我们不仅实现了用户关闭窗口时的提示功能，还确保了用户可以自由选择是否保存他们的...

			
		

	





	

		

			

				
					
EasyUI创建对话框的两种方式

				
			

			

				

					09-01
				

			

		

		

			
				
除了这两种基本的创建方式，EasyUI 还提供了丰富的选项和方法来进一步定制对话框的行为。例如，你可以通过 `buttons` 选项添加自定义的按钮，或者使用 `open` 和 `close` 方法来控制对话框的显示和关闭。此外，还...

			
		

	





	

		

			

				
					
JQuery EasyUI 对话框的使用方法

				
			

			

				

					10-28
				

			

		

		

			
				
首先，对话框的使用方法与 EasyUI 的窗口（Window）组件非常类似。在示例代码中，我们看到一个名为 `Open_Dialog` 的函数，这个函数负责打开并初始化对话框。通过调用 `$('#mydialog').dialog()` 来设置对话框的各种...

			
		

	





	

		

			

				
					
jQuery EasyUI基础教程之EasyUI常用组件(推荐)

				
			

			

				

					10-21
				

			

		

		

			
				
- 窗口（Window）：弹出式的操作窗口，常用于对话框或模态窗口。 - 表格（Grid）：展示结构化的数据，支持排序、筛选、编辑等功能。 - 树（Tree）：呈现层次结构的数据，常用于导航或组织结构展示。  五、学习与进阶...

			
		

	





	

		

			

				
					
jQuery EasyUI 开源插件套装 完全替代ExtJS

				
			

			

				

					10-29
				

			

		

		

			
				
1. **组件丰富**：EasyUI 包含了诸如菜单（Menu）、按钮（Button）、布局（Layout）、折叠面板（Accordion）、标签页（Tabs）、树形视图（Tree）、数据网格（DataGrid）、窗口（Window）以及表单（Form）等多种常见...

			
		

	





	

		

			

				
					
（四）EasyUI 使用——form表单2 & window窗口

				
			

			

				

					weixin_34419321的博客
				

				

					05-10
					
					129
					
				

			

		

		

			
				
form表单组件主要有以下内容（如下图）     　　
　　　　　　　　　　
 6. progressbar进度条 
每隔1秒让进度条按随机数填充，直至充满进度条刻度（只能执行一次）
 

进度条：
    <div id="p" style="width:400px;"></div>

    <script type="text/javascri...

			
		

	





	

		

			

				
					
easyui(基本布局)

				
			

			

				

					weixin_66202611的博客
				

				

					05-02
					
					1029
					
				

			

		

		

			
				
概述： What is easyui？
 jQuery EasyUI是一组基于jQuery的UI插件集合体，能帮助

优点：web开发者更轻松的打造出功能丰富并且美观的UI界面
 

 为什么要学？
  ①.使用easyui 不需要写很多代码，只需要编写一些简单 HTML 标记，就可以定义用户界面
  ②.easyui 是个完美支持 HTML5 网页的完整框架
  ③.easyui 能...

			
		

	





	

		

			

				
					
easyUI 自定义window工具

				
			

			

				

					YHC
				

				

					08-11
					
					1842
					
				

			

		

		

			
				
@author YHC
默认的window有四个工具:collapsible,minimizable,maximizable 和closable.如示例我们定义以下window
  
    window content  
  
自定义工具,设置该工具为true或者false,如示例我们希望定义一个window仅仅拥有一个可关闭的工具,你应该设置任何其他工具为false,我们定义工具属性在

			
		

	





	

		

			

				
					
使用EasyUI弹出框页面样式乱了——控制弹出框位置

				
			

			

				

					IT小白
				

				

					09-20
					
					7821
					
				

			

		

		

			
				
在做系统的时候，我遇到了一个这样子的问题：页面比较长，把也页面放入了Iframe中，这个页面使用了EasyUI的样式，弹出框弹出位置为中间，当弹出框弹出时，页面会乱样式。主要是因为弹出框在页面中间，页面的长度又超过了整个显示器的高度，所以，显示的部分，会出现问题。
      出现问题后，寻找到了一些解决方案。因为EasyUI的弹出框，是直接封装好的 ， 所以，我们不能灵活的改变其位置。那么，最

			
		

	





	

		

			

				
					
49EasyUI 窗口- 自定义带有工具条和按钮的对话框

				
			

			

				

					阿甘兄
				

				

					04-17
					
					534
					
				

			

		

		

			
				
您可以创建一个带有工具栏（toolbar）和按钮（button）的对话框（dialog），可以从 HTML 标记创建。这个教程描述如何添加工具栏（toolbar）和按钮（button）到对话框（dialog），没有任何的 javascript 代码。

创建对话框（Dialog）
    <div id="dd" class="easyui-dialog" title="My Dialog"...

			
		

	





	

		

			

				
					
EasyUI 01（EasyUI基本布局）

				
			

			

				

					weixin_65474399的博客
				

				

					05-10
					
					495
					
				

			

		

		

			
				
前言：

前几篇文章给大家简单介绍了一下bootstrap及它的基本使用，今天就来给大家介绍一个新的知识——EasyUI。

目录

前言：

一，什么是EasyUI？

二，EasyUI地址

三，EasyUI的好处

四，EasyUI的使用

1，引入必要的js和css样式文件

2 ，路径问题

3 ，页面缓存

4.组件

五，案例示范

1.导入jar包

2.导入EasyUI美化包文件

3.效果图

4.编写代码

index.jsp:

总结：

一，什么是EasyUI？

EasyUI是一

			
		

	





	

		

			

				
					
easyui(基础布局）

				
			

			

				

					x3547749154的博客
				

				

					05-15
					
					336
					
				

			

		

		

			
				
目录



1.概念

1.1什么是easyui?

1.2easyui的作用

1.3easyui 的目录说明

2.示列

按钮示例：

实现弹窗

1.概念


jQuery EasyUI简介：封装大量的jQuery插件(简化ajax，jquery，css样式，布局)


1.1什么是easyui?


JQuery EasyUI就是一套基础JQuery的富客户端的UI框架(简化ajax，jquery，css样式，布局)。像这些将常用的控件封装成一个UI库的框架统称富客户端框架


1.2e...

			
		

	





	

		

			

				
					
基于JQuery EasyUI的WebMVC控件封装(含源码)

				
			

			

				

					程序员单身狗
				

				

					11-07
					
					514
					
				

			

		

		

			
				
JQuery EasyUI类库，大家不会陌生，出来已经有很多年了。个人感觉还是很好用的，作者更新频率也很快，bug也及时修复。

　　最近在整理以前的代码，找到了这个组件，它是将EasyUI组件封装成MVC控件，这样我们就可以不用写那些html标签了，我们先看看调用方式








1

2

3

4

5

6

7

8

9



			
		

	





	

		

			

				
					
jQuery EasyUI window窗口使用实例

				
			

			

				

					06-08
				

			

		

		

			
				
好的，下面是一个简单的 jQuery EasyUI window 窗口的使用实例：  HTML 代码：  ``` <div id="win" class="easyui-window" title="窗口标题" style="width:400px;height:200px;">  窗口内容  ```  JavaScript 代码：...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值