jQuery EasyUI 详解

EasyUI 简介

easyui 是一种基于 jQuery 的用户界面插件集合。

easyui 为创建现代化，互动，JavaScript 应用程序，提供必要的功能。

使用 easyui 你不需要写很多代码，你只需要通过编写一些简单 HTML 标记，就可以定义用户界面。

easyui 是个完美支持 HTML5 网页的完整框架。

easyui 节省您网页开发的时间和规模。

easyui 很简单但功能强大的。

官网地址：http://www.jeasyui.com/index.php

文档地址：

快速入门弹出对话框 demo

第一步：下载 Jquery EasyUI

你在使用和进行开发时，请遵守官方相应的条款，尊重他们的知识版权。

目前官方最新版本是：jQuery EasyUI 1.5，官方提供了两个版本供下载，GPL 版本和商业版本，你根据自己的需要下载

GPL 版本 GPL 版本在 GPl 协议下有效，你能在任何遵循 GPl 协议的项目下使用它。
商业版本商业版在 Commercial 协议下有效，你能在任何非 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, // 窗口的高度 }); }); });

标签

frozen

pagination

javascript

easyui

jquery

EasyUI 简介

快速入门 弹出对话框 demo

快速入门弹出对话框 demo