1.easyUI介绍
- easyui是一种基于jQuery的用户界面插件集合。【要想操作EasyUI,必须先导入JQ的核心JS文件】 -
2.easyUI外部文件引入
- easyui.css
EasyUI的核心css文件 导入css文件的时候，需要将图片目录一并导入 - icon.css
EasyUI图标相关的css文件 导入css文件的时候，需要将图片目录一并导入 - demo.css
用户自定义的样式文件，开发的时候可以不用导入 - jquery.min.js
它是jquery的核心js文件，只不过处于安全考虑隐藏了其版本号！ - jquery.easyui.min.js
它是EasyUI核心的js文件，它必须放在jquery的核心js文件之后！
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>EasyUI模板代码</title>
<link rel="stylesheet" type="text/css" href="css/easyui.css">
<link rel="stylesheet" type="text/css" href="css/icon.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
</head>
<body>
</body>
</html>3.easyUI的组件使用方式
3.1easyUI组件的创建
HTML方式创建组件(静态)
定义一个class属性，值为：easyui-组件名称
<标签名 id="w" class="easyui-组件名称" data-options="属性名1:'属性值1',属性名:'属性值2',...,属性名n:'属性值n'">
The window content.
</标签名>JS方式创建组件(动态)
- 先得定义一个div（显示组件）
- 然后使用js代码
$(“选择器”).组件名称({
…
})
<标签名 id="btn"></标签名>
$("#btn").组件名称({
属性名1:'属性值1',
属性名2:'属性值2',
...
属性名n:'属性值n'
});3.2easyUI事件的添加
定义的位置：在创建组件的内部
$("#p").panel({
//定义属性
title:"这是我的一个Panel",
width:300,
height:150,
closable:true,
tools:[{
iconCls:'icon-add',
handler:function(){alert('add')}
},{
iconCls:'icon-edit',
handler:function(){alert('edit')}
}],
//添加一个事件
onBeforeClose:function(){
alert("面板即将关闭……");
}
});3.3easyUI方法的调用
<input type="button" value="设置新标题">
//为这个按钮绑定一个事件，操作EasyUI相关的方法
//书写一个方法(设置一个新的标题)【方法在创建组建的外部操作的，方法需要在手册中查询即可】
$("input:first").click(function(){
//alert("abc");
//$("选择器").组件名("方法名","方法参数");
$("#p").panel("setTitle","新标题Niubility");
});4.easyUI组件之window
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>EasyUI入门_window组件</title>
<link rel="stylesheet" type="text/css" href="css/easyui.css">
<link rel="stylesheet" type="text/css" href="css/icon.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
</head>
<body>
<!--
属性介绍
class：定义的方式easyui-组件名称
title：组件的标题
data-options：定义所有EasyUI的样式都放到这个属性中去(style里面的内容都可以放进去)【多个样式之间使用逗号隔开】
iconCls:'icon-save' ：定义了组件的图标
-->
<div id="w" class="easyui-window" title="商品信息" data-options="iconCls:'icon-save',width:'500px',height:'200px',padding:'10px'">
The window content.
</div>
</body>
</html>