JQuery EasyUI后台UI框架使用连载

在正式了解 jQuery EasyUI 之前,我们先了解一下什么是 jQuery EasyUI。它的学习条件、市场上的同类产品、所支持的浏览器等。然后配置运行 jQuery EasyUI。

一、什么是JQuery EasyUI

jQuery EasyUI 是一组基于 jQuery 的 UI 插件集合,而 jQuery EasyUI 的目标就是帮助Web 开发者更轻松的打造出功能丰富并且美观的 UI 界面。开发者不需要编写复杂的
JavaScript,也不需要对 css 样式有深入的了解,开发者需要了解的只有一些简单的 html 标签。

官方网站:http://www.jeasyui.com

官方最新版本是1.4.4.

二、学习JQueryUI的条件

  因为jQuery EasyUI是基于jQuery的UI库, 所以, 必须需要jQuery课程的基础。 也必须要用html和CSS的基础。

三、jQuery EasyUI  的特点

1.基于 jquery 用户界面插件的集合;

2.为一些当前用于交互的 js 应用提供必要的功能;

3.使用 EasyUI 你不需要写很多的 javascript 代码,通常只需要写 HTML 标记来定义用

户界面即可;

4.支持 HTML5;

5.开发产品时可节省时间和资源;

6.简单,但很强大;

7.支持扩展,可根据自己的需求扩展控件;

8.目前各项不足正已版本递增的方式不断完善;

9.源代码加密,商业版付费

四、其他的 UI  插件

在现在的市场上面除了 jQuery EasyUI 之外,还有 DWZ(国产的,基于 jQuery 的 UI 插件) ,还有一个独立的 ExtJS 的 UI 插件。

五、是否兼容低版本 IE

我们将要使用最新的 jQuery EasyUI 版本:1.4.4,它里面自带的 jQuery 版本是 2.0。也就是说,不再支持 IE6,7,8 这三款浏览器了。如果你必须要使用,可以选择更低版本。当然,我们已经不在建议兼容这些版本了。最基本的原因是:jQuery EasyUI 很少用于 Web 应用的前台页面,一般用于后台的 UI 或者企业级应用的 UI(较为重) 。那么使用这些功能的用户不会那么鱼龙混杂,一般会被要求使用更高级的浏览器,所以没有必要向下兼容。

PS:有部分用户坚持使用 IE6,声称未来会一直使用 IE6。那么我建议放弃这样的用户,因为 IE6 性能低下、内存泄漏、不支持高级特性,成倍的开发成本。如果失去这样的用户,就面临停工,那么死也要会死的痛快点,而如果活下来,那么也会非常愉快。可是,总是迎合这些低质量用户,你就像得了慢性病一样,每天折磨着,痛苦地慢慢死去,就算公司倒闭了,那些客户还不停电话说,系统有问题,你还要不停解释公司倒闭了,技术人员全跑了。

六、下载及运行 jQuery EasyUI

下载最新的 jQuery EasyUI1.4.4 版本,然后解压后直接使用即可。

下面是下载到本的JQuery EasyUI的文件结构


//HTML5 调用 jQuery EasyUI

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <title>jQuery Easy UI</title>
 5 <meta charset="UTF-8" />
 6 <script type="text/javascript" src="easyui/jquery.min.js"></script>
 7 <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
 8 <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>
 9 <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
10 <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
11 </head>
12 <body>
13 <div class="easyui-dialog" style="width:400px;height:200px"
14 data-options="title:‘My Dialog‘,collapsible:true,iconCls:‘icon-ok‘,onOpen:function(){}">
15 dialog content.
16 </div>
17 </body>
18 </html>

PS:虽然我们用了 HTML5 的格式,但所有标签还是沿用 XHTML 的,并为真正涉及到HTML5 的标签和 CSS。

最新的 1.3.5 的 API 中文文档: 汉化人博客: http://blog.sina.com.cn/richie696

时间: 2024-12-18 07:55:43

JQuery EasyUI后台UI框架使用连载的相关文章

ASP.NET MVC搭建项目后台UI框架—7、统计报表

ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NET MVC搭建项目后台UI框架—4.tab多页签支持 ASP.NET MVC搭建项目后台UI框架—5.Demo演示Controller和View的交互 ASP.NET MVC搭建项目后台UI框架—6.客户管理(添加.修改.查询.分页) ASP.NET MVC搭建项目后台UI框架—7.统计报表 本节,我将通

ASP.NET MVC搭建项目后台UI框架—4、tab多页签支持

目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NET MVC搭建项目后台UI框架—4.tab多页签支持 ASP.NET MVC搭建项目后台UI框架—5.Demo演示Controller和View的交互 在点击左侧菜单中的选项时,我希望有Extjs.EasyUI等中类似的tab页签功能,因为这样可以支持多个页面的浏览,有时候我们可能需要同时打开多个页

ASP.NET MVC搭建项目后台UI框架—1、后台主框架

目录 ASP.NET MVC搭建项目后台UI框架-1.后台主框架 ASP.NET MVC搭建项目后台UI框架-2.菜单特效 ASP.NET MVC搭建项目后台UI框架-3.面板折叠和展开 ASP.NET MVC搭建项目后台UI框架-4.tab多页签支持 ASP.NET MVC搭建项目后台UI框架-5.Demo演示Controller和View的交互 ASP.NET MVC搭建项目后台UI框架-6.客户管理(添加.修改.查询.分页) ASP.NET MVC搭建项目后台UI框架-7.统计报表 ASP

ASP.NET MVC搭建项目后台UI框架—9、服务器端排序

ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NET MVC搭建项目后台UI框架—4.tab多页签支持 ASP.NET MVC搭建项目后台UI框架—5.Demo演示Controller和View的交互 ASP.NET MVC搭建项目后台UI框架—6.客户管理(添加.修改.查询.分页) ASP.NET MVC搭建项目后台UI框架—7.统计报表 ASP.NE

ASP.NET MVC搭建项目后台UI框架—8、将View中选择的数据行中的部分数据传入到Controller中

ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NET MVC搭建项目后台UI框架—4.tab多页签支持 ASP.NET MVC搭建项目后台UI框架—5.Demo演示Controller和View的交互 ASP.NET MVC搭建项目后台UI框架—6.客户管理(添加.修改.查询.分页) ASP.NET MVC搭建项目后台UI框架—7.统计报表 ASP.NE

ASP.NET MVC搭建项目后台UI框架—5、Demo演示Controller和View的交互

目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NET MVC搭建项目后台UI框架—4.tab多页签支持 ASP.NET MVC搭建项目后台UI框架—5.演示Controller和View的交互 这一节,我将用一个Demo来演示在此UI框架中,控制器和视图的交互.以渠道管理为例.效果图如下: 这里我使用了基于jquery的模态窗体组件lhgdialo

Jquery学习---Easy UI 框架

1.1. easyui的目录分析 以 jquery Easy UI 1.3.2 版本学习 demo 实例 locale 国际化信息 plugins 框架一些插件 src 源码 themes 样式文件 easyloader.js  框架核心加载器 (加载其它plugin) jquery-1.8.0.min.js  jQuery类库 jquery.easyui.min.js  框架类库 (等价于 easyloader.js + plugins 所有插件 ) 1.2. 在项目中引入 EasyUI 必须

ASP.NET MVC搭建项目后台UI框架—2、菜单特效

目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 上一篇,已经把整个项目的框框给搭建好了,但是还没有任何js效果实现.这一节,我就来说下关于菜单的特效实现.我需要的效果如下: 需求总结: 点击顶部菜单模块,左侧显示不同模块下面的菜单列表 点击左侧菜单选项,展开下面的子菜单,并折叠其它菜单模块,菜单图标折叠显示为+,展开显示为-. 1.先看下Top视图中代码: 2.在Top视图的head中添加如下js: <script sr

ASP.NET MVC搭建项目后台UI框架—11、自动加载下拉框查询

ASP.NET MVC搭建项目后台UI框架—1.后台主框架 需求:在查询记录的时候,输入第一个字,就自动把以这个字开头的相关记录查找出来,输入2个字就过滤以这两个子开头的记录,依次类推. 突然要用到这个功能了,印象中曾经写过这个功能的文章,一下子找不到了,只好重新贴出来备忘.最近博客快2个月没更新了,因为这两个月一直在闭门写书. 引入js和css下载地址:http://download.csdn.net/detail/zouyujie1127/9550279 <link href="~/l