1. jQuery Easy UI同类产品
1. jQuery UI 适用于轻应用,如网页前端
2. jQuery Easy UI 比较重适用于后台前端
3. ExtJS 更重,非jQuery的独立UI。
4. DWZ 国产,也是基于jQuery的UI
2. 引入jQuery Easy UI的demo
<!DOCTYPE html>
<html lang="zh-ch">
<head>
<meta charset="UTF-8">
<title>jQuery Easy UI 包引入</title>
<link rel="stylesheet" href="css/themes/default/easyui.css">
<link rel="stylesheet" href="css/themes/icon.css">
<link rel="stylesheet" href="css/themes/color.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
</head>
<body>
<div class="easyui-dialog" style="width:400px;height:200px"
data-options="
title:'My Dialog',
iconCls:'icon-ok',
onOpen:function(){}">
dialog content.
</div>
</body>
</html>
3. 引入easyload.js智能加载所需的模块化组件(不推荐)
引入easyload.js智能加载模块组件,需要把themes和plugins文件夹放在easyload.js同个目录下,代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>easyloader 智能加载</title>
<script type="text/javascript" src="easyUI/jquery.min.js"></script>
<script type="text/javascript" src="easyUI/easyloader.js"></script>
<script type="text/javascript">
$(function(){
/*有多个组件可用数组的方式加载dialog等*/
easyloader.load('dialog',function(){
$('#mydialog').dialog();
});
});
</script>
</head>
<body>
<div id="mydialog">
dialog content.
</div>
</body>
</html>