第 1 章 jQueryEasyUI 入门

学习要点:

  1. 什么是 jQueryEasyUI
  2. 学习 jQueryEasyUI 的条件
  3. jQueryEasyUI 的功能和优势
  4. 其他的 UI 插件
  5. 是否兼容低版本 IE
  6. 下载及运行 jQueryEasyU

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

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

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

二.学习 jQueryEasyUI 的条件 因为jQueryEasyUI是基于jQuery的UI库,所以,必须需要jQuery课程的基础。而jQuery 需要那些基础,直接参考 jQuery 课程 66 课第一节内容。

三.jQueryEasyUI 的特点 1.基于 jquery 用户界面插件的集合; 2.为一些当前用于交互的 js 应用提供必要的功能; 3.使用 EasyUI 你不需要写很多的 javascript 代码,通常只需要写 HTML 标记来定义用 户界面即可; 4.支持 HTML5; 5.开发产品时可节省时间和资源; 6.简单,但很强大; 7.支持扩展,可根据自己的需求扩展控件;
8.目前各项不足正已版本递增的方式不断完善; 9.源代码加密,商业版付费
四.其他的 UI 插件 除了 jQueryEasyUI 之外,还有 DWZ(国产的,基于 jQuery 的 UI 插件),还有一个独 立的 ExtJS 的 UI 插件。

五.是否兼容低版本 IE 我们将要使用最新的 jQueryEasyUI 版本:

1.3.5,它里面自带的 jQuery 版本是 2.0。也 就是说,不再支持 IE6,7,8 这三款浏览器了。如果你必须要使用,可以选择更低版本。当然, 我们已经不在建议兼容这些版本了。最基本的原因是:jQueryEasyUI 很少用于 Web 应用的 前台页面,一般用于后台的 UI 或者企业级应用的 UI(较为重)。那么使用这些功能的用户 不会那么鱼龙混杂,一般会被要求使用更高级的浏览器,所以没有必要向下兼容。 PS:有部分用户坚持使用 IE6,声称未来会一直使用 IE6。那么我建议放弃这样的用户, 因为 IE6 性能低下、内存泄漏、不支持高级特性,成倍的开发成本。如果失去这样的用户, 就面临停工,那么死也要会死的痛快点,而如果活下来,那么也会非常愉快。可是,总是迎 合这些低质量用户,你就像得了慢性病一样,每天折磨着,痛苦地慢慢死去,就算公司倒闭 了,那些客户还不停电话说,系统有问题,你还要不停解释公司倒闭了,技术人员全跑了。

六.下载及运行 jQueryEasyUI 下载最新的 jQueryEasyUI1.3.5 版本,然后解压后直接使用即可。 //HTML5 调用 jQueryEasyUI

<!DOCTYPE html> 
<html>
<head>
<title>jQueryEasyUI</title> 
<metacharset="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(){}"> dialogcontent. </div> 

</body>
</html>

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值