标签:引用 更新 ddc 单元 html 判断 res check process
easyui 是一种基于 jQuery 的用户界面插件集合。
easyui 为创建现代化,互动,JavaScript 应用程序,提供必要的功能。
使用 easyui 你不需要写很多代码,你只需要通过编写一些简单 HTML 标记,就可以定义用户界面。
easyui 是个完美支持 HTML5 网页的完整框架。
easyui 节省您网页开发的时间和规模。
easyui 很简单但功能强大的。
官网地址:http://www.jeasyui.com/index.php
文档地址:
第一步: 下载 Jquery EasyUI
你在使用和进行开发时,请遵守官方相应的条款,尊重他们的知识版权。
目前官方最新版本是:jQuery EasyUI 1.5,官方提供了两个版本供下载,GPL 版本和商业版本,你根据自己的需要下载
第二步:创建 html 文件,并添加相关引用
创建项目的文件夹
easydemo                            // 项目根目录
├── index.html                      // 我们的测试页面
└── lib                             // 第三方组件
    └── jquery-easyui-1.5.5.2       // 下载的easyui的压缩包解压后的文件夹
        ├── easyloader.js           // easyui的动态加载组件的js
        ├── jquery.easyui.min.js    // 压缩后的包!!!关键!!
        ├── jquery.easyui.mobile.js
        ├── jquery.min.js           // 依赖的jq的文件
        ├── locale                  // 本地语言的文件夹
        ├── plugins                 // 拆分的组件
        └── themes                  // 样式主题文件夹第三步: 修改 index.html 文件
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- easyui的样式,可以选择其他主题 -->
  <link rel="stylesheet" href="./lib/jquery-easyui-1.5.5.2/themes/bootstrap/easyui.css">
  <!-- easyui的图标css文件 -->
  <link rel="stylesheet" href="./lib/jquery-easyui-1.5.5.2/themes/icon.css">
  <!-- easyui 依赖jq -->
  <script src="./lib/jquery-easyui-1.5.5.2/jquery.min.js"></script>
  <!-- jq easyui的js脚本 -->
  <script src="./lib/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script>
  <!-- 引用语言包 -->
  <script src="./lib/jquery-easyui-1.5.5.2/locale/easyui-lang-zh_CN.js"></script>
  <title>AICODER jQuery EasyUI Demos</title>
</head>
<body>
  <!-- 功能:点击按钮弹出模态对话框 -->
  <input type="button" value="弹出模态对话框" id="btnOpenDialog">
  <!-- 设置弹出来的对话框div,首先设置为隐藏 -->
  <div id="addDialog" style="display: none;">
    <h3>添加的对话框</h3>
  </div>
  <script>
    $(function () {
      $(‘#btnOpenDialog‘).on(‘click‘, function () {
        // 弹出对话框
        $(‘#addDialog‘).dialog({
          modal: true,  // 是否是模态对话框
          title: ‘AICODER全栈实习--添加用户!‘,  // 弹出来的窗口的标题
          width: 400, // 窗口的宽度
          height: 400, // 窗口的高度
        });
      });