EasyUi入门

最新推荐文章于 2021-02-13 07:02:13 发布

PeggieF

最新推荐文章于 2021-02-13 07:02:13 发布

阅读量636

点赞数

文章标签： EASYUI导入 EASYUI安装 EASYUI入门 EASYUI基础例子

本文链接：https://blog.csdn.net/novia1234/article/details/38304389

版权

1.先下载EASYUI

http://download.csdn.net/detail/novia1234/7696023

2.在项目目录下新建一个 jquery文件夹，将EASYUI压缩包解压到该文件夹。

3.在将红色和绿色的代码复制到自己的项目中，运行一下就懂了。绿色的代码是将easyui引用到项目中，红色的代码是一个日历和弹出框的Easyui例子。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication1.WebForm2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>EASYUI TEST</title>
    <script type="text/javascript" src="/jquery/jquery.min.js"></script>
   <script type="text/javascript" src="/jquery/jquery.easyui.min.js"></script>
   <link href="jquery/themes/default/easyui.css" rel="stylesheet" type="text/css" />
   <link href="jquery/themes/icon.css" rel="stylesheet" type="text/css" />
   <script src="jquery/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
   <script type="text/javascript" src="/jquery/easyloader.js"></script>
   <script type="text/javascript">
       function load1() {
           using('calendar', function () {
               $('#cc').calendar({
                   width: 180,
                   height: 180
               });
           });
       }
       function load2() {
           using(['dialog', 'messager'], function () {
               $('#dd').dialog({
                   title: 'Dialog',
                   width: 300,
                   height: 200
               });
               $.messager.show({
                   title: 'info',
                   msg: 'dialog created',
                   height: 300
               });
           });
       }
</script>

</head>
<body>
<h1>EasyLoader</h1>
<a href="#" class="easyui-linkbutton" οnclick="load1()">Load Calendar</a>
<a href="#" class="easyui-linkbutton" οnclick="load2()">Load Dialog</a>
<div id="cc"></div>
<div id="dd"></div>
</body>
</html>

4.EASYUI的实例

在下载了Easyui的压缩包后，解压后的demo文件夹里面就有各种分好类基础例子。在浏览器中打开各个页面，右击页面——查看源/查看源代码。有时候一些页面的效果显示不出来，可能是浏览器问题，换一个浏览器即可。

参考网址：http://blog.csdn.net/limlimlim/article/details/10294315 （将EASYUI引用到项目中）

http://www.zi-han.net/case/easyui/base.html （EASYUI入门）