山路弯弯需坚持之jQuery EasyUI （一）

最新推荐文章于 2026-06-15 10:48:05 发布

原创最新推荐文章于 2026-06-15 10:48:05 发布 · 672 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#jquery #easyui

jEasyUI 专栏收录该内容

1 篇文章

订阅专栏

jQueryEasyUI是一款基于jQuery的用户界面插件集合，提供多种UI控件如对话框、菜单、标签页等，简化了JavaScript应用开发过程。它支持HTML5并通过简单的HTML标记即可实现复杂的用户界面。

jQuery EasyUI

jQuery EasyUI是什么？

1）jQuery EasyUI 框架提供了创建网页所需的一切，帮助您轻松建立站点；
2）easyui 是一个基于 jQuery 的框架，集成了各种用户界面插件；
3）easyui 提供建立现代化的具有交互性的 javascript 应用的必要的功能；
4）使用 easyui，您不需要写太多 javascript 代码，一般情况下您只需要使用一些 html 标记来定义用户界面，节省了开发产品的时间和规模；
5）Easy UI比较简单，但是功能非常强大；

Easy UI的特点：

jQuery EasyUI为提供了大多数UI控件的使用，如：accordion，combobox，menu，dialog，tabs，validatebox，datagrid，window，tree等等。
jQuery EasyUI是基于JQuery的一个前台ui界面的插件，功能相对没extjs强大，但页面也是相当好看的，同时页面支持各种themes以满足使用者对于页面不同风格的喜好。一些功能也足够开发者使用，相对于extjs更轻量。
特点：
1）基于jquery用户界面插件的集合;
2）为一些当前用于交互的js应用提供必要的功能;
3）EasyUI支持两种渲染方式分别为javascript方式（如：$(‘#p’).panel({…})）和html标记方式（如：class=”easyui-panel”）;
4）支持HTML5（通过data-options属性）;
5）开发产品时可节省时间和资源;
6）简单，但很强大;
7）支持扩展，可根据自己的需求扩展控件;

使用jQuery EasyUI

可以点击我下载jQuery EasyUI的不同版本,然后通过script标签来引用，当然也要引用easyui的css文件、icon图片等。
在页面中使用EasyUI,需要进行引用：

<link rel="stylesheet" type="text/css" href="css/easyui.css">
<link rel="stylesheet" type="text/css" href="css/icon.css">
<script src="jquery.min.js"></script>
<script src="jquery.easyui.min.js"></script>

示例代码：

<html>
<head>
<link rel="stylesheet" type="text/css" href="css/easyui.css">
<link rel="stylesheet" type="text/css" href="css/icon.css">
<script src="jquery.min.js"></script>
<script src="jquery.easyui.min.js"></script>
</head>
<body>
<h2>jQuery EasyUI</h2>
    <p>点击鼠标可以拖动方框</p>
    <div style="margin:20px 0;"></div>
    <div class="easyui-draggable" style="width:200px;height:150px;background:#fafafa;border:1px solid #ccc">点击我，拖动</div>
</body>
</html>