第 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

二.学习 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视频教程》,请勿用于商业用途,否则后果自负。

时间: 2024-08-03 02:58:06

第 1 章 jQuery EasyUI 入门的相关文章

jQuery EasyUI入门视频教程【20讲】

jQuery EasyUI入门视频教程[20讲] jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.非职业讲师孙宇讲授,全20讲.

jQuery EasyUI入门

什么是jQuery EasyUI? jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单的html标签. jQuery EasyUI的特点 1.基于jquery用户界面插件的集合 2.为一些当前用于交互的js应用提供必要的功能 3.EasyUI支持两种渲染方式分别为javascrip

01 jquery easyui 入门示例

第一步 引入所需样式和JS文件 <link rel="stylesheet" type="text/css"  href="easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"> <script type=

jQuery EasyUI 入门简介

对于前端开发者来说,在开发过程中应用"框架"这一工具,可以极大的缩短开发时间,提高开发效率.今天我们就开介绍一款常用的框架--jQuery EasyUI. 那什么是jQuery EasyUI呢? jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单的html标签.然后就可以

JQuery EasyUI入门视频教程

下载地址:百度网盘下载 课程目录( G  I4 H5M  I   第01课(大概介绍一下easyui,和组织的地址,官方网站等)   第02课(介绍easyloader组件和easyui怎样使用)   第03课(parser组件panel组件)   第04课(通过用户登录来演示dialog.ajax的使用,serialize方法的使用,前后台怎样交互等)4 L( N& Z7 J; j( B6 V   第05课(讲解easyui的form控件.validatebox控件.怎样跟后台交互)   第0

easyui 入门指南

所有easyui组件都有,属性,方法,事件,用户可以简单的对其扩展. 属性 属性定义在 jQuery.fn.{plugin}.defaults中.例如, 对话框组件[dialog]的属性定义在jQuery.fn.dialog.defaults. 事件事件(回调函数)也定义在jQuery.fn.{plugin}.defaults. 方法调用方法语法: $('selector').plugin('method', parameter);相信$('selector')中的'selector'大家只要使

jquery基础教程 - 第一章 JQUERY入门

Jquery基础教程 - 第一章 JQUERY入门 内容提要 1.jquery能做什么 2.jquery为什么如此出色 3.第一个jquery驱动的页面 4.纯javascript与jquery 5.开发工具 6.小结 1.jquery能做什么 取得文档中的元素 -- jQuery为准确的获得需要检查或操纵的文档元素,提供了可靠而富有效率的选择符机制. 找到所有应用了.content class样式的div中所有的P标签             $('div.content').find('p'

网站前端_EasyUI.基础入门.0002.带你玩转jQuery EasyUI Panel组件 ?

简单介绍: 说明: Panel面板常当作其它内容的容器,可用于创建包含Layout布局/Tabs选项卡/Accordion折叠面板等基础组件,还提供了内置的折叠/关闭/最大化/最小化的行为,你可以将它嵌入到网页的任何位置. 基础用法: <div id="p" class="easyui-panel" title="面板-标题" data-options="iconCls:'icon-save',closable:true,coll

jQuery EasyUI的使用入门

jQuery EasyUI不是什么太高级的东西,就是用jQuery写了很多方法.定义了很多属性,通过调用这些方法.属性,可以达到一些特定的效果,然后我们再根据具体需求微调就好了.至少需要导入两个样式表和两个js文件: <link type="text/css" rel="stylesheet" href="jquery-easyui-1.5.1/themes/default/easyui.css" /> <link type=&