easy-UI的介绍以及使用

最新推荐文章于 2024-08-08 07:58:26 发布

ultraman12121

最新推荐文章于 2024-08-08 07:58:26 发布

阅读量3.7k

点赞数 3

文章标签： html js javascript

本文链接：https://blog.csdn.net/weixin_42800427/article/details/107436539

版权

easyUI是一种基于jQuery的用户界面插件集合，用于创建互动JavaScript应用。它通过简单的HTML标记实现丰富的用户界面，支持HTML5，节省开发时间和规模。本文介绍了easyUI的引入、模块拖动、进度条、按钮、树形结构、页面布局、选项卡、弹出窗口、表格数据绑定和菜单按钮等关键功能。

摘要由CSDN通过智能技术生成

官网介绍

asyui是一种基于jQuery、Angular.、Vue和React的用户界面插件集合。

easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。

使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。

easyui是个完美支持HTML5网页的完整框架。

easyui节省您网页开发的时间和规模。

easyui很简单但功能强大的。

easyUI使用

easyUI引入

<!--引入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" />

使用easyUI需要官网下载easyUI文件并进行引入

模块拖动demo

	<body>
		<div class="easyui-draggable">拖动DIV</div>
		<div class="easyui-draggable">测试div</div>
	</body>

进度条demo

	<body>
		<div id="p" class="easyui-progressbar" style="width:800px;"></div>
		<input id="b" type="button" value="加载"/> 
	</body>
<script type="text/javascript">
	$(function(){
   
		
		$("#b").click(function(){
   
			onload();	
		})
		
		/*采用递归的方法实现进度条刷新
			setTimeout(xxxFunction,100);	//延时加载函数
		*/
		var i = 0;
		function onload(){
   
			//该函数是easyUI提供的,使用别人的JS,必须满足要求  value是固定的
			$('#p').progressbar({
   value:i++});
			if(i<=100){
   
				/*延时加载,到了指定的时间,则执行函数,时间
				单位是毫秒*/
				setTimeout(function(){
   onload();}, 1000)
			}
		}
	})
	
</script>

按钮

<!--该页面中主要展现 不同的按钮格式  -->
<a id="btn1" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-undo'">测试字体长度大小</a>
<a id="btn2" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">新增</a>
<a id="btn3" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">编辑</a>
<a id="btn4