EasyUI

最新推荐文章于 2022-05-13 10:39:08 发布

nickel369

最新推荐文章于 2022-05-13 10:39:08 发布

阅读量125

点赞数

本文链接：https://blog.csdn.net/nickel369/article/details/107623934

版权

在这里插入图片描述

EasyUI 使用方法

EasyUI API
https://pan.baidu.com/s/10_hbGV0UltzO1F4f7e544Q 提取码：ynq6
EasyUI相关技术和Css文件：
https://pan.baidu.com/s/1Jr3itqtiHWc1_m2ioenJPg 提取码：txta

EasyUI 可折叠的功能面板

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<!--引入jquery的js，EasyUI的执行需要依赖于jQuery  -->
	<script type="text/javascript"
		src="/js/jquery-easyui-1.4.1/jquery.min.js"></script>
	<!--easyUI的js主文件  -->
	<script type="text/javascript"
		src="/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
	<!--国际化的js文件  -->
	<script type="text/javascript"
		src="/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
	<!--引入easyUI的样式  -->
	<link rel="stylesheet" type="text/css"
		href="/js/jquery-easyui-1.4.1/themes/icon.css" />
	<link rel="stylesheet" type="text/css"
	href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" />
	</head>
	<body>
	  <div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;"   
		        title="My Panel" iconCls="icon-save" collapsible="true">   
		    The panel content    
		</div>  
	</body>
</html>

显示效果：
在这里插入图片描述

EasyUI可以拖动的框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<!--引入jquery的js，EasyUI的执行需要依赖于jQuery  -->
	<script type="text/javascript"
		src="/js/jquery-easyui-1.4.1/jquery.min.js"></script>
	<!--easyUI的js主文件  -->
	<script type="text/javascript"
		src="/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
	<!--国际化的js文件  -->
	<script type="text/javascript"
		src="/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
	<!--引入easyUI的样式  -->
	<link rel="stylesheet" type="text/css"
		href="/js/jquery-easyui-1.4.1/themes/icon.css" />
	<link rel="stylesheet" type="text/css"
	href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" />
	</head>
	<body>
	<div id="dd" style="width:100px;height:100px;"> 
		<div id="title" style="background:#ccc;">title</div> 
		</div> 
	</body>
	<script type="text/javascript">
	$('#dd').draggable({ 
		handle:'#title' 
		}); 
	</script>
</html>

效果展现：
在这里插入图片描述

EasyUI分页

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>拖动边框</title>
		<!--引入jquery的js，EasyUI的执行需要依赖于jQuery  -->
	<script type="text/javascript"
		src="/js/jquery-easyui-1.4.1/jquery.min.js"></script>
	<!--easyUI的js主文件  -->
	<script type="text/javascript"
		src="/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
	<!--国际化的js文件  -->
	<script type="text/javascript"
		src="/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
	<!--引入easyUI的样式  -->
	<link rel="stylesheet" type="text/css"
		href="/js/jquery-easyui-1.4.1/themes/icon.css" />
	<link rel="stylesheet" type="text/css"
	href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" />
	</head>
	<body>
	  <div id="pp" style="background:#efefef;border:1px solid #ccc;"></div> 
	</body>
	<script type="text/javascript">
	$('#pp').pagination({ 
		total:2000,      //定义总的记录数
		pageSize:10,    //定义总的页数
		pageNumber:10,  //定义当前是第几页
	    pageList: [10,20,30,50,100],  //定义用于可以选择的页数
	   // loading:true, //定义数据是否正在加载  true 表示数据正常加载  false  表示数据加载完成
	    buttons: [{
			iconCls:'icon-add',
			handler:function(){alert('add')}
		},'-',{
			iconCls:'icon-save',
			handler:function(){alert('save')}
		}],   //自定义按钮控件
		显示相关的按钮控件  first首页  links数字列表  last尾页  list表示用户选择  prev 表示上一页 manual手工输入框 
		layout:['first',"prev",'links','next','last','list','manual'],
		//showPageList:false   导航列表
		showRefresh:true,
		beforePageText:"小明",//输入组件之前间显示的文本文字
		afterPageText:"在哪里",//输入组件之后显示的文本文字
		displayMsg:"哈哈"
		}); 
	</script>
</html>

效果展现：
在这里插入图片描述

EasyUI搜索栏目

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>拖动边框</title>
		<!--引入jquery的js，EasyUI的执行需要依赖于jQuery  -->
	<script type="text/javascript"
		src="/js/jquery-easyui-1.4.1/jquery.min.js"></script>
	<!--easyUI的js主文件  -->
	<script type="text/javascript"
		src="/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
	<!--国际化的js文件  -->
	<script type="text/javascript"
		src="/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
	<!--引入easyUI的样式  -->
	<link rel="stylesheet" type="text/css"
		href="/js/jquery-easyui-1.4.1/themes/icon.css" />
	<link rel="stylesheet" type="text/css"
	href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" />
	</head>
	<body>
	   <input id="ss"></input> 
	   <div id="mm" style="width:120px"> 
			<div data-options="name:'all',iconCls:'icon-ok'">数学</div> 
			<div data-options="name:'sports'">语文</div> 
		</div> 
	</body>
	 <script type="text/javascript">
	
	 $('#ss').searchbox({ 
		 searcher:function(value,name){ 
	     var getValue=$('#ss').searchbox('getValue');//获取当前搜索的值
	     var setValue=$('#ss').searchbox('setValue',"aa");//设置当前搜索的值
		 alert("搜索框被触发了，哈哈哈"),
		 alert(getValue)
		 }, //点击搜索框触发的函数
		 menu:'#mm', //在控件中嵌入另外的组件
		 prompt:'Please Input Value', //输入框显示的类容
		 width:400,//输入框的宽度
		 height:500//输入框的高度
		 }); 
	 

	 </script>
</html>

演示效果：
在这里插入图片描述

EasyUI进度条

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>拖动边框</title>
		<!--引入jquery的js，EasyUI的执行需要依赖于jQuery  -->
	<script type="text/javascript"
		src="/js/jquery-easyui-1.4.1/jquery.min.js"></script>
	<!--easyUI的js主文件  -->
	<script type="text/javascript"
		src="/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
	<!--国际化的js文件  -->
	<script type="text/javascript"
		src="/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
	<!--引入easyUI的样式  -->
	<link rel="stylesheet" type="text/css"
		href="/js/jquery-easyui-1.4.1/themes/icon.css" />
	<link rel="stylesheet" type="text/css"
	href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" />
	</head>
	<body> 
	  <div id="p" style="width:400px;"></div>
	  <button id="btn">点击触发</button>  
	</body>
	 <script type="text/javascript">
		 $('#p').progressbar({ 
			 width:500,
			 height:20,
			 value: 1,
			 ///text:"正在加载"
			
		 }); 
		
		 $("#btn").click(function(){
				onload();	
			})
			
			/*采用递归的方法实现进度条刷新  */
			var i = 0;
			function onload(){
				$('#p').progressbar({ value:i++});
				if(i<=100){
					/*延时加载,到了指定的时间,则执行函数,时间
					单位是毫秒*/
					setTimeout(function(){
						onload();
					}, 100)
				}
			}
	 </script>
</html>

效果展示：
在这里插入图片描述

EasyUI消息提示框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>拖动边框</title>
		<!--引入jquery的js，EasyUI的执行需要依赖于jQuery  -->
	<script type="text/javascript"
		src="/js/jquery-easyui-1.4.1/jquery.min.js"></script>
	<!--easyUI的js主文件  -->
	<script type="text/javascript"
		src="/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
	<!--国际化的js文件  -->
	<script type="text/javascript"
		src="/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
	<!--引入easyUI的样式  -->
	<link rel="stylesheet" type="text/css"
		href="/js/jquery-easyui-1.4.1/themes/icon.css" />
	<link rel="stylesheet" type="text/css"
	href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" />
	</head>
	<body> 
	  <a id="dd" href="javascript:void(0)">Click here</a>
	  <button id="btn1">更新</button>
	  <button id="btn2">销毁</button>
	  <button id="btn3">显示</button>
	</body>
	 <script type="text/javascript">
	       $('#dd').tooltip({  
	    	   position: 'bottom', //消息的位置  ："left","right","top","bottom"
	    	   content: '<span style="color:#fff">哈哈哈,我又来了</span>', //提示框中的类容
	    	   onShow: function(){       
	    		   $(this).tooltip('tip').css({            
	    		    backgroundColor: '#562',            
	    		    borderColor: '#666'       
	    		    });
	    	 },
	    	 trackMouse:true,  //是否允许跟着鼠标移动
	    	 hideDelay:300,   //延迟隐藏的时间
	    	 deltaX:400,  //消息提示框水平方法的位置
	    	 deltaY:300   //消息提示框垂直方法的位置
	    	 });
	       $("#btn1").click(function(){
	    	   $('#dd').tooltip("update","我被更新了");
	       });
	       $("#btn2").click(function(){
	    	   $('#dd').tooltip("destroy");
	       });
	       $("#btn3").click(function(){
	    	   $('#dd').tooltip("show");
	       });
	 </script>
</html>

效果演示：
在这里插入图片描述

EasyUI面板

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>面板控件</title>
		<!--引入jquery的js，EasyUI的执行需要依赖于jQuery  -->
	<script type="text/javascript"
		src="/js/jquery-easyui-1.4.1/jquery.min.js"></script>
	<!--easyUI的js主文件  -->
	<script type="text/javascript"
		src="/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
	<!--国际化的js文件  -->
	<script type="text/javascript"
		src="/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
	<!--引入easyUI的样式  -->
	<link rel="stylesheet" type="text/css"
		href="/js/jquery-easyui-1.4.1/themes/icon.css" />
	<link rel="stylesheet" type="text/css"
	href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" />
	</head>
	<body> 
		<div id="p" class="easyui-panel" title="My Panel"     
        style="width:500px;height:150px;padding:10px;background:#fafafa;"   
        data-options="iconCls:'icon-save',closable:true,    
                collapsible:true,minimizable:true,maximizable:true,onClose:onclose,onCollapse:changeCollapse">   
		    <p>panel content.</p>   
		    <p>panel content.</p>   
		</div>  
		<button id="btn1">移动</button>
		<button id="btn2">按钮2</button>
	</body>
	 <script type="text/javascript">
		 $('#p').panel({ 
			  width:500,   //控件的宽度
			  height:150,  //控件的高度  
			  title: '我是面板控件',   //面板控件的名字
			  
			  tools: [{    
			    iconCls:'icon-add',    
			    handler:function(){alert('new')}    
			  },{    
			    iconCls:'icon-save',    
			    handler:function(){alert('save')}    
			  }]    
			}); 
		 
		 function onclose(){
			 alert("我走了");
		 };
		 
		 function changeCollapse(){
			 alert("我被折叠了");
		 };
		 
		 $("#btn1").click(function(){
			 $('#p').panel('resize',{
					width: 600,
					height: 400,
				});
		 });
		 
		 $("#btn2").click(function(){
			 $('#p').panel('move',{
					left: 60,
					top: 40
				});
		 });
	 </script>
</html>

效果演示：
在这里插入图片描述

EasyUI选项卡

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>拖动边框</title>
		<!--引入jquery的js，EasyUI的执行需要依赖于jQuery  -->
	<script type="text/javascript"
		src="/js/jquery-easyui-1.4.1/jquery.min.js"></script>
	<!--easyUI的js主文件  -->
	<script type="text/javascript"
		src="/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
	<!--国际化的js文件  -->
	<script type="text/javascript"
		src="/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
	<!--引入easyUI的样式  -->
	<link rel="stylesheet" type="text/css"
		href="/js/jquery-easyui-1.4.1/themes/icon.css" />
	<link rel="stylesheet" type="text/css"
	href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" />
	</head>
	<body> 
	    <div id="tt" class="easyui-tabs" style="width:500px;height:250px;">   
	    <div title="Tab1" style="padding:20px;display:none;">   
		        tab1    
		    </div>   
		    <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">   
		        tab2    
		    </div>   
		    <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">   
		        tab3    
		    </div>   
		</div> 
		<button id="btn1">添加按钮</button>
		<button id="btn2">面板调整按钮</button>  
		<button id="btn3">获取当前选中的面板</button>
		<button id="btn4">更新面板</button>   
	</body>
	 <script type="text/javascript">
		 $('#tt').tabs({    
			    border:true,  //显示容器边框  
			    onSelect:function(title,index){    
			        alert(title+' is selected,第：'+index);    
			    },//表示选择之后之后执行的函数
			    width:600,//选项卡容器的宽度
			    height:200, //选项卡容器的高度
			    //plain:true, //true时不显示容器的背景  false显示容器的背景
			    //fit:true,   //表示铺满整个页面
			    tools:[{
			    	iconCls:'icon-add',
					handler:function(){
						alert('添加')
					}
			    },{
			    	iconCls:'icon-save',
					handler:function(){
						alert('保存')
					}
			    }
			    ],
			    tabPosition:'left',//选项卡的位置
			    onClose:function(title,index){
			    	alert(title+"被关闭了");
			    },
			    onContextMenu:function(e, title,index){
			    	alert("面部被点击了");
			    }
		 }); 
		 
		$("#btn1").click(function(){
			 $('#tt').tabs('add',{
					title: '新选项卡面板',
					selected: false
			});
		}); 
		
		$("#btn2").click(function(){
			 $('#tt').tabs('resize',{
				    width:700 ,
					height: 500
			});
		}); 
		$("#btn3").click(function(){
			var tab = $('#tt').tabs('getSelected');
			var index = $('#tt').tabs('getTabIndex',tab);
			alert(index);
		}); 
		$("#btn4").click(function(){
			var tab = $('#tt').tabs('getSelected');  
			$('#tt').tabs('update', {
				tab: tab,
				options: {
					title: '我更新',
					href: 'www.baidu.com'  // 新内容的URL
				}
			});

		}); 
	 </script>
	
</html>

演示效果：
在这里插入图片描述

EasyUI布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>拖动边框</title>
		<!--引入jquery的js，EasyUI的执行需要依赖于jQuery  -->
	<script type="text/javascript"
		src="/js/jquery-easyui-1.4.1/jquery.min.js"></script>
	<!--easyUI的js主文件  -->
	<script type="text/javascript"
		src="/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
	<!--国际化的js文件  -->
	<script type="text/javascript"
		src="/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
	<!--引入easyUI的样式  -->
	<link rel="stylesheet" type="text/css"
		href="/js/jquery-easyui-1.4.1/themes/icon.css" />
	<link rel="stylesheet" type="text/css"
	href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" />
	</head>
	<body class="easyui-layout">   
	    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;">north</div>   
	    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;">south</div>   
	    <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;">east</div>   
	    <div data-options="region:'west',title:'West',split:true" style="width:100px;">west</div>   
	    <div data-options="region:'center',title:'center title'" style="padding:5px;">center</div>   
         <button id="btn">按钮</button>
	</body>
	
</html>

效果演示：
在这里插入图片描述

EasyUI树形结构

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>EasyUI-拖动</title>
<!--引入jquery的js，EasyUI的执行需要依赖于jQuery  -->
<script type="text/javascript"
	src="/js/jquery-easyui-1.4.1/jquery.min.js"></script>
<!--easyUI的js主文件  -->
<script type="text/javascript"
	src="/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
<!--国际化的js文件  -->
<script type="text/javascript"
	src="/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
<!--引入easyUI的样式  -->
<link rel="stylesheet" type="text/css"
	href="/js/jquery-easyui-1.4.1/themes/icon.css" />
<link rel="stylesheet" type="text/css"
	href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" />

</head>
	<body>
		<ul id="tt" class="easyui-tree">   
		    <li>
		        <span>球类</span>
		           <ul>
		           		<li>篮球</li>
		           		<li>羽毛球 </li>
		           		<li>乒乓球</li>
		           </ul>  
		    </li>
		    <li>
		       <span>游戏类</span>
		           <ul>
		           		<li>王者荣耀</li>
		           		<li>吃鸡战场</li>
		           		<li>英雄联盟</li>
		           </ul>
		    </li>
		    <li>
		         <span>电视类</span>
		           <ul>
		           		<li>喜剧</li>
		           		<li>悲剧</li>
		           		<li>战争片</li>
		           </ul>
		    </li>
		</ul>  
	</body>
	<script type="text/javascript">

	</script>
</html>

效果演示：
在这里插入图片描述

nickel369

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
EasyUI

1.拖动的框代码：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>EasyUI-拖动</title><script type="text/javascript" src="/js/jquery-easyui-1.4.1/jquery.min.js">.
复制链接

扫一扫