第 1 章 jQuery EasyUI 入门

学学要点:

1.什么是 jQuery EasyUI

2.就学 jQuery EasyUI 的尺码 3.jQuery
EasyUI 的作用和优势

4.其他的 UI 插件

5.是否合营低版本 IE

6.下载及运行 jQuery EasyUI

 

在正规明白 jQuery EasyUI 之前,大家先明白一下怎么是 jQuery
EasyUI。它的读书标准、市场上的同类产品、所支撑的浏览器等。然后配置运行
jQuery EasyUI。

一.什么是 jQuery EasyUI

jQuery EasyUI 是一组根据 jQuery 的 UI 插件集合,而 jQuery EasyUI
的目标就是协助Web 开发者更轻松的创设出作用丰富并且赏心悦目的 UI
界面。开发者不须要编制复杂的JavaScript,也不需求对 css
样式有心心念念的驾驭,开发者要求通晓的唯有一部分大概的 html 标签。

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

图片 1

二.学习 jQuery EasyUI 的条件

因为 jQuery EasyUI 是基于jQuery 的 UI 库,所以,必须需求jQuery 课程的基本功。而jQuery要求那一个基础,直接参考 jQuery 课程
66 课首节内容。 

三.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.3.5,它里面自带的 jQuery 版本是
2.0。也 就是说,不再帮衬IE6,7,8 那三款浏览器了。倘使您必须求动用,可以接纳更低版本。当然,我们早就不在指出包容那些本子了。最主旨的原由是:jQuery
EasyUI 很少用于 Web 应用的前台页面,一般用来后台的 UI 或者公司级应用的
UI(较为重)。那么使用那么些功用的用户不会那么名不副实,一般会被须要使用更尖端的浏览器,所以并未须要向下包容。

PS:有部分用户锲而不舍采纳 IE6,声称将来会一贯使用 IE6。那么我提议甩掉这样的用户,因为
IE6 品质低下、内存泄漏、不帮忙高级特性,成倍的开发开支。借使失去那样的用户,就面临停工,那么死也要会死的痛快点,而一旦活下来,那么也会非常欣欣自得。不过,总是迎合那些低质量用户,你如同得了急性病一样,每一天折磨着,伤心地逐步死去,即使集团关门了,这个客户还不停电话说,系统有标题,你还要不停解释集团关门了,技术人士全跑了。

六.下载及运行 jQuery EasyUI

下载最新的 jQuery EasyUI1.3.5 版本,然后解压后直接选取即可。 

//HTML5 调用 jQuery EasyUI

<!DOCTYPE html>
<html>
    <head>
        <title>jQuery Easy UI</title>
        <meta charset="UTF-8" />
        <script type="text/javascript" src="easyui/jquery.min.js"></script>
        <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
        <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>
        <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
        <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
    </head>
    <body>
        <div class="easyui-dialog" style="width:400px;height:200px"
        data-options="title:'My Dialog',collapsible:true,iconCls:'icon-ok',onOpen:function(){}">
            dialog content.
        </div>
    </body>
</html>

PS:尽管我们用了 HTML5 的格式,但有所标签或者沿用 XHTML
的,并为真正涉及到HTML5 的价签和 CSS。

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

备考:本学科出自《光叔恢jQuery
EasyUI摄像教程》,请勿用于商业用途,否则后果自负。