首先介绍,在jsp种实用EasyUI的组件,必须引入相应的js文件,将EasyUI的js文件拷贝到项目中,在使用的页面引入相应的js文件。
<div id="tb">
效果图:
需要引入五个基本的js文件和css样式文件
顺序是这样的
首先引入:<script type="text/javascript" src="easyUI1.3/jquery-1.7.2.min.js"></script> 因为他是基于jquery的,所以这个必须引入,而且是第一个引入,浏览器加载的时候首先加载到它。
其次引入:
<script type="text/javascript" src="easyUI1.3/jquery.easyui.min.js"></script>
然后是国际化文件,中文的
<script type="text/javascript" src="easyUI1.3/locale/easyui-lang-zh_CN.js"></script>
最后css样式
<link rel="stylesheet" href="easyUI1.3/themes/default/easyui.css" type="text/css"></link>
<link rel="stylesheet" href="easyUI1.3/themes/icon.css" type="text/css"></link>
文件引入我们可以写自己的dialog了,首先写一个最简单的:
<div id="dd" class="easyui-dialog" title="My Dialog" style="width:400px;height:200px;" data-options="iconCls:'icon-save',resizable:true,modal:true" >
第一种dialog
</div>
效果是这样的:
这也是一种写法
还有一种写法是这样的:
<script type="text/javascript">
$(function(){
$('#d_').dialog({
title: 'My Dialog2',
width: 400,
height: 200,
closed: false,
cache: false,
modal: true
});
});
</script>
<div id="d_">
第二种dialog写法
</div>
通过id获得div然后给他设置
效果图:
这是纯粹的dialog,那么我想在dialog上面加toolbar怎么加呢?
这样实现,也是两种方式,第一种:
<div class="easyui-dialog" style="width:600px;height:300px"
data-options="title:'My Dialog3',toolbar:'#tb',modal:true">
第一种 有toolbar的dialog
</div>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">edit</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true">help</a>
</div>
效果图:
第二种:
<div class="easyui-dialog" style="width:600px;height:300px"
data-options="title:'My Dialog4',modal:true,
toolbar:[{
text:'Edit',
iconCls:'icon-edit',
handler:function(){alert('edit')}
},{
text:'Help',
iconCls:'icon-help',
handler:function(){alert('help')}
}]">
第二种 有toolbar的dialog
</div>
效果图:
那么我想加按钮怎么加呢?
如下:
第一种:
<div class="easyui-dialog" style="width:600px;height:300px"
data-options="title:'My Dialog5',buttons:'#bb',modal:true">
有按钮的第一种dialog的写法
</div>
<div id="bb">
<a href="#" class="easyui-linkbutton" οnclick="alert('save')">Save</a>
<a href="#" class="easyui-linkbutton" οnclick="alert('close')">Close</a>
</div>
效果图:
第二种:
<div class="easyui-dialog" style="width:600px;height:300px"
data-options="title:'My Dialog6',modal:true,
buttons:[{
text:'Save',
handler:function(){
alert('save');
}
},{
text:'Close',
handler:function(){
alert('close');
}
}]">
有按钮的第二种dialog的写法
</div>
完整的代码:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="easyUI1.3/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="easyUI1.3/jquery.easyui.min.js"></script>
<link rel="stylesheet" href="easyUI1.3/themes/default/easyui.css" type="text/css"></link>
<link rel="stylesheet" href="easyUI1.3/themes/icon.css" type="text/css"></link>
<script type="text/javascript" src="easyUI1.3/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(function(){
$('#d_').dialog({
title: 'My Dialog2',
width: 400,
height: 200,
closed: false,
cache: false,
modal: true
});
});
</script>
</head>
<body>
<div id="dd" class="easyui-dialog" title="My Dialog" style="width:400px;height:200px;" data-options="iconCls:'icon-save',resizable:true,modal:true" >
第一种dialog
</div>
<div id="d_">
第二种dialog写法
</div>
<div class="easyui-dialog" style="width:600px;height:300px"
data-options="title:'My Dialog3',toolbar:'#tb',modal:true">
第一种 有toolbar的dialog
</div>
<div id="tb">
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">edit</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true">help</a>
</div>
<div class="easyui-dialog" style="width:600px;height:300px"
data-options="title:'My Dialog4',modal:true,
toolbar:[{
text:'Edit',
iconCls:'icon-edit',
handler:function(){alert('edit')}
},{
text:'Help',
iconCls:'icon-help',
handler:function(){alert('help')}
}]">
第二种 有toolbar的dialog
</div>
<div class="easyui-dialog" style="width:600px;height:300px"
data-options="title:'My Dialog5',buttons:'#bb',modal:true">
有按钮的第一种dialog的写法
</div>
<div id="bb">
<a href="#" class="easyui-linkbutton" οnclick="alert('save')">Save</a>
<a href="#" class="easyui-linkbutton" οnclick="alert('close')">Close</a>
</div>
<div class="easyui-dialog" style="width:600px;height:300px"
data-options="title:'My Dialog6',modal:true,
buttons:[{
text:'Save',
handler:function(){
alert('save');
}
},{
text:'Close',
handler:function(){
alert('close');
}
}]">
有按钮的第二种dialog的写法
</div>
</body>
</html>
运行你会发现,首先出来的是嗲;dialog2,为什么呢?因为它是最后加载的?只能这样理解,哈哈...