1. 下载easyui
Paste_Image.png
2. 放到项目中
Paste_Image.png
3. 在页面中引入并使用
所有的组件都有两种使用方式；
- html方式（使用class属性指定组件）
- js方式（相当于调用组件的有参构造函数，使用json配置项目配置）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入easyui -->
<link rel="stylesheet" href="easyui/themes/icon.css" type="text/css"></link>
<link rel="stylesheet" href="easyui/themes/default/easyui.css"
type="text/css"></link>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
</head>
<body>
<!--
class：指定easyui控件类型；
data-options:指定控件的属性或事件
属性：data-options="属性名：属性值[,属性名：属性值]"
事件： data-options="事件名：function(){}
调用控件方法：$(选择器).控件类型(方法名，参数列表)
-->
<!-- 方式1 -->
<!-- <div id="dd" class="easyui-dialog" title="My Dialog" style="width:400px;height:200px;"
data-options="iconCls:'icon-save',resizable:true,modal:true,onOpen:function(){alert('打开对话框了');}">
Dialog的内容
</div>
<script type="text/javascript">
$(function(){
$('#dd').dialog("setTitle","我的对话框");
// 调用dialog的setTitle方法，该方法的调用是按钮文档流的顺序来执行，只有事件才需要被触发；
});
</script> -->
<!-- 方式二 -->
<div id="dd">Dialog Content.</div>
<script type="text/javascript">
$(function() {
$('#dd').dialog({ /* 设置一个dialog控件 */
title : 'My Dialog',
width : 400,
height : 200,
closed : false,
cache : false,
//href: 'get_content.php',
modal : true,
onOpen : function() {
alert('打开对话框了');
}
});
$('#dd').dialog("setTitle", "我的对话框");
});
</script>
</body>
</html>
dialog.gif
网友评论