EasyUi_学习之路_01

来源：互联网发布：登记照排版软件编辑：程序博客网时间：2024/05/21 18:33

今天开始学习easyui的第一步

首页得下载好easyui的包然后添加到你的项目中

今天做一个dialog

方法一：自己写一下

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-81">
<link href="easyui/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="easyui/themes/icon.css" rel="stylesheet" type="text/css" />
<script src="easyui/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="easyui/jquery.easyui.min.js" type="text/javascript"></script>
<script src="easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
<title>dialog</title>
<script type="text/javascript">
         $(function () {
             //第二种使用方法：
             //使用js方式，使用JQuery选择器选择到要操作的div，然后添加各种样式等等
             $("#dd").dialog({
                 width: 400,
                 height: 200,
                 modal: true,
                 title: "我的第一个Dialog！",
                 iconCls: 'icon-save'//easyui图片样式
            });
         });
     </script>
</head>
<body>

<div id="dd">
            我的第一个Dialog。
</div>
</body>
</html>

第二种直接生成，在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 Content.
</div>

下面看一下dialog的属性

属性类型描述默认titlestring标题名称New Dialogcollapsibleboolean伸缩，折叠falseminimizableboolean最小化falsemaximizableboolean最大化.falseresizableboolean尺寸是否可变化的falsetoolbararray,selector下面这个toolbar是在dialog中添加工具栏，都有两种生成方式
方式一

<div class="easyui-dialog" style="width:600px;height:300px"data-options="title:'My Dialog',toolbar:'#tb',modal:true">Dialog Content.</div><div id="tb"><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a><a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"/a></div>

方法二

<div class="easyui-dialog" style="width:600px;height:300px"data-options="title:'My Dialog',modal:true,toolbar:[{text:'Edit',iconCls:'icon-edit',handler:function(){alert('edit')}},{text:'Help',iconCls:'icon-help',handler:function(){alert('help')}}]">Dialog Content.</div>

nullbuttonsarray,selector在dialog中添加一些按钮
方式一

<div class="easyui-dialog" style="width:600px;height:300px"data-options="title:'My Dialog',buttons:'#bb',modal:true">Dialog Content.</div><div id="bb"><a href="#" class="easyui-linkbutton">Save</a><a href="#" class="easyui-linkbutton">Close</a></div>

方式二

<div class="easyui-dialog" style="width:600px;height:300px"data-options="title:'My Dialog',modal:true,buttons:[{text:'Save',handler:function(){...}},{text:'Close',handler:function(){...}}]">Dialog Content.</div>