jQuery EasyUI 入门必看

 更新时间:2016年06月03日 08:51:01   投稿:jingxian  
下面小编就为大家带来一篇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。

以上这篇jQuery EasyUI 入门必看就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • jQuery实现全选、反选和不选功能

    jQuery实现全选、反选和不选功能

    这篇文章主要为大家详细介绍了jQuery实现全选、反选和不选功能 ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • jquery获得option的值和对option进行操作

    jquery获得option的值和对option进行操作

    本文为大家介绍下jquery获得option的值和对option的操作,下面有不错的示例分析及示例代码,感兴趣的朋友可以了解下
    2013-12-12
  • jquery中获得元素尺寸和坐标的方法整理

    jquery中获得元素尺寸和坐标的方法整理

    这篇文章主要介绍了jquery中获得元素尺寸和坐标的方法,需要的朋友可以参考下
    2014-05-05
  • jQuery实现简单计算器

    jQuery实现简单计算器

    这篇文章主要为大家详细介绍了jQuery实现简单计算器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • checkbox批量选中,获取选中项的值的简单实例

    checkbox批量选中,获取选中项的值的简单实例

    下面小编就为大家带来一篇checkbox批量选中,获取选中项的值的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • jQuery实现Div拖动+键盘控制综合效果的方法

    jQuery实现Div拖动+键盘控制综合效果的方法

    这篇文章主要介绍了jQuery实现Div拖动+键盘控制综合效果的方法,实例分析了jQuery操作div块拖动的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • jQuery弹出遮罩层效果完整示例

    jQuery弹出遮罩层效果完整示例

    这篇文章主要介绍了jQuery弹出遮罩层效果,结合完整实例形式分析了jQuery遮罩层的动态创建与使用技巧,需要的朋友可以参考下
    2016-09-09
  • 初窥JQuery(二)事件机制(2)

    初窥JQuery(二)事件机制(2)

    上篇文章我简单的描述了加载页面、事件委派、事件切换三种JQuery的事件机制,这篇文章我讲下在JQuery事件机制中占主导地位并且在我们的实际工作中最常用到的机制-事件处理
    2010-12-12
  • 基于JQuery的6个Tab选项卡插件

    基于JQuery的6个Tab选项卡插件

    今天在修整博客侧栏信息时,利用到了Tab选项卡方式,因为ZBlog封装的是JQuery库,所以很自然地就想到了IdTabs。
    2010-09-09
  • jquery插件开发之实现google+圈子选择功能

    jquery插件开发之实现google+圈子选择功能

    最近项目中用到的一个效果,类似于Google+的添加圈子功能。本文插件约8成封装,好多功能是依据项目中实际需求写的。若要使用,可根据自身情况扩展修改
    2014-03-03

最新评论